What you need to know about optimizing images on a website: useful recommendations

If you analyze all the content that users receive daily, then more than 70% of it will be graphics. This is relevant for any online resources, be it websites, message boards, social networks, etc. If a person goes to a particular portal and sees dry text information in front of him, then with a high degree of probability he will simply leave the pages, because such material is often difficult to perceive. The site loses a potential client, and along with this, its resources in the search results decrease, since the loss of audience negatively affects the site statistics along with this and monetization. Among other things, the presence of graphic content on the site allows you to attract traffic, including through image search in Google, Yandex and other search engines.

All this allows us to confidently say that the ability to organize competent work with images is what will allow you to attract additional traffic to your pages, hold the attention of the audience. As a result, this will have a positive effect on the position of the resource in the search results, which will become an additional tool for attracting the attention of even more people. This means that you need to optimize the images.

What exactly are we talking about and we will consider in more detail in today's review. In particular, we will note the question of why it is necessary to perform these works, we will pay attention to the requirements for graphic content in general. We will tell you which graphic elements need to be optimized. We will provide a number of services and additional recommendations that will help you perform these works with minimal time and effort. We will tell you where to get pictures to place on your site. The information provided will allow you to get a good understanding of such a question as optimizing images for a site and perform the upcoming work as correctly as possible.

Why do images for a site need to be optimized?

Images are one of the key elements on any site. This is what helps users more easily perceive the information presented on the site, delve into the specifics of the business. And they also have a direct impact on the ranking of sites in the search engine. Surely you have already noticed that images are displayed on the main page of search results for Google Images.

Of course, most of the attention of SEO specialists is aimed at optimizing text content and adjusting it to the requirements of search engines. But it is still important not to neglect images. A set of works will have to be carried out aimed at improving graphic material and making it ideal for subsequent placement on the site. Thanks to the high-quality implementation of such works, you will be able to:

• significantly increase the site loading speed, which will improve user interaction with it;
• guarantee the site higher positions in search results, as well as provide an additional influx of traffic through Google Images;
• significantly save space on the server, which will also help minimize hosting costs.

But to implement this idea, a fairly impressive amount of work will have to be done. But this will not be a problem if you use our recommendations.

Basic requirements for images for websites

Before moving directly to image optimization, it is important to understand what result you should get at the output. And here it is necessary to have a good understanding of the main formats of such files and which of them to use in a particular case. And it is also important to understand what requirements will be imposed on the quality, size and weight of images.

1. Image format. There are several options: JPEG, PNG, GIF, SVG, WebP. JPEG are files that will go with minimal quality loss, which makes this format optimal when working with detailed images, photographs, including those with a rich color palette. PNG maintains high quality, supports transparency, and is suitable for working with large files. An optimal solution for working with logos and graphics. In the GIF format, the quality will deteriorate, the color palette is limited, but there is support for animation. These features make it optimal for short animations, icons, buttons. SVG is a vector file that can be scaled while maintaining high quality. It is also used to produce icons, logos, and drawings supplemented with text. The WebP format is a modern solution developed by Google specifically for fast page loading. Provides high compression rates. Today it is actively used for photographs, pictures, including those intended for mobile devices.
2. Image quality. It should be such that users can see the smallest details. Blur, lack of clarity - this is something that will not please not only users, but also search engines. If such content is on your site, then bots can completely bypass it in the ranking process. In addition, do not forget that pictures are a display and addition to the information presented on the site, and not just a photo that you liked.
3. Size and weight of pictures. These are the parameters that have a direct impact on the speed of loading pages. Large images - this is what can significantly slow down the site, which will ultimately worsen the quality of work for users and, accordingly, the level of their satisfaction. In addition, large pictures will take up a lot of space on the server, which may ultimately provoke the need to increase the amount of disk space. And these are additional material costs.

That is, image optimization is what will allow you to perfect all these 3 key parameters and get a solution that would meet user requests for quality, loading speed, and the requirements of the system itself.

How to properly optimize images

