Web Images: Balancing Quality and Speed
10-10-2024
Speed matters. If your website is slow you’re doomed. Are you offering products? Your website speed just costed you a sale. Is your website a portfolio? You might have pissed off some recruiters.
Apart from internet speed, assets are the main culprit for slow websites. Especially media assets, especially images.
Through the following words I intend to make you an expert when it comes to web images. I want you to build crazy-fast websites. Websites that are cheaper for your visitors; cheaper in loading time and bandwidth.
Format matters
Whenever you add an image in your site, ask yourself if the format is web native, was that format made for the web? In this case JPEG or PNG are defeated by WEBP. WEBP is the format for the web. This format was created to balance quality and smaller size; a good combo right there! Apart from smaller sizes, WEBP supports lossless compression — meaning you can compress the images without losing quality. Wow! That’s not possible with JPEG.
It’s time to move your images to WEBP. Here is a simple website to convert your images to WEBP: https://cloudconvert.com/jpeg-to-webp. Or the simpler way is to use the cwebp command line utility, made by google, to convert an image or a directory of images to WEBP. Check it out here: https://developers.google.com/speed/webp/docs/cwebp
You’re Responsible for the dimension
Have your ever loaded a website and before the CSS loads, the logo is covering the entire screen, icons are are almost half the screen size. That’s a sign of abusing CSS and not caring about your users. Don’t use CSS to determine image sizes or dimensions. If you will be rendering the image at 50px by 50px; make sure the image is 50by50. Not 800px by 300px.
A simple trick is loading your website without CSS and see how it looks. It should be at-least functional and a breeze to navigate. Then you’ll know that you’re using CSS the right way — to enhance the look of the site, not to resize images or create titles out of paragraphs.
Do I need these images?
Don’t use images when it’s not useful. That why I don’t have cover images on my blog posts. A blog with images looks good and better than one without images. But is it faster? Do those image portray a useful message, Most of them don’t, and lately most are generated by AI.
Care about your users, not every user has a blazingly fast internet. Use images when necessary. Don’t just use them for decorative purposes.
Maybe you need a CDN, with all it’s awesomeness
Sometimes you don’t have to serve your images from your server. Maybe you need a Content Delivery Network ( CDN ). It will help reduce the load off your server to a CDN. CDNs also distribute your assets across many different regions throughout the world and making sure that users are served with images from the closest server. Which increases speed and reduces bandwidth.
Another cool feature offered by most CDNs is the ability to modify your images on the fly by just altering the URL. If you want to compress your image you can just include it in the URL;
<img src="https://res.cloudinary.com/demo/image/upload/q_60/my_image.jpg">
In the example above the q_60 adds a compression to the image at level of 60, the q is for quality.
The same can be done with size. If you want to load the image at a specific size; you can state that in the URL as well. If i need my image at 45px width I’ll do the following.
<img src="https://res.cloudinary.com/demo/image/upload/w_45/my_image.jpg" />
Obviously, there are a lot more other features and advantages of a CDN which, trying to explain, will require it’s own essay.
Alt is also important, very important
A small feature with big advantages, it should not be overlooked, it should be treated with value. The alt attribute. Firstly, search engines don’t see images, they rely on the alt attribute to know what information the image portrays. If you care about SEO, you undoubtedly should care about alt .
Not just SEO robots but visually impaired users also rely on the alt attribute to know what information does your image convey.
Sometimes assets get deleted accidentally, or typo mistakes leading to breaking images, in this case the user is not left in the woods, but the alt attribute acts as a fallback to help the fellow user know what exactly what information was in the lost image.
For all the above alt goodies to be possible it requires you to write good image descriptions. Don’t say ‘An image of a dog’, we know it’s an image, we know it’s a picture, just describe the contents; ‘A brown dog playing with a ball’; that’s better.
You can leave the alt empty for decorative images.
Give the user only what she needs
The most annoying thing to do to a user is giving them content they don’t currently need. Maybe the user does not want to scroll all the way down to your minimal footer, maybe as a user I am satisfied with your hero section. Why should I pay for content I wont see?
Lazy loading solves this issue. If images are way out of view, it’s better to load them on demand. But never do this to image which are suppose to be in view as soon as the page loads.
Here is the magic attribute: loading='lazy'. It tells the browser to only load the image when the user is scrolling closer towards it.
To avoid layout shift— always give your images width and height. Through these sizes, the page will preserve space for your images. And content won’t need to shift when it is time to show the lazy loaded image.
The final img tag, with lazy loading, will look like this;
<img src="my_image.png" loading="lazy" width="250px" height="100px" alt="…">
Make room for your images, nobody should be disturbed
I did touch a bit on this in the above lazy loading section. The simple statement is; make room for your images before they arrive. No one has to be disturb when it’s time to display your images. The page should not shift. Content layout shift is annoying.
The simple solution is to give your images a width and a height attribute. Tell the document and the browser to reserve space for your upcoming images.
<img src="my_image.png" width="250px" height="100px" alt="…">
Conclusion
Due to vastness of information and techniques of handling and optimizing images there is a lot of stuff that I intentional and unintentionally left out off this article. You can write a book about images in the web. My aim was to keep this article short, digestible and practical. I tried.
There is a topic that is interesting which I did not include in this article; Responsive Images. I might write a separate essay about it, or append it to this article, I am not sure as of yet. You can check a cool introduction to responsive images here: https://web.dev/learn/images/responsive-images.
Thanks!