Image optimization is a critical factor in site loading time.
Today we are used to finding images everywhere on the internet: on social networks, in apps, on Google and of course on various websites.
Images help us create more attractive pages and, no less important, illustrate what is hard to explain in words alone and also summarize a large amount of data.
When talking about the aspect of Promoting the site on Google, just as keywords, titles and descriptions of every page need to be optimized,
Images should be optimized in the same way. So what is the most important thing to do?
keep a reasonable load time
When we browse from a home computer with a fast and stable internet connection, the vast majority of the images we view load very quickly.
On the other hand, if we are browsing on a congested network or on mobile, it seems that large images already start to load slowly.
One of the main causes of damage to user experience and site speed is heavy image weight.
Reducing image weight and properly optimizing images (in advance) before uploading them to the site helps significantly to prevent problems of this kind
and also bring us closer to a score of 100 in Google's speed testing tool (not that it is the goal in life, but it will not hurt…)
Since Google can diagnose how fast a particular site loads, it can certainly give an advantage to a site that loads faster than another, and today it has a clear preference to also check how the site loads on mobile screens.
Most responsive sites (sites adapted for mobile) use a certain technique to scale images down according to screen size.
Common ways to optimize images
Resizing an image in real time (not recommended)
This is a reduction done by adding CSS styling. That is, the browser loads the original image from the server, but displays it at the appropriate size using a styling command.
This is of course the most convenient and fast way, because it requires almost nothing other than this setting,
But if we upload a very large image, we haven't solved the speed problem at all, because its weight is still loaded in full and this burdens the loading of the site.
Server-side image resizing
This is a reduction performed by the server, so the browser receives an image that matches the resolution displayed on the screen, and the image also looks excellent because we have complete control over the algorithm used to reduce the images and we do not depend on the user's browser.
since we have complete control over the algorithm used to reduce the images and we are not dependent on the user's browser. Even so, it is still only a partial solution, because shrinking the image behind the scenes also takes time.
Optimizing the image size in advance (recommended)
When we optimize images before uploading them to the server or during upload (by a dedicated plugin),
We can completely control the quality and dimensions of the image.
So, for example, it doesn't always make sense to upload a chart at its natural size, since it is clear enough even after being reduced by a few dozen percent.
There are several plugins and services whose role is to reduce the physical size of an image without harming its quality.
(it is advisable to use a service or plugin that lets you reduce a large number of images in a single operation, more on that later).
So which solution should you use?
As with most optimization topics, with image optimization too there is no single answer regarding the ultimate solution.
For example, on a site where the weight of the images is in any case no more than 100 kilobytes, it is enough to settle for real-time reduction, which is the fastest.
On the other hand, on sites where image weights are heavier, it is well worth optimizing in advance,
but still give the option to adjust the image's dimensions manually in cases where the visitor is viewing on a very small screen
like the one found in the mini versions of smartphones.
There are also more sophisticated approaches. For example, choosing several base sizes,
so that the server knows which image to choose according to the maximum and minimum resolution that fits each size.
Here too there are quite a few services that do this automatically, depending on the content management system the site runs on
(in fact, this is the default in newer versions of WordPress).
In any case, it is worth optimizing before uploading the image to the server or while uploading it via a plugin (usually it takes a few seconds of processing per image).
A recommended plugin for performing this action is WP Smush Pro by WPMUDEV, this plugin is free for uPress customers – under Sites >> WordPress >> Install recommended plugins.
Making the image accessible to Google
Yes, you need to explain it to Google what is in the image Beyond the technical optimization of images that lets them load faster in the browser,
We also cannot ignore the fact that Google still cannot identify what appears in an image.
True – you may have heard of all kinds of apps that claim to do this, some of them even from Google, but it is always worth playing it safe.
The most recommended way to hint to Google what is in the image is to use a tag called the ALT tag. This is a tag that contains a few words describing what appears in the image.
Using this tag also enables for people with disabilities users of assistive tools to navigate the site more easily and even to have the content of the image read aloud.
(for example, you can hear what is in the image according to the description in the ALT tag using a "screen reader").
Another good way to make images accessible is to add text attached to the image that describes in a few sentences what appears in it.
This approach is better suited to long posts and articles because it lets visitors scan the article quickly and dwell only on the parts that interest them.
You can read the full article on the topic – Image Alt / Image Title in WordPress – what are the differences?
Sitemap
Some sites have dozens if not hundreds of different images, for example, in various e-commerce sites.
To make sure Google doesn't miss any image, It is advisable to build a sitemap that is updated regularly with the list of images on the site (you can also create a separate map for each category).
The sitemap is submitted to Google just like any other sitemap (through the Search Console), and you can see how many of the images were indexed.
automatically choose the image on social networks
Social networks are not directly related to SEO, but because so many sites use them to attract visitors, it is impossible not to mention them.
The most important thing is to make sure that links from our site appear properly with the accompanying image.
There is a special format called Open Graph that defines this.
With the help of the graph we can control the image that will be displayed in the preview and on the description that will be displayed next to it, without relying only on automatic detection.
For example, Facebook's debugging tool shows us the information that appears for each page, so we can make changes in the code or install a plugin if the information does not match. Twitter also has a similar format called Twitter Cards.
In summary
Optimizing images on our site can significantly improve the site's loading speed and the results obtained from Google's speed-testing tools, and as a result improve our chances be promoted on Google,
In addition, when talking about the aspect of SEO, it is highly recommended to optimize images in order to expose our site to different types of search results and additional options through which people will find us via casual Google searches.
I hope I managed to convey the importance of optimizing images on WordPress sites, and the most common ways of doing so.
