An expert in digital strategy, Jeff brings meticulous energy to the creative world through intentional design that works as well as it plays out on the screen. Intuitive form and function are his trademarks, finely honed through twenty years spent designing digital experiences that connect and inspire.
We love high-quality photography and graphics. We also love fast websites.
This reminds me of an old meme where the mom asks her son what he wants to be when he grows up. The boy says he wants to be a musician, and the mom replies, “Well you can only pick one.”
So when choosing between the two, we always use this rule of thumb: Users won’t notice a little reduction in quality in an image, but will certainly notice a slow loading site.
Properly optimized images strike a balance between quality and file size.
Here’s the steps we follow when preparing images for a website.
1. Crop the image to the proper size.
You’ll need to know exactly how the image appears on the site. Usually there’s a maximum container size where the image is held, such as the site width, or a column width. This is usually defined when we design and build a site, so we’ll follow those instructions to set the dimensions. Alternately, we’ll need to inspect the source code to calculate the size.
Note that if the pre-cropped image is smaller than the required dimensions, stop. We never want to upscale an image, which will result in pixelation. Get out your calculator and determine what the ratio is and crop accordingly or trim one of the sides.
We also need to know if the image will need to be sized for high-quality retina displays. In most cases, the answer is yes. This is a longer discussion than we have time for here, so just know that we usually crop or export the image at 2x the visual size of the image. For example, if the image is displayed on the site at 300x200 pixels, we would export that image at 600x400 (2x). Again, make sure you are not upscaling the image when you do that.
2. Choose the best image file format.
As of 2024, WebP and AVIF are now widely available across major browsers, which are designed to supersede the old standbys—JPG and PNG. While all modern browsers support these newer files, older versions do not, so there is a risk of incompatibly with a very small percentage of users. Photoshop currently does not support WebP and AVIF export without a plugin, and Sketch currently does not support AVIF format export.
While we’re excited about these newer formats, JPG and PNG are still the industry standard. JPG files are best used for photographs or illustrations, while PNG files are best for images requiring a transparent background or predominantly made up of text and/or vector graphics.
Experiment with exporting in different formats and compare file size and quality.
3. Choose the export settings.
This depends on what editing software is being used, but generally the practice is the same. In Adobe Photoshop, always use the “Save for Web (Legacy)” option with the quality set to around 60%. Exporting at 60% quality is not a hard and fast rule, but a good starting point. You can play with increasing the quality for a better image or decreasing the quality for more space savings depending on your preferences. Sketch has a similar setting on export to set the JPG quality around 60%, and be sure to check the “Progressive JPG” and “Save for web” options. Note that when exporting retina images, we can often get by with much lower quality settings and still achieve the same visual results when that image is displayed.
4. Run the image through an lossless compressor such as ImageOptim. Before uploading an image to the site, we’ll run it through a lossless compression tool to clean up some of the file’s unnecessary metadata. Our preferred tools are ImageOptim or Squoosh, both free web optimization softwares that removes excess metadata and compresses images without a reduction in quality. This process is simple–you just drag and drop the file into the ImageOptim or Squoosh window and it compresses the file appropriately.
Conclusion
One of the most important aspects of any website is performance, so optimizing images is a required step. We’ve processed so many images that it has become second nature.
