From the point of view of influencing users, a page with an image is better than a text canvas. Images help you better understand the meaning and break up text canvases into easy-to-read blocks.
On the part of search engines, images are essential for SEO. They can bring more traffic from Google Images.
SEO enthusiasts and professionals know that optimizing images on a website is essential.
It provides many benefits, such as improved behavioural factors, faster page loading, and better ranking for target queries.
Without proper image optimization, you lose many SEO opportunities.
Image Optimization Tips that Everyone should know
Tip #1: Use high-quality and relevant images
It's true. Image relevance is one of the most critical factors for search engines. Make sure that the illustrations match the subject of the article.
Image quality is also essential: blurred or badly cropped images create a wrong impression of the site and product.
On the other hand, bright and high-quality images have a good effect on behavioural and social factors. They attract users' attention and make your content more clickable and viral.
The image must have a goal.
Images helping to understand and simplify something. They should clearly explain an idea and show an object or process.
If you tell the user about your product (product or service), it is logical to place a high-quality image of the product or a photo of the service provision.
It is also helpful to use a mini-infographic that clearly shows valuable statistics. Or screenshots that help the user understand the settings of the service interface.
Illustrations on abstract topics (such as SEO or personal growth) are hard to make really relevant.
However, you should at least avoid replicated stock images and use all other available optimization methods.
Tip #2: Use original Images (Don't use copyrighted Images)
For SEO, it is also essential that the images are original and not copied from other people's sites. Search engines value original, unique content — and pictures are no exception.
Search engines can detect duplicates of images and understand taken Image is original or not. Therefore, before you post another stock photo on your site, think carefully.
How to check an image for originality
Find Image Originality Using the TinEye service.
Here you can upload a photo or provide a link to it. The service contains it and returns zero results if the idea is unique.
If the image is already used on any sites, TinyEye will show a list of these sites.
Check if the image is already in the search engine index
For example, upload a photo to Google Images. If it is found in the search engine index, you'll see like this:
Tip #3: File names are essential: replace “DSC1234.jpg” with an explicit name
Search robots use all available text elements to provide a relevant image in response to a user's request.
In addition to the universal title and alt attributes (which we'll talk about later).
Google and other search engines robots pay attention to the uploaded file's name. The name must match the content of the image.
For example, if the photo shows a chocolate cake, then you should replace the set of letters and numbers automatically generated by the camera with the name:
Correct: Chocolate cake.jpg.
Rename the files before uploading them to the site. If possible, use one of the target keywords for this page in the file name.
The image name should be small and straightforward and contain at least one keyword that describes the essence of the image well.
The file name won't help your visitors in any way since they'll never see it (unless they want to download your infographic).
But a proper and relevant title is a way to provide search engines with a bit of extra information about the page's content.
Optimize photos for an online store
If you have an online store and post many product photos, you can go even further.
Let's say you sell Nike men's running shoes. Instead of the standard generated photo name, you should make an extended file name with a keyword.
Think about how users search for products on your site. What name templates do they use when searching? People who search for “air max” can enter the search query in different ways:
- “Nike air max men's running shoes”;
- “air max Nike men's running shoes”;
- “men's Nike air max”;
- Niki air max;
See which patterns prevail (check it out in analytics). Take the most common template and use it as a basis when creating names for images.
Tip #4: Select the correct image format
When choosing a file type for images (as with all work with pictures), it is essential to maintain a balance between quality and size.
A “light” image of poor quality will create a wrong impression and may cause users to reject the purchase or leave the site.
On the other hand, a high—quality image in high resolution can increase the page load time-the bounce rate will increase.
We need a balance between quality and size.
There is no correct or ideal format for images. It all depends on the type of image and how you want to use it.
The most commonly used forms are JPEG, PNG, and GIF. All browsers and search engines support them.
Here are some recommendations::
- For online stores, the best option is JPEG. This format provides the best quality with the smallest file size. We also recommend using JPEG for large photos or illustrations.
- Use PNG if you want to keep the background transparent. Other formats do not support this feature.
Instead of JPEG and PNG, you can use the little-known WebP format.
This format preserves high quality with even smaller file sizes. You can convert a photo to WebP using Squoosh.
The Advance Blog Tip: Safari browser does not support the WebP format.
Keep in mind that Google uses page load time as one of its ranking factors.
How to reduce the weight of images
The image should be compressed as much as possible without visible loss of quality. The photo must remain clear and undisturbed.
You can reduce the image weight when exporting an image in Photoshop (File → Export → Save for Web) by simply reducing the quality.
What can be done here:
- Select the JPEG format.
- Slightly reduce the quality (up to 60-80%).
- Change the image size.
For example, a picture in PNG format with 3000 x 3000 pixels takes 2.18 MB.
Save it as JPEG, reduce the quality up to 80%, and reduce the size to 1500 x 1500 pixels. The weight after optimization is 250.2 KB.
Online Image compression services
JPEGmini — allows you to reduce the weight of images by up to 80%.
ImageOptim is a desktop program for Mac. Allows you to optimize images without losing quality.
The program removes metadata from the image file: GPS location, camera serial number, image data, and so on. Works with JPEG, SVG, GIF, and PNG formats.
The compressor is a free online service. It can compress up to 90%. However, you can't upload images of more than 10 MB.
TinyPNG and TinyJPG are online services for compressing PNG and JPEG images
ImageOptimizer is an online service that allows you to reduce the weight of a file using compression and reduce the size of a painting by setting limits on the maximum width and height.
After optimizing the images, check the page loading speed using Google PageSpeed Insights.
The Advance Blog Tip: Remember, every extra second of loading costs you traffic losses.
Tip #5: Upload images to the site precisely in the required size
We've already talked about optimizing the image weight, and now we'll talk about the feasibility of loading large images.
For example, you uploaded an image of 2500 x 1500 pixels, and the page should display it in the size of 250 x 150 pixels.
Although the picture is displayed in a small size, the large image must load completely to show it. If there are several such images on the page — this can significantly affect the loading speed.
What should I do about it?
Create images in the size that they should be displayed on the site. You can change the size in Photoshop. Select “Image” → “Image Size.”
Tip #6: Use responsive images
Adaptability is not a luxury but a necessity. Images must be displayed correctly on all devices: from smartphones to high-resolution retina displays.
To do this, the size of the images must correspond to the size of the device's screen from which the user will view them.
For example, you posted a photo with a resolution of 800 x 400 pixels:
- One user will log in to the site from their smartphone, and the photo will look normal.
- Another user uses an iMac with a retina display. On such a display, the image will be displayed with a significant visual loss of quality.
You can upload several versions of the original image (in different sizes) and display images of the corresponding dimensions for screens with different resolutions.
Tip #7 Fill in the title and alt attributes
Search engines recommend that you always fill in the title and alt attributes. It is significant for pages whose content consists primarily of images.
The title provides additional information about the image. The text specified with this attribute is shown when the cursor hovers over the image.
The alt attribute is a text alternative for images. It is used to describe the content or essence of the picture.
If the browser can't load or render an image for some reason — it will display the text specified in this attribute.
You must add an alternative description of the image:
- If the image doesn't load, the browser will display a description, and the user can at least understand what they should have seen.
- Useful for ranking. Use keywords in attributes. It will help search robots understand what is shown in the image and then offer it in response to a relevant user request in the image search.
- An alternative description can anchor an internal link if the image links to another page on the site.
Here are some simple rules for alt attributes::
- Fill in the alt attributes for each image (especially for product photos).
- The description should be short and written in simple language.
- If you sell products with model numbers or serial numbers, use them in the alt attributes.
- Place in alt only those keywords that relate to the image.
Tip#8: Create a Sitemap file for the images
To make sure that search robots index all images on the site's pages, specify them in the Sitemap file.
You can create a separate XML file for images or update an existing sitemap.
Site Map Sample code:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="https://www.yandex.ru/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/primer.html</loc> <image:image> <image:loc>http://example.com/image.png</image:loc> <image:geo_location>Karelia< /image:geo_location> </image:image> </url> </urlset>
You can use this syntax to specify up to 1000 images for a single page.
Learn more about Image Sitemaps: Google Help.
A special Google XML Sitemap for Images plugin automatically creates a Sitemap file for all images you upload to WordPress sites.
Tip #9: Add captions to images
A caption is a text that accompanies an image on a page. For example, like this:
Why is it important to add captions?
Because people pay attention to them when they quickly scan a page.
Image captions are also suitable for SEO.
The main thing to think about is, It is helpful for the user.
Tip #10: Host images on your hosting service
Sometimes images are placed on third-party resources (for example, on image hosting sites such as Imgur, FactPic, or others). This method saves your hosting space.
This option is fraught with risks — if the photo hosting service is overloaded with traffic or changes the rules for storing and displaying images, the illustrations on your site may not load, or not all of them will load.
It is better to post all the images on your website. Use the recommendations for optimizing the size of image files so that they load faster and don't slow down your web pages.
Use Content Delivery Networks (CDNs)
A CDN is a great option to avoid overloading your site's pages with images and other media files. Content delivery networks can increase the loading speed of your page and help solve bandwidth problems.
The only downside is when it comes to backlinks. The image is hosted on the CDN domain. So when someone links to an image from your site, they are referring to the CDN. It means that your site doesn't get enough link mass.
- For extensive resources with a massive amount of media content and millions of traffic, you can use a CDN to avoid losing traffic due to slow page loading.
- Sites with daily traffic of several thousand visitors are likely to be able to cope without a CDN.
- Use only those images that fit into the page's context and complement the rest of the content in meaning.
- Do not use unoriginal images.
- Place images next to relevant text.
- Fill in alt attributes.
- Pay attention to the quality and content of the pages. Google takes into account the quality of information from the site when ranking images. It can also use fragments of page text in the image descriptions in Google Images.
- Work out the URL structure for images because, in addition to the names of image files, Google also considers the paths in the URL.
- Optimize your site for viewing from mobile devices.
- Post-high-quality images.
- Pay attention to the overall quality of the site.
- Always specify the title and alt attributes.
- The text adjacent to the images must be relevant to the picture.
- Post only relevant images. They should complement the main page content or explain something faster and better than the text.
- Use original images or images with an open license.
- Give your image files clear names.
- Choose the optimal format. JPEG is suitable for most cases.
- Compress images if you don't notice any visual quality loss.
- Upload images in the sizes that they will be displayed on the site.
- For different screens — different versions of the same image.
- Be sure to specify the title and alt.
- Add a list of images to the Sitemap file.
- Take care of the appearance of social media posts with links to your articles. OpenGraph and Twitter Cards will help you here.
- It is better to host media content on your hosting. If there is too much of it, use a CDN.
Frequently asked questions about Optimizing Images for SEO
|👉Quantity: is one image per page enough for SEO?|
|We haven't seen any information that the number of images placed on the page affects the site's position in any way. If you know something about this, please share it in the comments.|
|👉How does the image content affect SEO?|
|The image should fit seamlessly into the page content and complement it. It is essential for users who look at the illustrations to understand the topic better and search engines who have learned to recognize what is in the image.|
|👉How big should the image files be?|
|For online stores where dozens (or even hundreds) of product images are placed on a single page, the optimal image size is up to 70 KB.|
|👉How to quickly optimize all photos on your site|
|In WordPress websites, you can use Image Optimizer Plugins like ShortPixel, EWWW Image Optimizer, Imagify.|
Please provide your valuable feedback. Your feedback is essential for us.
The best way to multiply your happiness is to share it with others.