Images are an integral part of the message a website communicates to its users. They make the content more engaging and improve readability. However, they also have a significant impact on SEO and website performance. This is why it’s essential to know how to find, name, optimize, and reference them.
For each website we design, we (or the client) prepare the images. Here’s our list of the 5 steps to follow for image preparation.
STEP 1 : ChoOSE YOUR images
What should you base your photo selection on? Relevance. Images primarily serve to complement your paragraphs, so they should illustrate your content or be in line with your website’s design. Also, consider the format: if the image space is narrow in width, it might be better to choose a more portrait-oriented format than landscape, for example. Ensure you have high-quality images as well. You’ll understand that a photo taken with your flip phone in 2012 isn’t ideal.
Then, prioritize personalized photos. Images that belong to you and represent you are much better. Integrating unique photos is a big plus for your website’s personality (and user engagement). Stock photos are cool, but they quickly become repetitive and recognizable from site to site. If you don’t have your own photos, we recommend checking out Unsplash, a Montreal-based website dedicated to sharing royalty-free photos. Their website has over 120,000 contributing photographers and offers more than 1 million photos. It’s very useful and a great resource. Otherwise, working with a photographer can be very interesting. We know some good ones if needed! ????
Finally, avoid images with text. The reason is simple; text on an image is unreadable by search engines, which is a big no-no for SEO. Moreover, it often causes issues with responsive design. Of course, there are exceptions, and sometimes images with text are necessary for website content. Still, as a general rule, it’s best to avoid this type of images.
step 2 : Format your images
There are several image formats, and each has its own specialty.
jpeg format
This is the most common and optimized format. It is used in the majority of cases, especially for photos, whether they are team photos, banner images, those accompanying content, and so on.
PNG format
This is the magical format that allows superior quality, but more importantly, supports transparency. It is primarily used for logos and animations. To work with them, you need to use software like Photoshop or a similar program.
SVG format
It’s a vector format, so it can adapt to all sizes without ever becoming pixelated. SVGs are often used for icons because they are responsive and offer excellent rendering quality. This format is typically worked on in Illustrator or a similar software.
The list of formats is long, but if you can distinguish between these three formats, you have a solid foundation for formatting your images. It’s also worth noting that the WebP format, developed by Google, is trendy, and web developers are increasingly using it due to its image compression performance.
step 3 : Optimize your images
Once selected and in the right format, how do you optimize your images? A significant part of optimization is handled by the website (if it’s well-constructed), but it’s still useful to be able to identify non-optimized images. Often, you can spot heavy images by their loading times. If all the pages on your website load in 0.5 seconds, but the page for your latest blog article takes 8 seconds to load, there’s a good chance it contains overly heavy images.
A long loading time not only slows down navigation on your site but also provides a poor user experience and negatively impacts your SEO. Conversely, you should also ensure that your photos are of good enough quality for the format generated on your page, or they could be stretched and blurry, which is not better for the user experience.
step 4 : name your images
Before integrating your images into your site, their titles must be relevant. The golden rule is never to use accents, special characters, capital letters, or spaces in your titles, as these elements can cause issues depending on your server’s configuration. For example:
❌ Photo 001 de la crémaillière.jpg
✔️ machine-arcade-treize.jpg
By naming your images correctly, you describe content that, without this step, would be non-existent in the eyes of search engines, as they are very limited in their analysis of images.
step 5 : redact the alt text tag
It’s easy for us humans to look at a picture and understand what it is, but for search engines, as mentioned above, it’s challenging to get an idea of what the image contains. So, you need to describe the image to them so they can index it, and this description is what we call in our jargon the Alt text tag (for alternative text).
Your 5th step for each image involves writing a short and precise description of your photo that includes keywords related to your content. If you’re not sure what to write as a summary, this decision tree will help you.
In addition to improving the accessibility of your website, you increase the chances that your photos will be well indexed by search engine robots. You’ll also reap the benefits of your work in Google Images searches. How many times have you stumbled upon a website through an interesting image? Too many times not to write Alt text tags for your images.
–
Finally, images are much more important than we might think, and if they are not well chosen, formatted, optimized, and referenced, they can harm you. Managing your images properly takes a little more of your time, but in the end, you’ll have a website that offers a much better experience to your users and greatly assists your SEO.
Now that you’re a pro at preparing images for your website, I invite you to discover why investing in photos for your website is essential.
