Our previous research and case studies on the link between images and organic ranking led us to this subject of images and visual optimization.
I know that Google can read text from images, which could have a huge implication in the rankings and the world of Google Image Search in the future.
It is quite possible that, in the very near future, search engines will probably modify the algorithms for classifying images. This change will have a huge impact on search and the world of SEO. Especially since Google uses object detection in images.
Therefore, it’s best to be prepared and follow our next image optimization tips to help Google “read” and rank your images in the near future.
1. Choose the right image format
There are several types of files for visual content, each for different purposes. If you choose the right file, this will prove to be a huge improvement.
For the web, you can choose:
- JPEG format when you have images with a lot of colors, color gradation, and shading.
- PNG format when you have a logo, an image with a lot of solid colors or you need to use transparency.
- GIF format when you have an animation or in the same situation explained or PNG format.
- WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.
2. Optimize the size of the image file
Reducing image quality can speed up the loading speed of a website. Fast websites mean a better user experience, which leads to increased conversions.
According to a study by Kissmetrics, a one-second delay in responding to a page can lead to a 7% reduction in conversions.
An even more serious problem concerns mobile users. Images represent 68% of the total page weight and tend to be too large, and often unnecessary, which slows down page loading and prevents the user from accessing information.
The size of an image is given by its quality or the number of pixels. If an image contains more pixels, the size, dimensions, and quality will be higher. This is why it is recommended to reduce the quality by 15 to 20% for the JPEG and PNG formats.
Many dedicated software have this option.
In Adobe Photoshop, for example, JPEG and PNG provide the ability to optimize images for the web. The steps are fairly simple: Export »Save to web» Quality 85% (Use the photo viewer on the left to determine if you can further compress the photo and its appearance.) »Click Save.
The higher the percentage, the better the quality of the photo. For PNG images, you can choose from other optimizations, such as 8-bit PNG and 24-bit PNG. It would be recommended to save it in an 8-bit png format in order to obtain a slightly sized image.
Affinity Photo is another image compression option, which can be similar to Photoshop but cheaper.
There is other, easier-to-use software to reduce image quality, such as Gimp, and other small beginner’s software, such as GIFsicle, JPEGtran, JPEG Mini, OptiPNG, pngquant, FileOptimizer, ImageOptim.
If you want to choose the easiest way and not download any software, you can use online editing tools for image compression. TinyPNG and Trimage are the two most used.
There is also the imgIX PageWeight , where you can add your website and assess the “amount” of visual content. For this, there are three main measures calculated for each site, represented by colored bars (light, recommended and heavy) as you can see in the screenshot below. In our example, we have a medium weight of website and image content and recommendations for better image optimization.
Below is a sample report and the actions to take:
- How images affect your page weight;
- Your underperforming image Decomposed image of your page.
For each result, we recommend certain actions to improve the time of your loading page and optimize the images in order to reduce the weight.
3- Save images at lower resolutions
Another image optimization solution is to save images at a lower resolution. Resolutions refer to the number of pixels in an image. The retouching software identifies the resolution by the width and height of an image and by the number of pixels in that image.
For example, if your image is 500 pixels wide and 281 pixels high (500 × 281), it will have 140,500 pixels (we multiply the number of pixels in width and height), which corresponds to 141 KP .
For a larger image, the resolution will be greater. For example, if you have a high-quality image in 1920 × 1080, the resolution will be 2.07 megapixels.
In graphic editing software, we have the ability to choose the dimensions and resolution of your image, which can be a bit misleading, since we cannot have images of the same size with different resolutions.
An image with 500 × 281 at 72 dpi, 300 dpi, and 1000 dpi will look exactly the same and the number of pixels will be 141 KP.
Http Archive has done some interesting analysis of the distribution of websites by content type. The results were incredible. You can see the data for this report below. You can easily see that the images have the highest weight on a website.
The sizes shown in the graph are the transfer sizes. Therefore, compressed responses are considered to be smaller than the original uncompressed content.
Google’s PageSpeed Insights can show you images that need to be compressed and the space that you save afterward. In the example shown below, you can see the files that need to be compressed. If you compress them, you will save 34KB.
4- Resize images to scale
When you upload images to your website and want to optimize them, it is recommended that you resize them to scale and not let CSS resize them .
This method can only be applied if you do not have sensitive pages, otherwise it is not relevant. Another thing to note is the fact that you should not just resize the images without taking into account other optimization techniques. It works best with the following recommendation, reducing file size with plugins.
As a WordPress user, you have a lot of advantages. For example, in this case, your images will be resized by default when you add them to the media library. You can easily access this option if you go to Settings »Media. The maximum width of the image should be close to the width of your site. This way, CSS will not resize your images to fit them inside. Other SEO recommendations on WordPress
Here are other recommendations worth mentioning:
- Use CSS3 effects as much as possible;
- Save your images in the dimension of your choice instead of letting HTML or CSS resize them.
- Crop the white space from the images and recreate them using CSS to provide the fill;
- Reduce the bit depth to a smaller color palette.
- Choose web fonts and avoid placing text in images. In this way you will not encounter any resizing problem and you will save space;
- Reduce your images with Gzip compression.
5- Reduce the file size using plugins
If you use WordPress, be aware that there are also automatic methods to compress your images, using plugins. The plugins can work well as a second step for image compression . Never use it alone.
For example, adding a 2 MB image to the library can cause your web hosts to consume disk space very quickly. You have to select the plugins that suit you best and get to work.
For each plugin, the steps are as follows:
Connect to your WordPress »Plugins» Add a new one »Search for the plugin» Install now and wait a few seconds »Activate.
Then, if you want, you can go to the specific plug-in and browse the settings to make sure everything fits your needs.
WP Smush, CW Image Optimizer, Insanity, Hammy, SEO Optimized Images or PB Responsive Images are just a few examples of plug-ins that will automatically and losslessly compress your images.
All plugins can be used to optimize images previously downloaded or added after installation.
As a suggestion, you should keep the size of your image file below 120 kb for large images (1920px and more) and even lighter for small images. As a general rule, it is best to keep most images at around 50 kb .
6- Delete all irrelevant or unnecessary metadata
Metadata is the information stored in the image file . Typically, they are generated automatically by the device that captured the image.
Additional metadata, such as EXIF data (a record of all camera settings) can be added manually using dedicated software or directly on digital cameras.
All kinds of information – such as exposure time, aperture settings, type of camera, shooting date, author and other information – can be incorporated into an image.
This information is crucial for particular websites (photography, for example), while for other websites it may be completely irrelevant.
Disinfecting your image can be extremely beneficial in improving website loading time. You can easily access this data by going to Image Properties and then selecting Details.
Removing Metadata From Photos in Windows
There are plenty of third-party apps capable of removing metadata for you but the direct method is most efficient. It requires a few steps but it’s painless. Here is the entire process laid out as easy as possible to follow:
- Locate the photo you wish to alter
- Right-click it
- From the popup window, select ‘Properties’
- A window will open. Click the ‘Details’ tab at the top of the window
- From there, you’ll see a list containing attributes such as name, date, size and more. Click under the ‘Value’ portion of the elements
- For the editable data, it will allow you to type in or delete whatever you want and replace the old information
- Click ‘OK’
Removing Metadata From Photos in Mac
Like Windows, a Mac lets users remove photo metadata in a pretty straightforward fashion. Once again, here’s an easy list to guide you:
- Open the photo using ‘Preview’
- Go to ‘Tools’ in your menu
- Select ‘Show Inspector’
- Select the (i) tab
- Click the ‘Exif’ tab and remove the data
Choose the elements to delete and keep by easily accessing the Value cell of each property and deleting the content. If the file is in read-only mode, you cannot change this information.
But there are other ways to verify this using the Google Chrome extension, EXIF viewer, which will be accessible by a small camera from your browser.
With just one click on the icon, you will get all the Exif data. Photoshop or Adobe Lightroom are other examples that could help you get rid of unnecessary EXIF data. Go to File »File information.
Be sure to keep the data important to you and delete unnecessary image data. In this way, you can optimize your images and help search engines better understand your visual content.
7- Name your images and add alternative descriptions to make your SEO successful
Making your images easy to read by Google and making them user-friendly will enhance the SEO success of your website. You can give a boost to your SEO strategy by giving your images relevant names and keyword-rich text descriptions, without taking advantage of them or using keyword stuffing.
If necessary, use the description of your image or caption. You can add these items by following the previous step, where you can save the metadata related to the description, author and name or file.
If you do not have this information in the file, add it directly when you upload the image to your site. WordPress makes it easy to change the data the user wants to access Google.
Search engines crawl both your website text and the text embedded in your images. Make sure you don’t use generic names, such as DSCN093298.png, Image01.jpg or animation-version1.gif, etc., but rather descriptive file names. Title tags and alternative texts are essential when a browser cannot render your website correctly.
Optimization of your images, in summary
When someone is browsing the Internet, the browser must download each file from your website to render it. On a large scale, this means images, which can store a lot of irrelevant data and pixels.
We have found many simple and effective ways to optimize your web images. To know:
- use image optimization tools for weight,
- delete irrelevant metadata,
- resize the image to scale,
- use GIF and PNG formats as they are lossless. The desired format is PNG because you can get the best compression ratio with better visual quality.
- enter the Alt tags, titles, description, author, etc.
- be sure to test your visual content using plug-ins, tools, and software to make the process easier.