Image File Types for Web
A picture is worth a thousand words, which is one of the reasons images are so important for your website or e-store.
Your images need to be clear & crisp while maintaining a small file-size so as not to weigh your website down; causing it to perform poorly and ultimately being penalised by Google for being slow to load.
It’s essential to find a balance between file size & image quality when you saving an image for your website
JPG or JPEG
JPGs can be saved at low, medium or high-quality; allowing you to balance quality with file size.
PNGs provides a much higher-quality image but also larger file size. The key thing about PNGs is that they can have transparent backgrounds which makes them great for logos.
You might need to search for the image later, so make sure its name describes the image (contains a keyword), is easy to read & to type. “Screenshot 2021-01-29 at 12.40.00.jpg” is not a meaningful name.
Full-stops only before the file name. (.jpg).
Don’t leave any spaces between words. Rather use a hyphen or an underscore (boot_leather_size1.jpg)
The file name will be used by search engines to understand the image. Naming a file to include a relevant keyword will help boost your SEO
Image & file size
By “image size”, we’re referring to the image pixel dimensions (width x height in pixels), and by file size, we mean the weight of the image in either KB or MB.
The bigger the file size, the longer your website will take to load (the slower your website will become)
A slow website means a higher bounce rate (% of visitors that will bounce away/leave your web page without taking any action or view any further pages)
Images should be as small a file-size as possible without sacrificing too much quality
- Inspect images on your site using the VIEW IMAGE PROPERTIES extension on Chrome. This will give you the exact dimensions you need your image to be (see the “reduced file size” info for correct dimensions)
- Name files descriptively & in simple language
- If you have lots of images on a page – calculate the kb size of all the images together
- Once you have uploaded your image, don’t forget to add an ALT text to help Search Engines better understand what the image is about & boost your Search Engine Optimisation
To optimise your images for the web using one of the following:
- Photoshop: Save for Web
- GIMP is a free and open-source alternative to popular Adobe Photoshop.
- Affinity Photo: Export
- Mac: Preview Image > Tools > Adjust Size (set dimensions and the resolution)
- Use an Online Tool: Compress your image with a free program like TinyPNG or TinyJPG. These tools will significantly reduce your file size without interfering with the quality.