The earth is round and images are “the usual suspects” of too long page loading times... Along with video content. So, what do you do? You comprise, of course. And then you face a major challenge: resizing images for the web without impacting their quality.
What file format should you select when saving your images for the web? And what type of compression should you choose?
How do you strike a balance between an image file's ideal size and that quality standard that you've set for your website?
On one hand, you strive to optimize your images for the web — to reduce their sizes — and thus to improve your website's overall speed and the user experience delivered there. But, on the other hand, you risk affecting precisely the user experience if you over-comprise your images and compromise their quality.
Now, time to shed some light on this “size vs quality” dilemma here:
1. What Does It Mean to Optimize Images for the Web?
In short: what does Google expect you to do when it suggests you to optimize the images on your website for improving your page loading times?
To reduce your image file sizes...
This way, you'd lift some of the weight and give your load time a speed boost!
You can do that either manually, using a script/plugin or... both.
And, when it comes to compressing images for the web, you have 2 common methods to choose from:
- lossy compression
- lossless compression
And we'll be delving into details in a bit...
What I want to stress out now is a bad practice that too many website owners stubbornly stick to:
Even though image optimization is one of the easiest ways that one can improve his website's performance, it's too often the most underrated one, as well.
Resizing images for the web means no more than:
- saving your images in the correct format
- using the context-appropriate image compression method
2. Choosing the Best Image File Format for Web: JPG vs PNG vs SVG vs GIF
What does it mean to save your images for the web “correctly”? What file type should you use, more specifically?
Here are the most commonly used ones along with helpful suggestions on their best use cases:
2.1. The JPG Image Format
Opt for a JPG (or JPEG) file format when you optimize your images for the web if it's screen shorts and general photos that you're saving.
Images that include many colors...
Now, what you do need to keep in mind is that:
The JPG format helps you reduce the files' sizes for the web, but with a loss in the quality of your images.
And here we get to the compression technique specific to this file format: the lossy compression.
It's a filter that, for the sake of decreasing the image's size, removes some of the data from the original file. This can only affect the quality of the image who's size you're trying to reduce.
Do keep in mind that this “degradation” process is irreversible...
In short: your web page will load faster, yet at the cost of your image's quality. The more you'll try to compress it, the... uglier it'll get.
The solution?
When you're faced with a scenario that requires this type of image format (e.g. saving images with lots of colors, complex still images), strike a balance between its quality and its size.
Just mind you don't over-reduce its size in the name of page loading speed...
2.2. The PNG Image Format
Choose the PNG format when resizing your images for the web if you do need high resolutions and high detail.
If it's simple images that you're saving (instead of fine-art photos with lots of colors).
Wondering what's the compression technique specific to this file format? The lossless compression:
A technique where the image's size gets reduced with no compromise on its quality.
2.3. The GIF Image Format
There's no point adding that it's a file format specific to animations.
When compressing your animated GIFs, it's the lossless technique that's being used. In other words, no need to worry about the loss of quality.
2.4. The SVG Image Format
Is it a logo, text, icon, or simple image that you're planning to optimize for the web? And are you looking for an image format that supports animation and interactivity?
Opt for the SVG format then.
Here are some more reasons why it might be the most suitable one for your use case:
- Google indexes SVGs, JPGs, and JPGs the same way; there would be no impact on your website's SEO
- SVG image files are scalable, by default, in both photo editing tools and browsers
- in most cases, SVG files are lighter than JPG and PNG image files
3. Resizing Images for the Web: Lowest File Size vs Acceptable Quality
What's that reasonable file size that you should target, that would preserve an acceptable quality of your images?
How do you strike a balance between compression rate and “decent” quality?
- you choose the appropriate file format for the type of image that you're trying to optimize
- and, implicitly, the suitable compression method, for that image format, as well
Yet, nothing beats “the golden rule of moderation” when looking for the balance between size and quality:
Opt for a medium compression rate.
Don't get “greedy”, don't reduce your images' sizes to the point of affecting their quality.
Even if it's top page load speed that you'd be gaining (and speed is UX, right?), the poor quality images resulting will still have a negative impact on the user experience.
4. Web Images Best Practices
Here's some sort of “guide”, including all the essential must-dos when resizing images for the web and optimizing them for an improved page loading time:
- save them in the correct file format
- save them at the appropriate size
- choose lossy compression, whenever possible
- lazy load images, when possible, for better page load times
- use pixels instead of inches when sizing images for the web; DPI — dots per inch — is not fit for the layout on the web
- automate the process, as much as possible
- go with a plugin that would compress and optimize your images externally, on their servers; this way, you'd be offloading your own website
- use web fonts instead of text within your images; they take less space and scale better
- when creating Retina images, make sure they're two times larger and, therefore, clear enough once displayed on the Retina device; the quality of the images should be the highest possible on your Retina Display-driven website
The END!
These are our tips and tricks on resizing images for the web and optimizing them without risking to affect their quality.
What other best practices would you have included?
Photo by Markus Spiske on Unsplash