Getting a high-quality image in the correct format that would load as quickly as possible and take up little free space on the disk is only a small part of everything that needs to be implemented at the stage of image optimization. Along with this, there are also many other points that will ultimately have a significant impact on SEO-indicators of the site as a whole. If you implement everything correctly, you will be able to provide your resource with a decent position in search engine results.

In this case, we are talking about such things as:

1. Picture name (URL of the corresponding file).
2. Alt attribute.
3. Title attribute.
4. Lazy Loading.
5. Content Delivery Network.
6. Uniqueness.

We will consider all these points in more detail, which will allow you to perform the upcoming work as correctly as possible.

Picture name

Here it is important to understand that the name of the file and the image itself is one of the key elements of the URL. This means that it should be short enough, but at the same time contain a maximum of descriptive information about what is depicted in the picture. That is, it will be enough to read the title itself to understand what exactly is shown in the photo. For this, it is recommended to use words related to the subject itself or directly to the content.

When writing the image title, try to avoid special characters, Latin letters and anything that can cause problems with perception for the audience. Agree that the title “tort-na-zakaz.jpeg” will clarify the essence of what is depicted in the image much better than the title “photo_2565.jpeg”. We would like to draw your attention to the fact that this point should be taken into account if you are launching a new website. If you already have an image on the website, if it is ranked by Google Images, then it is better not to change the title, but to leave it as it is even if you change the image itself. The main thing is that its essence remains the same.

Alt attribute

Alt attribute is an alternative description of the image and the purpose for which you are placing it on your resource. It plays a key role directly for search engines, helping them to understand what is depicted in the picture, because bots, despite all their technological sophistication, have not yet learned to visually interpret graphic content. That is, if you correctly write this attribute, you will significantly simplify the process of ranking images, and at the same time increase their chance of being displayed in search results.

To correctly write Alt, you need to:

• Come up with a text that would reflect the essence of the picture in detail. Try to make it so that it is not just a list of keywords.
• Limit the length of the attribute to a maximum of 5-6 words. But remember that the main emphasis here is on information content.
• Add one or two high-frequency keywords to Alt. This is what will allow you to describe the picture well, but at the same time prevent spam.
• Use spaces between words. This way you can be sure that what is written will be easily understood.

These are fairly simple rules that will help you improve the accessibility of your resource for visitors, as well as increase the chances of good indexing and taking a decent position in search engine results. If you have several photos on your page, then in this case you should also include the photo number directly in the Alt attribute, such as “Chocolate cake with salted caramel - photo 1 - TortNaZakaz.com.

Title attribute

The Title attribute is used in HTML markup to create tooltips for images and other page elements, providing visitors with additional information. One that will allow them to better understand the content of the image. That is, you, as a user, will only need to hover your mouse over the image to display the corresponding tooltip with a text description.

To correctly write the Title for your image, use the following recommendations:

• The maximum allowable phrase length is 250 characters. You need to fit as much useful information about the product into this short text.
• Be sure to add 1 or 2 keywords to this attribute. This is necessary both to improve ranking indicators and to increase information content.
• Your text should explain the details of the image, in particular those that cannot always be understood at first glance.

As in the case of the previous attribute, you will also need to add photo numbering here if you plan to use several of them on one page. Accordingly, each of them should have its own description.

Lazy Loading or deferred loading

This technology involves loading images on the page as the user scrolls down and reaches the corresponding thematic block. The most significant advantages of deferred loading include:

• Optimization of site loading speed. It turns out that when the page is launched, the simultaneous loading of all images is excluded, which results in significant time savings.
• Faster and more convenient interaction of people with the page. This is what has a positive impact on the user experience, increases satisfaction with what they see. People will not have to wait long until the material they need is displayed on the site.
• A noticeable reduction in the amount of data that will be sent over the network. Thanks to this, significant savings in bandwidth are ensured.

A technique such as deferred loading can be used on different sites. It is suitable for almost all pages. But the greatest efficiency will still be observed where there are many images.

Content Delivery Network or content delivery network

