The choice of images for blogs and e-commerce is a crucial aspect and should be considered an integral part of the process of creating content for the web. Like a headline, it invites the reader to click on a preview and, even more, grabs his attention and highlights the content within a feed. Like a text, it provides information and enriches the content.
The image must have an impact, but at the same time it must respect strict parameters related to the specific channels. In addition, unlike print media, the web requires light files that do not weigh down loading, especially when thinking about mobile devices.
Choosing images for the web
In communication, the image conveys a message, so the context and the communication objective guide the choice of subject, perspective and colors. An image for the web should be sharp and of high quality, but at the same time very light. It must be relevant to the content and respond to users needs. In addition, the web rewards originality.
Images for a blog article
For a blog article, there are two main types of images. The first is for the cover, which must attract attention, anticipate the content and invite clicks. The second is the informative or didactic image that is contained in the body and must enrich the content.
For the cover image, crops on a detail are very effective, which intrigue the user and push him to click to learn more. I had experienced it while working for one of the largest online automotive magazines: in this case, the detail of a headlight or a wheel works. For other kinds of content, such as the previewi of a how-to video on YouTube, adding explicit textual elements may be more effective.
For an informative image, you need to leverage visual communication to add detail or emotion to the content. Going back to the previous example, showing the entire vehicle and images related to the content can be functional.
Images for an e-commerce
For an e-commerce product, it is often necessary to be clear from the first moment, showing the full product in in the cover image. Images are an integral part of the e-commerce listing and must show the product from different angles, isolate important details and alternate with neutral backgrounds photos with setting photos. Sometimes, it can be useful to add graphic and textual indications to specify the size and functionality of the product.
Images for a showcase website
For a showcase website, the most common mistake is the wish to add all the photos available. This is a mistake that risks weighing it down and damaging both user experience and SEO ranking. In other words, this is a digital suicide. The best choice is to include a few images, very impactful and meaningful, able to best describe the qualities of the company.
Image Seo Requirements
On the SEO side, a good image is light and consistent with the content. The most common formats are Jpg and Gif, with the first one being lighter and therefore better, and the sercond one improving quality and allowing to add a transparency. But a new format, WebP, has even more effective compression and is therefore the best choice at the moment.
Some tools, such as Screaming Frog, recommend being less than 100 kb in size, but this is only a rough indication. You should always consider the total loading time of the web page and the images that appear on the first screen and that can affect the LCP (Largest Contentful Paint) parameter of the Core Web Vitals.
When it comes to the size of an image on the page, the important thing is to fit it into the container. If I need to fit an image inside a block, the best thing is to use a resized image with the maximum size that allows it to fit inside.
It’s a different story for preview images. While staying within an acceptable weight range, these images must have at least one side with a minimum length of 1,200 kb. The format can be rectangular 16:9 or 4:3, or square 1:1.
For each image, it is of fundamental importance to set three parameters:
- Speaking URL, short and coherent (no fjahbt.jpg, no photo1.jpg, ok island-sea.jpg);
- Very short and easy-to-recognize file name (be careful not to use compromising words because, even if it is not immediately visible, it can be easily found);
- Alt title that describes well what I see in the image, less than 120 characters long (must be able to tell the image to a blind person), containing the main keyword;
- A caption visible in the text that completes the information and contextualizes the image within the page (a useful parameter in many cases, but not necessary).
Google Discover: sizes and formats
Google Discover is one of the channels that bring the most organic traffic to news websites, and the thumbnail image plays a very important role in optimization. The aspect ratio is 16:9 panoramic and the long side must be at least 1200 px. It must be implemented with max-image-preview:large meta tag, or served via AMP page.
E-commerce: sizes and formats
As a rule, the image of an e-commerce is square 1:1. Just think of Amazon, the e-commerce par excellence. When preparing a product sheet, we must also consider indexing for Google Shopping, a very useful channel for promoting an online shop. This platform provides square images from 800×80 0px to 120×120 px.
Google Maps: sizes and formats
Google Maps is crucial for a good local SEO strategy. Google My Business guidelines suggest png or jpeg images of at least 250×250 px (recommended at least 720 px per side), between 10 kb and 5 MB in size. The platform allows you to crop the image during upload.
There are 4 types of image types:
- Logo: square and must be the real one of the business;
- Cover: recommended format of 16:9, it must represent the main characteristics of the company;
- Photos of the activity: square format recommended;
- Post photos: 16:9 aspect ratio recommended.
