High quality<\/strong> images are designed for user comfort. It is good when the pictures are large and clear, if we are talking about photos \u2013 with high resolution. However, they should not be “heavy”, as they will not load well, and the page will want to leave \u2013 this already affects the rankings. It is worth using special tools that allow you to compress images without loss of quality, and create a suitable size images. We will talk about them in the section on editing.<\/p>\n\n\n\n To optimize both the mobile and desktop versions of the site is very important the fast loading<\/strong> of pictures. File sizes of different formats are very different. Google indexes JPEG, PNG, BMP, GIF, WebP and SVG image types.<\/p>\n\n\n\n They apply depending on what you’re illustrating the content with:<\/p>\n\n\n\n In any case, all of these formats can be converted from one to another.<\/p>\n\n\n\n If you resize images to fit the scale of the page, downloading them at their highest resolution, your browser won’t have to adjust the size of the gadget and slow it down. Fig. 1 \u2013 Library files in the admin panel of the PPCSEO site<\/p>\n\n\n\n Otherwise, using image search, users may go to the address of the resource where the picture is located and not the content. It helps to check Google’s search through images or the Tineye<\/a> service.<\/p>\n\n\n\n Fig. 2 \u2013 Checking the preview of the article Instalending: stylishly about your brand<\/a><\/p>\n\n\n\n Content should not only be high-quality and beautiful, but also unique. This rule applies, among other things, to images. Search engines are looking for a variety of material in the output, so do not be lazy to change something in the picture: the background, the number of characters depicted.<\/p>\n\n\n\n The last point can be called the informative<\/strong> image. It is important to match the picture description \u2013 it should make practical sense and confirm the clarity of what is described in the content.<\/p>\n\n\n\n Fig. 3 \u2013 Example of a slider with roses blog about ornamental plants Florium<\/a> <\/p>\n\n\n\n If the text contains abstract or inaccurate information, then the picture or photo makes no sense. Users will often go to pages with these images. If it is a product, it is depicted on a neutral background in close-up, its differences from other positions are visible.<\/p>\n\n\n\n Fig. 4 \u2013 Example of a good image of a product in Koni.ua<\/a> <\/p>\n\n\n\n Finding good pictures and pictures is not difficult. You can do it:<\/p>\n\n\n\n Fig. 5 \u2013 Google image filters by licenses<\/p>\n\n\n\n Fig. 6 \u2013 Search of aphelander plant by images<\/p>\n\n\n\n Fig. 7 \u2013 Images of users on R\u0435ddit<\/a> <\/p>\n\n\n\n Fig. 8 \u2013 Intuitive interface of Freepik<\/a> <\/p>\n\n\n\n Let’s proceed to editing. Add visual appeal, crop and improve the image in other ways is easy in graphics editors. In addition to the well-known Photoshop, Canva<\/a> has become a popular tool. Many of its elements and layouts are free.<\/p>\n\n\n\n Fig. 9 \u2013 Working with images in the program Canva<\/a><\/p>\n\n\n\n In this graphic designer, as in other programs, you can apply effects, use text animation, crop and crop photos.<\/p>\n\n\n\n What should be remembered about optimizing images to be noticed by search engines? Of course, images must be placed in the text, which corresponds to the query. Consistency in meaning \u2013 an obvious criterion for a well-chosen image.<\/p>\n\n\n\n Fig. 10 \u2013 Picture of the band on the official site<\/a><\/p>\n\n\n\n Spell out in Latin letters a brief appropriate description in the name of the file with the image. It is important to insert relevant keywords. But they should be as simple as possible. The name of the image helps to convey the content of the picture to the users of the site. For example, devushka_hippi_v_shliape.jpg. rather than 052.jpg:<\/p>\n\n\n\n Fig. 11 \u2013 Example of an article<\/a> with pictures without titles <\/p>\n\n\n\n You can name the file in the native language \u2013 then, when you upload it to the site, the name is automatically transliterated. You can perform transliteration immediately online (f.e., in the service translit-online<\/a>). Or you can write the title directly in English. Choose the variant you prefer.<\/p>\n\n\n\n To optimize raster images,<\/strong> which consist of pixels, we will save their quality as much as possible. To do this you will have to:<\/p>\n\n\n\n A universal formula will help you determine the weight of the file: Length x Width x 4 bytes (weight of each pixel).<\/em><\/p>\n\n\n\n If you want to optimize vector images<\/strong>, which are usually saved in SVG format, we reduce their size and clear them of hidden elements.<\/p>\n\n\n\n Reduce weight without loss of quality<\/strong> you can with the help of programs:<\/p>\n\n\n\n Fig. 12 \u2013 The Compressor<\/a> program<\/p>\n\n\n\n 2. Kraken<\/a> \u2013 you can change the size of pictures and photos, use the batch conversion of files. There is a function for optimizing pictures, an archive with compressed pictures is easy to get by entering the url of the site and waiting a bit.<\/p>\n\n\n\n Fig. 13 \u2013 The Kraken<\/a> program<\/p>\n\n\n\n 3. Imagify<\/a> is unique in that it can be used to optimize all the pictures on a web resource at once. It’s very fast, and it supports JPG, PNG, PDF and GIF files. It can translate WebP files into other formats.<\/p>\n\n\n\n Fig. 14 \u2013 The Imagify<\/a> program<\/p>\n\n\n\n Google Pagespeed Insights<\/a> can help compress images on the server. This tool measures the performance of the web resource and can give you advice on improving it.<\/p>\n\n\n\n Fig. 15 \u2013 Google Pagespeed Insights<\/a> program<\/p>\n\n\n\n The next step is to write the metadata <\/strong>for the images.<\/p>\n\n\n\n For the optimization you need the Alt <\/em>(alt text) meta tag<\/em>. This not only explains to the users what is shown in the image, if it doesn’t load, but also helps search engines to index the image correctly. This is the name of what is shown in a photo or picture, with a description in 3-4 words.<\/p>\n\n\n\n The allowed size of the alt \u2013 125 characters, so it should be both informative and capacious, containing the appropriate number of keywords. For example, the alt=”two sheepdogs running with a stick” would be more logical for the picture below than the one below, duplicating the title of the article “Leashes, muzzles, and fines: why the new times will come”.<\/p>\n\n\n\n Fig. 16 \u2013 Example of a bad alt meta tag in an article<\/a><\/p>\n\n\n\n If we are talking about an online store, where you fill out product\/service cards, then it is advisable to specify the name and identifying attribute (name, brand, color or size). This will help search engines identify the image of the product. Below is not the most successful (the inscription “photo 1 Motokurtka” there is clearly unnecessary), but an example viola for a picture of the product.<\/p>\n\n\n\n Fig. 17 \u2013 Example of meta tag for motoshop<\/a> products<\/p>\n\n\n\n In the Title<\/em> field we write the name of the picture or photograph. This is what will appear to the user who puts the cursor on the picture.<\/p>\n\n\n\n
You will also need to optimize the loading of images on the site. First, check the storage location. For images to display correctly on your resource, it is better to store them on your domain or subdomain.<\/p>\n\n\n\n![\"Optimizing](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/1.-optimizacija-kartinok-hranenie-na-svoem-domene-1024x482.png\" "\\"Library")
<\/figure><\/div>\n\n\n\n![\"Image](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/2.-optimizacija-kartinok-identifikacija-izobrazhenij-1024x447.png\" "\\"Checking")
<\/figure><\/div>\n\n\n\n![\"Optimization](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/3.-optimizacija-kartinok-sootvetstvie-fotografii-teme-1024x291.png\" "\\"Example")
<\/figure><\/div>\n\n\n\n
But the behavioral factors of the site are also affected by the attractiveness <\/strong>of the pictures. This means that the image is pleasant to look at, the frame is well composed, the colors unobtrusive. <\/p>\n\n\n\n![\"Optimization](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/4.-optimizacija-kartinok-vid-tovara-na-sajte-2-1024x496.png\" "\\"Example")
<\/figure><\/div>\n\n\n\n2. Searching and editing picture<\/h2>\n\n\n\n
![\"Optimization](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/5.-optimizacija-kartinok-poisk-foto-s-otobrazheniem-licenzii-1024x224.png\" "\\"Google")
<\/figure><\/div>\n\n\n\n![\"Optimization](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/6.-optimizacija-kartinok-poisk-foto-v-google-kartinki-1024x419.png\" "\\"Search")
<\/figure><\/div>\n\n\n\n![\"Search](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/7.-poisk-kartinok-na-reddit-1024x577.png\" "\\"Images")
<\/figure><\/div>\n\n\n\n![\"Search](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/8.-poisk-kartinok-v-fotostoke-freepik-1024x436.png\" "\\"Intuitive")
<\/figure><\/div>\n\n\n\n![\"Editing](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/9.-redaktirovanie-fotografij-v-canva-1024x501.png\" "\\"Working")
<\/figure><\/div>\n\n\n\n3. Optimizing images for the site<\/h2>\n\n\n\n
![\"Optimizing](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/10.-optimizacija-kartinok-foto-otvechaet-smyslu-teksta-1024x578.png\" "\\"Picture")
<\/figure><\/div>\n\n\n\n![\"Optimize](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/11.-optimizacija-kartinok-foto-nazvano-po-nomeru-1024x692.png\" "\\"Example")
<\/figure><\/div>\n\n\n\n![\"Reducing](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/12.-snizhenie-vesa-kartinki-pri-pomoshhi-compressor-1024x553.png\" "\\"The")
<\/figure><\/div>\n\n\n\n![\"Reducing](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/13.-snizhenie-vesa-kartinki-pri-pomoshhi-kraken-1024x542.png\" "\\"The")
<\/figure><\/div>\n\n\n\n![\"Image](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/14.-snizhenie-vesa-kartinki-pri-pomoshhi-imagify-1024x565.png\" "\\"The")
<\/figure><\/div>\n\n\n\n![\"Compressing](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/15.-szhatie-razmera-kartinki-pri-pomoshhi-pagespeed-1024x509.png\")
<\/figure><\/div>\n\n\n\n![\"Alt](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/16.-teg-alt-ne-otvechaet-soderzhimomu-kartinki.png\" "\\"Example")
<\/figure><\/div>\n\n\n\n![\"Image](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/17.-optimizacija-kartinok-metateg-tovara-na-sajte.png\" "\\"Example")
<\/figure><\/div>\n\n\n\n
![\"Optimize](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/18.-optimizacija-kartinok-primer-tajtla-dlja-izobrazhenija-stati-v-bloge.png\" "\\"An")
<\/figure><\/div>\n\n\n\n![\"Image](\"https:\/\/ppcseo.com\/wp-content\/uploads\/2022\/02\/19.-optimizacija-kartinok-predprosmotr-v-socseti.png\" "\\"Fig.19")
<\/figure><\/div>\n\n\n\n