Content Delivery Network is a network of servers located in different countries of the world. It is used to deliver information from your site to users. Thanks to this, people can download the files they need directly from the server that is geographically closest to their location. This is necessary in order to significantly speed up the process of loading information. Let's assume that you are located in the United States. If you decide to download a site for yourself from a French server, it will take much more time than from an American one. Moreover, here the download will be carried out not only from your country, but also from the state where you are located.

The use of this technology in practice ensures:

• minimization of the consumption of resources of the main server of your site, which can ultimately reduce the cost of hosting;
• simplicity and convenience of processing user requests during periods of increased activity, traffic surges while maintaining high speed of image delivery;
• sufficiently high indicators of protection against DDoS attacks and other threats that can be encountered in reality;
• obtaining detailed analytics to control the performance of images, the involvement of the user audience.

That is, in this case, optimization involves the implementation of measures that will ensure that your images get to these servers.

Uniqueness of graphic content

Uniqueness — This is a parameter that is typical for absolutely all types of content. Images are no exception. Ideally, you should always strive to use completely unique images. Today, stock images are often used in practice. But do you think users will like the fact that they will see the same image on all thematic sites they visit? And will they be able to trust the pages where such content will be posted?

But even if you place your own unique photos or images on your site, there is no guarantee that competitors will not take them for themselves. The easiest way to prevent this is to place watermarks on the images. Alternatively, this can be the name of your site, the owner's last name, the date of the first publication. Such a solution will allow you to subsequently avoid lawsuits, which, among other things, can have a negative impact on the reputation of the site, can reduce its position in the search results. In addition, you should understand that in a number of countries there is a separate procedure for registering copyright on photographs.

If you decide to use stock photos, carefully weigh all the pros and cons. All that can be singled out from the advantages is the efficiency and ease of selecting images. But here is a more significant list of disadvantages:

• for the most part, you will have to pay the appropriate fee for use and license;
• very often, when posting stock photos, you are required to additionally indicate the platform from which the content was taken: not every site will find such an action suitable;
• you always risk violating copyright, including without even knowing it;
• no one can guarantee the uniqueness and originality of your graphic content: along with you, the same photo can be used by many other people, including your direct competitors.

This all means that sites that want to establish themselves on the market as reliable and responsible should look for other solutions, rather than resorting to stock photos. Only by self-production will you be able to get pictures that will become an effective addition to your brand.

Getting to know the services for optimism from pictures

Today, the process of optimizing pictures will be simpler and faster thanks to the use of specialized services. Now we will consider in more detail the most popular solution so that you can navigate the possible options and choose the most interesting one for yourself.

