How to Optimize Images for Web
I have created a video tutorial showing how to optimize and prepare your images before uploading to your website.
Finding the perfect balance between the image quality and file size is crucial to make your website load fast and look great.
Images are a crucial part of every website. They are also the most important element affecting the performance of a website. Depending on how well you optimize your images for the web, it can make it or break it when it comes to website loading speed and even SEO performance.
In today’s tutorial, I want to share with you the five rules for effective image optimization for the web.
Image File Type
Use only JPG, PNG, and sometimes GIF image formats. GIF are usually much heavier than JPG and PNG, so only use them when showing some kind of animation is crucial. Also, more and more people are using vector-based graphics like SVGs these days, which is also cool to use, especially for things like logos and icons.
As for color profile, stick to sRGB, which will make sure that your images look right on web and mobile devices.
Image File Name
I have already covered how you should name your image files when it comes to SEO, so if you haven’t already, go check the video. In short, make the file name short and descriptive.
In addition to that, I recommend to only use small letters, hyphens, and underscores when naming the image files. Do not use question marks, percent, and other symbols and signs.
Image Aspect Ratio
Try to keep the image aspect ratio somewhat consistent. Try to stick to 3-4 aspect ratios for your images. For example, 1:1 square images, one ratio for wide images (16:9, 4:3, 3:2, etc) and one ratio for portrait images (3:4, 2:3, etc).
Make sure that you format all of your images to these aspect ratios. This will help your website look more organized and clean, and it will prevent your images from becoming distorted.
Image Resolution
I recommend to upload images with a maximum width of 2500px. And, of course, depending on what the image is going to be used for, 2500px can also be way too wide. It’s good for full edge to edge banners or headers, but if you are uploading an image which will be never shown wider than 1200px, you don’t need to have 2500px width.
So, my recommendation is to have the width of 2500px for banners and headers, and 1500px for regular images.
Image File Size
The most important thing here is, of course, to find a right balance between the image resolution and image compression level, so your images have the balanced file size. I recommend to use images of less than 500KB, and if possible even smaller. Having sharp looking image is great, but if it means it takes 10 seconds to load your webpage, it won’t matter at the end.
Summary
- Use JPG, PNG, SVG, and sometimes GIF image formats.
- Be consistent with image aspect ratios.
- Use RGB color mode and sRBG color profile.
- Don’t use images, which are wider than 2500px.
- And finally do your best to keep your image file sizes under 500 KB.
That’s all for this tutorial! If you have any questions or need help with anything, I am always here to help. Just go to Support page and I will do my best to help you.