How to Optimize Images for the Web

Optimize While Maintaining Visual Quality

Before uploading an image to your website, you will need to optimize the image to make the file size as small as possible while maintaining visual quality.

Appropriate dimensions and optimizing to reduce the file size are important tasks but it’s possible to go too far resulting in images that look pixilated or washed out. Visual quality is more important than having the smallest possible file size.

Recommended Process for Optimizing Images

Crop and resize images. Ensuring the images aren’t larger than necessary greatly reduces the file size.
Save images using the appropriate format. Choose the format based on the image you are saving.
Optionally optimize after export. Further reduce file size using a compression tool.

Crop and Resize Images

Aspect Ratios

Crop your image based on where it will be used.

For example, images that will be cropped using CSS should be cropped to the correct aspect ratio before uploading to the CMS when possible. When CSS is used to crop an image, the browser still must load the full file, even if some of the image is cut off from display. As such, uploading the image in the correct aspect ratio helps improve the load time of the page.

Image Width

When sizing images for web, we typically talk about how many pixels wide an image is. Where an image is used should help determine how many pixels wide an image needs to be when uploaded. Your image doesn’t need to be larger than the maximum width it will appear on a web page (on either desktop or mobile).

Images that span the full width of your browser will (almost always) need to be larger than images that don’t span the full width of your browser. For full-width images, we recommend an image width of between 1500-2000px wide, while images that don’t display full-width can typically be 1000px wide or less.

Desired File Size

Your goal should be to optimize each image’s file size to 500 KB or less (maximum 1 MB). Note that this is the minimum amount of optimization you should aim for; the smaller you can make your file while maintaining visual quality, the better.

Sizing Summary
Image Type	Full-width images	Body Content Images
Image Width	Between 1500 and 2000px wide	Between 300 and 1000px wide
Desired File Size	50 – 300 KB after all optimizations	20 – 150 KB after all optimizations

Save Images Using the Appropriate Format

Save your image using modern formats when possible. Always use RGB color mode (not CMYK) for web images.

For photos: WebP (preferred) or JPG
For vector artwork: SVG
For images with transparency: WebP for photos or SVG for vector artwork. PNG files support transparency but are typically much larger than modern formats.

Both WebP and SVG are fully supported in Cascade and WordPress, work on all modern browsers and mobile devices and offer better quality vs. file size compared to JPEG or PNG.

Note: Emerging formats like AVIF and JPEG XL offer even better compression and will be added once browser and CMS support improves.

Optimize Images After Export

You can further reduce file size using a compression tool. Generally speaking, these tools allow you to upload your images and automatically optimize them for you, then allowing you to download the further optimized images.

Recommended Tools

Web/Desktop: Kraken (online only), Caesium online (desktop app and command line tool also available), Cloudinary, ImageOptim (for JPG, PNG, GIF)
WordPress plugins: EWWW Image Optimizer
Other options: JPEGmini, PicMin, ShortPixel

How to Prepare Images in Photoshop

For Photos Exported as WebP

Open your image in PhotoShop
Crop your image using the correct aspect ratio for your use case
Resize your image by setting the image’s width
1. Go to Image > Image Size
2. Set the image’s width to the desired size
3. Click OK to apply
Export your image as WebP
1. Go to File > Save As > WebP
2. Choose Lossy compression
3. Set Quality = 90%
4. Click OK to save

For Photos Exported as JPG

Open your image in PhotoShop
Crop your image using the correct aspect ratio for your use case
Go to File > Export > Save for Web
Set Image Format to JPEG
Set the image’s width to the desired size
Use the quality scale to compress the image. Using the previews, compare the quality of the image at different compressions to the original image. You can see the file size below each image preview. Choose the quality selection that best optimizes your image while maintaining quality.
Click Save