Many clients upload images through a content management system. This guide serves as a reference for optimizing images for web use. Oversized images—both in dimensions and file size—significantly slow down load times. Following these steps keeps websites performing well.
Choose the correct file format
While nuances exist, here are general guidelines:
- JPG works best for photographs or images with many colors
- PNG is ideal for simple images or non-vector graphics requiring transparent backgrounds
- SVG is preferred for vector images (icons, illustrations, logos)
- WebP is a modern alternative to JPG and PNG that produces smaller file sizes
- GIF can be used for animations, though converting to Lottie animations is recommended
Resize dimensions
High-resolution photos—sometimes 4000x8000 pixels—are frequently uploaded into blog posts. These raw files can be vastly larger than necessary, significantly impacting page load times.
To determine ideal file dimensions:
- Identify how large the image displays on the website (right-click and select “inspect element” to see code dimensions). Maintaining documentation of common image sizes helps content producers.
- Resize the image to double that size. For example, if a blog thumbnail appears as 400x300 pixels, resize it to 800x600. Doubling dimensions ensures crisp appearance on high-resolution screens.
Resizing can be accomplished using Photoshop or free tools like Canva and Figma.
Compress images
While resizing helps considerably, compression tools can reduce file sizes further—often by 80–90% for larger images.
This can be done in tools like Photoshop or Figma (with plugins). Alternatively, free sites like tinypng.com allow image uploads for compression.
Consider converting JPG and PNG files to WebP. Most WebP files are approximately 25% smaller. The only drawback is that “a tiny percentage of browsers don’t support the format (less than 4% at time of writing),” though fallback images can be created for these cases. Our website team handles image optimization as part of every build.