Images have been integral to the web from the beginning, and the question of their optimization arose quickly. It’s important to know that they often constitute the heaviest elements of our web pages, so they must be processed before being published.
But what are the real benefits of such optimization? And what are the tools and techniques that can be easily applied to our images?
What does ”optimize” mean?
Optimizing your media files revolves around three main points:
- We want our images to load quickly.
- We want our images to be easily discoverable by search engine robots.
- We want our images to remain visually appealing.
The balance between these three points constitutes the essence of optimization. It’s the pursuit of these three factors that will make your images optimized and suitable for the web. In summary, we aim to achieve the best visual output while ensuring they do not degrade the user experience and remain easily accessible.
WHAT ADVANTAGES DO WE GAIN FROM IT?
This will primarily improve the loading speed of your website in general. We know how crucial this is for the user experience. When a page takes too long to load, users either close it or go elsewhere, and frustration often increases when it comes to images that take a long time to display. In any case, we don’t want that to happen.
If you do this well, our dear search engines will thank you. Truly. We often overlook the SEO attributes of our media on our site, but well-optimized images translate to better overall site indexing, improved accessibility, and an enhanced user experience (and we love that).
Your files will be lighter, thus making your site even lighter. Beyond the loading speed and the points discussed above, various backups and direct changes made to your source files will be much quicker (for domain transfers, database backups, etc.). In short, it’s a significant time saver.
aLL OF THIS SOUNDS GREAT, BUT HOW DO WE GO ABOUT IT?
Here are some tips you can follow when adding an image to your website in the future:
First, start with a large, high-quality image to ensure it displays well. It’s much easier (I would even say advisable) to start with a larger image and scale it down if needed. Next, make sure the image is in the right format, and here are the two best options:
JPEG: Use this format for your photos because it’s the ideal image format for anything resembling photography. It’s a lightweight compressed format that still retains all the necessary colors for the depth of a photograph.
PNG: This format is suitable for logos, graphics, drawings, large areas of solid color, and anything that needs to be resized without losing quality. It’s a heavier format, but media saved in this format will generally have a smaller file size. Its main advantages include the ability to provide images with a transparent background and smooth edges that pixelate very little when resized
hOW CAN I CONVERT MY image into these appropriate formats when starting from a raw format?
So, if you’re not a fan of image editing software like Photoshop (I mention it because it’s the one I use, no offense to the others, I love you), there are websites that can do it for you! A few queries to our favorite search engines should suffice! (For the laziest ones, here’s a shortcut)
We aim to find a balance between the dimension (the physical size, in fact), the resolution (the number of pixels it contains), and the weight of the final image we want to upload. To achieve this, some specific criteria have become standards in image processing:
- An image suitable for the web should not exceed 72 dpi.
- Background images that cover the entire screen should have a maximum/minimum width of around 2000 pixels.
- Your photos displayed on your site should generally not exceed a file size of 200 to 300 kilobytes (KB), and anything resembling an icon, graphic, or drawing (if you’ve been following closely, your PNG files) should weigh around 100 KB.
Once again, image editing software is your friend when configuring all of this.
WARNING: I want to emphasize that modifying the resolution or size of your image will affect the other factors of its optimization and vice versa. Optimizing images is a specific technique that takes some practice. However, the time you invest in this will be more than repaid when you reduce the weight of your website by half just by optimizing your images. Keep that in mind.
The final touch will be to assign an appropriate title and alternate attribute to each of your images. In simple terms, search engine robots don’t see your images; they read them. This is why your media (whether photos or graphics) must be readable, meaning they should contain source information that clearly indicates what the image represents and places it in its context. An example is worth a thousand words (I’m a bit of a poet sometimes):
My logo in the top left of this website is beautiful; it’s optimized in PNG format.
But what you don’t see is that it contains this little piece of information that will tell the robots what it actually is and this help them index it.
Your goal here is not to forget to fill in this field when importing your image (your developer will do it for you in most cases) to allow our favorite robots to catalog it correctly. Additionally, when it comes to guiding someone with reduced capabilities through your website, computer screen readers can read this information aloud, informing the user about the nature of objects they may have difficulty seeing or discerning. Accessibility is a crucial concept, especially when it holds higher-than-average importance in your project. Finally, when your media doesn’t display correctly, it is replaced by this alternate text, clearly indicating to the user what it is, even if it fails to load.
Conclusion
Not overlooking the optimization of the various media elements that appear on our website is one of the keys at your disposal to elevate your website above the competition on search engines. The advantages in terms of user experience, usability, and search engine optimization make this approach a real asset when it comes to improving user conversion and traffic on your site.
If you’re looking for high-quality, large, and free-to-use stock images, websites like this one are ideal. Check them out.
