Many of our clients upload images through a content management system. This guide is a reference for them and future clients on how to optimize images for web use. Overly large images — both in dimensions and file size — are one of the biggest culprits of slow load times. Taking these steps will help keep your websites fast.
Choose the correct file format
While there are nuances, here are some general guidelines to follow:
- JPG is best for photos or images with many colors
- PNG is for simple images or non-vector images that need a transparent background
- SVG is preferred for any vector images (icons, illustrations, your logo)
- WebP is a modern replacement JPG and PNG that results in smaller file sizes (more on this below)
- GIF can be used for animations, but we recommend converting to Lottie animations when possible
Resize dimensions
It’s not uncommon that a 4000x8000 pixel high-resolution photo is uploaded into a blog post. These raw photo files can be orders of magnitude bigger in file size than they need to and really bog down a page load time.
To determine the ideal file size:
- Identify the size the image appears on the website (you can right click and choose “inspect element” to see to see dimensions in the site code). It can be helpful to keep documentation of common image sizes for content producers.
- Resize the image the be double that size. So for example, if a blog post thumbnail appears as 400x300 pixels, size the image to be 800x600. Doubling the dimensions will ensure that the image appears crisp on high-resolution screens.
Resizing can be done in tools like Photoshop or free tools like Canva and Figma.
Compress images
While sizing an image helps a lot, file sizes can still be reduced significantly. Larger images can often be compressed by a further 80–90% by running through a compression tool.
This can sometimes be done in the same tool you use to resize like Photoshop or Figma (with a plugin). Alternatively, there are free sites like https://tinypng.com where you can upload and compress images.
Lastly, consider converting your JPG and PNG files to WebP. Most WebP files are about 25% smaller. The only reason not to use WebP is that a tiny percentage of browsers don’t support the format (less than 4% at time of writing), but you can create a fallback image for those edge cases.