How to Format Images For Your Website

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 image format landscape pathway - example of how to format images for your website

JPG / JPEG

(Joint Photographic Experts Group)

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 image format VIEWS Digital Marketing logo

PNG

(Portable Network Graphics)

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 image format planet Earth

GIF

(Graphics Interchange Format)

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.

SVG

(Scalable Vector Graphics)

Ideal for:

  • 2D graphics and imagery composed of geometric shapes
  • Animated icons

Considerations:

  • SVG is a vector image file format that allows images to remain crisp and clear at any resolution or size.
  • SVGs support transparency.

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.

Last updated: June 2019