1. JPEG Optimizer. If you are faced with the task of compressing the original image, then you can safely use this option. We would like to draw your attention to the fact that it works exclusively with images saved in JPEG format. Here you can compress the image in any range from 0 to 99%. At the same time, the maximum image size by default is 4 MB. That is, you can set your own option without exceeding this figure. It is also possible to change the image size.
2. ImageRecycle. Quite an interesting tool with wide functionality. In particular, with its help you can optimize images of any format (PNG, JPEG, GIF, PDF). At the same time, the program will provide you with a detailed report on your images posted on the site, indicating those that require improvements. You just need to specify the URL of the site in the appropriate line. The permissible compression sizes for JPEG files are 48.97%, and for PNG - 78.57%. The service is paid to use. So, for 1 GB of processed information you will need to pay $10, for 3 GB - $20, and for 10 GB - $50. But there is a 15-day trial period. During this period, you can use the service absolutely free. The only thing is that there is a 100 MB limit.
3. Tiny PNG. Works with compression of images in JPEG and PNG formats, allows you to simultaneously upload 20 images up to 100 times a month. The main thing is that the size of each file does not exceed 5 MB. For those who work with WordPress, there is a free plugin. This tool is completely free to use, which makes it extremely popular among users. If you often edit images for subsequent publication on your own website, then there is a unique Adobe Photoshop extension. With its help, files will be compressed directly during export. At the same time, the permissible compression rates for JPEG files will be 32%, and for PNG - 32%. 75%.
4. JPEG.io. This is a tool that can get a JPEG image from an image of any format. In the work, you will need to simply drag and drop or upload files to the service website. Initially, the program will transform your image into JPEG format, and then compress it and send it back. It is convenient that this service allows you to upload image files directly from Google Drive or Dropbox, as well as send already prepared JPEG images in a ZIP archive.
5. Google PageSpeed Insights. This is a tool developed by Google specifically for technical optimization of website pages. Here you can get practical recommendations aimed at improving the speed of the site and performing its overall optimization. During the analysis, the resource is checked for various criteria, ranging from the size of the image to the degree of code compression that is implemented on it. In the final report, you will receive detailed information, which will allow you to make appropriate adjustments and speed up the resource. But to compress the image, you will still need to use third-party services. The tool is completely free to use.
6. Kraken.io. An image optimizer based on one of the best modern algorithms. It is capable of transforming images so well that the site will work noticeably faster. In practice, this product is most often used in the form of a plugin that can intercept images directly from the media file uploader before they are saved to the server and automatically optimize them. You can also transform images stored in the media library. It is available in both a free and a paid version. In the first case, there will be file size restrictions - up to 32 MB. For the paid version, you will need to pay from $4.16 to $32.50 per month, depending on the amount of data you have to work with. Lossless allows you to compress JPEG files by 11.32% and PNG files by 44.06%. If quality loss is acceptable, then the compression percentage will be 70.05 and 75.03 respectively.
7. Compressor.io. With this service, you can compress images by almost 90%. The program works with images in JPEG and PNG formats, while preserving the original pixels, as well as with other file types. The main limitation is the document size. It should not exceed 10 MB.
8. GTmetrix. This is a comprehensive tool that can also be used to check website performance, among other things. Here you will receive practical recommendations on how to eliminate the identified problems. When making settings, you can choose the most suitable location, type of device or browser used. Simulation of different connection protocols is also allowed. This is all that will allow you to see how certain parameters affect the page loading speed. Similarly, they show data on the impact of advertising. It can compress images, change their sizes, while maintaining fast and easy loading. There is a free version here and its functionality will be quite sufficient for performing a fairly wide range of work. Those who are looking for the widest possible functionality will need to pay from $ 10 to $ 40 per month.

Which of these tools should you choose for your work is an individual matter. Pay attention to functionality and ease of use.

Additional recommendations for image optimization

Everything we talked about above indicates that graphic content must be optimized for both search engines and the requests of people who will subsequently interact with it. This is what will make working with your service simpler, more convenient, more efficient, will significantly reduce the page loading speed and provide a number of other significant advantages. But if you structure everything, you can highlight a number of key recommendations, using which you can ensure the maximum loading speed of your images and ease of search:

• Choose the graphic file format that will be optimal in a particular case. Above, we have already given possible options, indicating the main features of each of them. So, JPEG or JPG should be used when working with bright, colorful pictures, while PNG is ideal for simpler graphic content. GIF — option for animated material, SVG - for vector images, WebP - for images intended for loading on mobile devices. You should understand that the right choice of format is the key to high-quality display of your collections.
• Always compress images. This is one of the mandatory requirements for increasing the page loading speed. Use the services that we listed above to do this work and make your images take up a minimum of space. Here it is important to consider the format you are working with and how important it is for you to preserve the original quality. If you use maximum compression, then in principle you can transform a 700 KB JPEG file into 10 KB, but the quality will suffer significantly. It is optimal not to reduce the size of such a file to less than 150-200 KB: these are the indicators that will allow you to maintain a decent external display.
• Bet on unique images. We have already said that using too common stock photos can not only disappoint visitors to your site, but also negatively affect the position of the resource in search results. You can simply use Google Image Search to check if there are similar photos on the network.
• Come up with the most correct names for your images. Search bots cannot evaluate the visual component. They are guided directly by the description of the image. Its name and other attributes should describe what is depicted with maximum accuracy.
• Optimize your images for mobile devices. Most modern users interact with Internet resources directly through smartphones and tablets. This means that your images should be correctly displayed not only on large displays, but also on the screens of personal gadgets. And here it is not only about the size itself, but also about the positioning of the images. For smartphones, a more optimal option would be a vertical arrangement or a 1x1 format.

