Images make up an average of 70% of web pages. Reducing the size of the image can have a huge impact on page load speed and user experience. In this article, we will learn why and how to reduce the size of the photo.\
Images are an important part of page content that can convey a message to the user as quickly as possible. But as much as they are effective in conveying content to the audience, they can be detrimental to our website optimization process! Because they occupy an important part of the page volume.
Using proprietary images is effective in improving the user experience and increasing the quality of the content, but if they increase the page size too much, the loading speed and access time to the content will be reduced and in some cases it will cause the user to leave the site quickly and increase the bounce rate. .
In previous SEO teaching articles, we have addressed two important issues, namely the standards of alternative text writing for images and Google’s understanding of image content, which we suggest you read. In this article, we will first talk about the impact of images on user experience and SEO, and then we will introduce you to the best ways to reduce image size while maintaining quality.
If you do not have enough time to read the article, we suggest that you watch the video below in 12 minutes (58 MB) to get acquainted with the methods of reducing the size of the photo online and in software.
What effect does reducing the size of the image have on the SEO site?
SEO as one of the most important digital marketing channels and success in it requires knowledge and compliance with many standards. Optimizing images in terms of volume, content, and alternative text increases our chances of appearing in Google Image Search, but these same techniques directly affect the user experience and internal SEO of the page. Here are some important reasons to reduce the size of the photo and its impact on the SEO site.
1- Preventing users from leaving quickly
Slow page loading and content display is one of the most important reasons for users to quickly leave the page and close the browser. Many users when searching on Google will open several results in new tabs and will read whichever is available faster. If they get their answer on this page, they may close other results and not enter those pages at all. In other words, one of these pages received a real visit and the others had nothing but Bounce Rate.
User behavior on the search results page is continuously analyzed by Google and affects the ranking of sites in the long run. For more information on this, we suggest you read the article Introducing the Rank Brain Algorithm.
What is the role of images in this ?! The answer is simple; By reducing the size of a page’s photos, we actually reduce the page size, and this directly affects its upload speed.
2- Saving host space and bandwidth
Site management has many costs, one of which is related to the purchase of hosting space and bandwidth consumption. The higher the site traffic and page volume, the higher the cost of hosting. Image optimization will play an effective role in reducing the bandwidth consumed by hosts and users.
The image above shows the home page of a website that is 4.3 MB in size! Imagine that 1000 people visit this page a day, so we will need 120 GB of monthly bandwidth to host this page from the site. Interestingly, the image of the motorcycle alone is close to 3 MB and is reduced to 150 KB with optimization (without quality reduction).
Assuming that page speed does not affect SEO (even wrongly!), It still makes sense to reduce the size of the images because it directly reduces the cost of maintaining the site. For example, reducing the size of this image per year will save us nearly 40 thousand tomans, assuming 1000 visitors!
3- Compatibility with the new Google algorithm and the concept of Core Web Vitals
Google has officially announced that from 2021, it will include user experience-related factors in search engine ranking algorithms. These factors, an important part of which are the concepts of Core Web Vitals, focus not only on page loading speed but also on deeper issues, including the time of display of the Largest Contentful Paint.
In many web pages (for example, an article or product) the most important element that is displayed at first glance is the image, so receiving and displaying images to the user as soon as possible will play an important role in our score in the user experience.
How to reduce the size of the photo? No quality loss!
So far, we have talked about the importance of images in SEO and the effect of reducing the size of the image on the speed of the site. In the following, we are going to review the best online tools and software to reduce the size of images.
Photoshop; The best photo size reduction software
There are many softwares that can be used to reduce the size of the image. Some of these apps are even made for Android and iPhone phones and allow you to reduce the image size on the phone. Reducing the size of the image is no longer a difficult task that we want to ignore. In this section, we will look at some offline ways to reduce the size of the photo.
1- Save image for display on the web (Save for web)
Photoshop is a popular and powerful software for graphic designers, the capabilities of this software are very wide. As Photoshop is known and available to most webmasters, one of the most popular ways to reduce image size without compromising quality is to use the Save For Web feature. Open the desired image in this software and after making changes and corrections, go to File> Export> Save for Web. You can also use the control keys ctrl + shift + Alt + S.
After selecting this option, a page will appear in the box to the right of which you can reduce the size of the image according to the quality we choose. Usually the loss of photo quality in this method will be very small.
2- Select the appropriate format
The type of format selected for the image will affect its size. Depending on the type of image and the location used, you should choose the most appropriate format. For images that are natural and real (for example, a landscape, car, human, etc.) and have a great variety of colors, the best choice is the JPG format with a quality of 55 to 65. If the photo you want is designed with graphic software and the number and variety of colors in it is low, we suggest you use the PNG-8 option.
In jpeg format, the dimensions of the image directly affect its size, and in PNG format, the color variation. As a result, if you save an image with a limited number of colors and large size as PNG, you will notice a significant difference in its final size.
New formats for publishing images on the Internet have recently been introduced, among which WebP is more common. This new format, which is also suggested by Google, is about 20% smaller in volume compared to JPG and PNG and does not make a difference in terms of quality in the eyes of the audience.
3- Select the standard size for the images
One of the most common mistakes in managing site images is loading them larger than the display space. In JPEG images, the dimensions of the image will have a direct effect on its size. Before uploading the image on our site, we must consider the display space and select the dimensions of the image accordingly.
The image below is how the images are displayed on the website of SEO teaching Academy. The largest space available for displaying images is 820 pixels wide. No matter how big our image is, it will not make any difference to the user. An image with a width of 1600 pixels is practically 4 times larger than an image of 800 pixels (width * height).
To do this, you can also use Photoshop or crop tools in a variety of image editing software. To change the size of the length and width of an image in Photoshop, just go to image> image size and enter the desired length and width in the width and height box.
In content management systems such as WordPress, several versions are produced with different sizes of an image that are called based on the user’s screen size. In other words, the image displayed to the user on the mobile phone is much smaller in size and volume than the desktop version. This technique is called Responsive Images.
Standards and techniques for optimizing images and improving the speed of the site are presented in a complete and practical way in the SEO technical training workshop.
Reduce photo size with online tools
Working with Photoshop or computer software is not always easy, sometimes our only goal is to reduce the size of the image and optimize the volume, and we do not need to edit the image or resize it. You can use online tools to make your work process faster. In the following, we will introduce you to the most practical online tools for reducing the size of images. Keep in mind that we uploaded a similar image to all of these tools to properly compare their performance.
imagecompressor.com; Simple and fast
Working with this website is very simple. You can import up to 20 images at a time and download the optimized version in a zipped folder.
Of course, what makes this site so popular is the ability to compare the optimized image with the optimized image. Because image degradation is so unpleasant, some websites and image size reduction programs allow you to see the changes in a comparative way. On the imagecompressor website, after you upload the image, you will see the optimized image next to the original image a few moments later to make sure that the quality does not decrease.
This tool allows you to change the quality factor and see its effect on image quality in an instant. Based on the variety of colors, the place of use and the content of the image, it is better to choose between 85 and 95 (default on 90). In the image above you can see the comparison of the optimized version (right) with the original version. Interestingly, with an 84% reduction in image size (520 KB), our eyes are unable to detect differences in their quality.
tinypng.com; Use the API
The second tool is the tinypng site, which, like the previous tool, allows you to send 20 images at a time and receive them as zippers or send them to Dropbox.
The image compression rate in this tool is 89%, which is more than the imagecomressor. The main difference in this site is that you can not compare before and after optimization and determine the amount of compression, but this site also supports an API service (not free) that allows you to automatically send images to this tool And get the optimized version (even in the desired dimensions). For example, a site such as a wall where images are uploaded by users can use this tool to optimize all photos before publishing and ensure the quality and speed of your site.
compressnow.com; Reduce the size of gif images
The most important difference between this tool and the previous two options is that it also supports Gif format images. In fact, if your image or animation is generated in gif format, it is better to use this tool to reduce the volume.
Unlike tinypng site, which does not accept images with a size of more than 5 MB, in this site, the size limit has been increased to 9 MB and the possibility of sending 10 images at the same time has been considered.
imageresizer.com; Resize the image
The positive feature of this site is the ability to upload photos directly from the Internet by entering its address. In addition to reducing the size of the image, it also allows you to change the dimensions, rotate and crop the image into a simple and practical tool.
This tool is the best option if you need to make changes to the image and trim its corners and you do not have access to Photoshop.
A variety of sites and tools are designed to reduce the size of images. If you use a special tool for this, please introduce it to us and other readers of this article in the articles section.
All SEO standards for images and its impact on internal SEO of the article are fully taught in the content production training workshop.