Need more help? We’re here for you.
The way that you format your images can seriously impact your site’s performance. Images typically account for most of the downloaded bytes on a web page, so the fewer bytes the browser has to download, the faster the browser can render the content.
We take the guesswork out of finding the optimal settings for your image with the following recommendations on how to format images for your website for best results.
Need to find the size and dimensions of your original image?
I have a PC: Right-click on the image file and select Properties.
I have a Mac: Press Option while clicking on the image file, then select Get Info.
Top Image Formats for the Web
The ideal image file format depends on how the image will be used. Already know about these image formats? Jump down to Best Practices.
JPG / JPEG
Ideal for:
- Images with a lot of different colors, like photographs, screenshots, or similar image assets
- Reducing the file size of highly detailed images
Considerations:
- JPEGs are lossy, meaning that when the data is compressed, unnecessary information is permanently deleted from the file.
- Once you reduce the image size of a JPEG, enlarging this file will make the image appear blurry.
- Text in a JPEG often becomes blurry when the image is compressed.
- The JPEG file format can support up to 16 million colors.
- Save JPEGs at the highest quality setting for optimal results.
PNG
Ideal for:
- Images with transparent backgrounds or partial transparency
- Detailed graphics like logos
- Images that contain text
Considerations:
- PNG-8 supports 256 indexed colors and thus delivers better compression for images with a small palette.
- PNG-24 supports up to 16 million colors.
- PNG is lossless, so you do not lose any data during compression.
GIF
Ideal for:
- Animated images (no audio)
Considerations:
- GIFs accommodate up to 256 indexed colors.
- GIF is lossless, so it retains all the data contained in the file.
Best Practices
Follow these guidelines to keep your web pages running smoothly with optimal images.
Image Size
Images should be no more than 2500 pixels wide. Banner images smaller than 1500 pixels may appear blurry or pixelated if enlarged to fit wider screens.
File Size
Uploading larger images will affect site performance. We recommend a file size of less than 500 KB when possible (there will be exceptions).
Tip: If you have a large number of images on a page, even if each is under 500 KB, you may experience slow loading speeds. Check your page content to ensure your page size is 5 MB or under.
File Name
Only use letters, numbers, underscores, and hyphens in file names. Avoid spaces and other characters like question marks, percent signs, and ampersands to ensure that images upload correctly.
Tip: File names tell search engines what the image is about. Being more descriptive makes it more likely that you’ll show up in image searches.