As you can see, the work ahead is not too complex and voluminous, but it still needs to be implemented as correctly as possible in order to get ideal images for both search engines and people. The last question that needs to be answered is: where can I get the source images for optimization?

Selecting source images

We have already said that a unique picture is a way to stand out from the competition, attract the attention of users, and indicate the credibility of your portal. But finding such an image is quite a difficult task. Now we will offer several options worthy of attention. This can be either buying stock photos on specialized services or generating images using neural networks. In the first case, of course, no one will guarantee you 100% uniqueness of the photo, but still, the likelihood that your closest competitors will find a similar solution is very, very low, due to the huge variety of offers. But using artificial intelligence to create images is This is an advanced modern solution that allows you to get exclusive pictures.

So, let's get acquainted with the most worthy services for obtaining images:

1. Unsplash. Today, this is one of the largest stock photo services. It presents over 5 million pictures on various topics, which will allow you to choose truly worthy solutions for work. You just need to enter a key phrase in the search bar, study all the available options and choose the best one for yourself.
2. Pexels. Both paid and free photos and videos are presented here. The service itself is quite simple and easy to use. You can choose pictures that suit you not only by topic, but also by color, popular collections. There are also additional plugins that allow you to edit photos directly in Adobe Photoshop, Figma, Adobe XD, Sketch.
3. Pixabay. Today, the site presents users with over 4 million illustrations, photos, videos. You can download them for yourself absolutely free. It is convenient that along with the search bar, there are also additional filters that expand the possibilities for choosing the most suitable solution for yourself. In particular, you can select photos by photographer, size, color, orientation. The "Editor's Choice" section deserves special attention, where materials are presented that, in the opinion of the service team, will be the best in their niche.
4. Burst. This is also a service with free photos, developed on the basis of the Shopify platform. The choice of images here is too wide, but they are all tailored for business: money, e-commerce, trade, goods. A total of 28 categories are presented.
5. DeepAI. An easy-to-use modern neural network that will generate images based on a text description. You can enter both the idea itself and describe the scene, characters in detail, and set the desired artistic style. Every day, the images from this neural network become more intelligent and high-quality, as it continues to learn in parallel with the increase in the number of user requests.
6. DreamStudio AI. Another platform based on artificial intelligence, allowing you to get unique images by setting fairly short text recommendations. Here you can choose different styles, create both photos and animations, upload your own images for subsequent transformation. If you use the advanced settings, you can adjust the image size and the number of steps during generation. To start working, you must register on the site. The received content can be downloaded to your device, edited, viewed.

Which option should you choose for yourself? Study all these solutions carefully, and then decide which service will be optimal for you.

Let's summarize

Optimizing images for visitors and search engines — This is a fairly complex event that includes the implementation of certain works. But this must be done without fail, otherwise you will not be able to bring your site to the top of search results, make it such that users are satisfied with the interaction. During the upcoming work, it will be necessary to choose the right format, ensure the preservation of the initially high quality, adjust the size and weight of the image. The correct name is necessarily written, the Alt and Title attributes are filled in. You can also use deferred loading. You should not forget about the uniqueness of graphic content. These recommendations, which we have provided in the review, will help you cope with these works efficiently, easily and quickly.

If you want to provide yourself with the widest possible functionality and convenience when working with image optimization, avoid various restrictions from the system, get access to various services and sites from any country despite the presence of regional restrictions, use mobile proxies from the MobileProxy.Space service. At the link https://mobileproxy.space/en/user.html?buyproxy you can study in maximum detail what this product is, what functionality it has, get acquainted with current tariffs, available geolocations. It is also possible to test mobile proxies for free and see how simple, convenient, and accessible everything is here.

Mobile proxies will also come in handy when performing many other jobs, as they provide effective bypass of regional restrictions, maintain high security and anonymity when interacting with the network. They will be useful for both those who work on the Internet and an ordinary user. You may also be interested in such a question as «Affiliate program».

Share this article: