Image File Type Options
There are three main file types we’ll want to focus on for saving images, optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to
know and keep these in mind when saving an image. Here are a few details:
- GIFs are not for high-quality images, but you can use animated GIFs
- JPGs can be optimized to a very small file size while keeping the high quality of an image
- PNGs are typically used when a transparent background is needed
Saving Images Properly
Large images on a web page take longer to load. By “large”, we are referring to file size rather than the dimensions of an image, i.e. the value in KB, MB, GB etc. Users expect a webpage to load in under 2 seconds, and most will abandon a
page that takes more than 3 seconds to load. It’s important that your images are small enough to ensure a speedy site. There are three things you can do to properly optimize your images for your web site:
- Make the image the proper proportions and dimensions
You will need to determine what is the largest size your image will be in all responsive views (i.e. phone, tablet or desktop).
- Save the image “for the web”
It is possible to reduce the size without reducing the quality of the image on a screen. This requires changing the image resolution down to 72 PPI without losing the proper final dimensions
or proportions and then compressing the image. - Compress the image
You can do this with Photoshop or other online tools like www.tinyjpg.com, www.tinypng.com or https://pixlr.com/e/. The goal is to get large “hero” images under 100KB, and images smaller than 800px wide under 50KB. The smaller the file size, the less
data people have to load on the browser. - Recommended image dimensions
- Fullscreen banner: 1900 px wide by 550 px high
- Featured image of a blog or news post: 900 px wide by 400 px high
- Image floated left or right within a content block: 400 px wide
Images of Text
Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare
situations where images of text must be used, the text alternative must contain the same text presented in the image.
If you would like to have text float over a banner, please review how to create a blog slider.