{"id":1841,"date":"2019-12-10T17:51:08","date_gmt":"2019-12-10T17:51:08","guid":{"rendered":"https:\/\/www.seotesteronline.com\/?p=1841"},"modified":"2021-05-19T13:26:32","modified_gmt":"2021-05-19T13:26:32","slug":"image-optimization-seo","status":"publish","type":"post","link":"https:\/\/www.seotesteronline.com\/blog\/content-creation\/image-optimization-seo\/","title":{"rendered":"Image Optimization: an SEO Guide"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Image searches are often underrated. They have <\/span><span style=\"font-weight: 400;\">great potential for many search queries<\/span><span style=\"font-weight: 400;\">. For many of them, <\/span><span style=\"font-weight: 400;\">images are the main results that the SERP returns.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As well as text, <\/span><b>images need to be optimized<\/b><span style=\"font-weight: 400;\"> if you want the <\/span><span style=\"font-weight: 400;\">crawler<\/span><span style=\"font-weight: 400;\"> to like them. If you succeed, <\/span><b>images can boost the ranking of your page within the SERP.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">There are many ways to use images to improve your positioning, <\/span><span style=\"color: #2296f3;\"><a style=\"color: #2296f3;\" href=\"https:\/\/support.google.com\/webmasters\/answer\/114016\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">as mentioned in Google&#8217;s best practices for images<\/span><\/a><\/span><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These are the most important ones.<\/span><\/p>\n<h2>Optimize the image alt-text and filename: best practices<\/h2>\n<p><span style=\"font-weight: 400;\">For now, the crawler can recognize content, any content, only by its textual content. I<\/span><b>f you want your images to be SEO-friendly<\/b><span style=\"font-weight: 400;\">, you must work on their alt text and filename.<\/span><\/p>\n<h3>What is the alt-text?<\/h3>\n<p><b>Alt-text is the short form for alternate text.<\/b><span style=\"font-weight: 400;\"> It is the piece of text that appears on the web page when it fails to load an image.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You would do a lovely thing for your visitors if you provided them with an accurate description of the image. <\/span><b>And what happens if the visitor is happy? You got it. The crawler is happy.<\/b><span style=\"font-weight: 400;\"> Not only because you&#8217;re helping humans, but because you&#8217;re helping it, too.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Remember? <\/span><b>It cannot &#8220;see&#8221; images, so it needs a bit of help to understand what the image is showing.<\/b><\/p>\n<h3>How to optimize the alt-text<\/h3>\n<p><span style=\"font-weight: 400;\">Put a detailed description of the image. Of course, <\/span><b>it must contain the appropriate keyword.<\/b><span style=\"font-weight: 400;\"> And <\/span><b>it must be coherent with the image<\/b><span style=\"font-weight: 400;\">. Because <\/span><span style=\"color: #2296f3;\"><a style=\"color: #2296f3;\" href=\"https:\/\/suite.seotesteronline.com\/keyword-explorer\/landing\"><span style=\"font-weight: 400;\">you did your keyword research<\/span><\/a><\/span><span style=\"font-weight: 400;\">, right?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now it is time to put the alt-text in the image. There are many ways:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can <\/span><span style=\"color: #2296f3;\"><a style=\"color: #2296f3;\" href=\"https:\/\/www.w3schools.com\/tags\/att_img_alt.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">insert the HTML right within the page code<\/span><\/a><\/span><span style=\"font-weight: 400;\">,\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Using WordPress&#8217;s media uploader. On WordPress, click on insert media, and look for the alt-text field on the right.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Using the &#8220;insert image&#8221; option within <\/span><span style=\"color: #2296f3;\"><a style=\"color: #2296f3;\" href=\"https:\/\/suite.seotesteronline.com\/seo-editor\"><span style=\"font-weight: 400;\">SEO Editor<\/span><\/a><\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3011\" src=\"https:\/\/www.seotesteronline.com\/wp-content\/uploads\/2019\/12\/image-optimization-seo-editor-screen.png\" alt=\"image optimization seo editor screen\" width=\"556\" height=\"317\" srcset=\"https:\/\/www.seotesteronline.com\/wp-content\/uploads\/2019\/12\/image-optimization-seo-editor-screen.png 556w, https:\/\/www.seotesteronline.com\/wp-content\/uploads\/2019\/12\/image-optimization-seo-editor-screen-300x171.png 300w\" sizes=\"(max-width: 556px) 100vw, 556px\" \/><\/p>\n<h3>An example of a good alt-text<\/h3>\n<p><span style=\"font-weight: 400;\">For this image, you can write \u00aba <\/span><i><span style=\"font-weight: 400;\">picture of a cat,\u00bb<\/span><\/i><span style=\"font-weight: 400;\"> sure. But you can be more specific. What about: \u00aba picture of a sleeping black European cat?\u00bb. <\/span><b>Be as descriptive as you can be<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2>Title and description<\/h2>\n<p><span style=\"font-weight: 400;\">You can also <\/span><b>add a title and description to the image<\/b><span style=\"font-weight: 400;\">. You can use these fields to add further information to the image for the crawler. Respectively, <\/span><b>you should use a shorter and a longer text than the one you used for the alt-text<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h3>Optimize the image filename and URL<\/h3>\n<p><span style=\"font-weight: 400;\">Another way to help the crawler <\/span><b>is to use a descriptive filename<\/b><span style=\"font-weight: 400;\">. It helps the spider understand what the image is about, too.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also, <\/span><b>the image must have a descriptive URL<\/b><span style=\"font-weight: 400;\"> \u2014 something like:<\/span><\/p>\n<p><em><span style=\"font-weight: 400;\">www.yoursite.com\/images\/black-cat-sleeping.jpg<\/span><\/em><\/p>\n<h2>How to optimize images for your web page<\/h2>\n<p><span style=\"font-weight: 400;\">The first thing you should know is that<\/span><b> image quality influences the ranking<\/b><span style=\"font-weight: 400;\">. If you cannot produce images on your own, there are a few links from which you can download high-resolution images for free.<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/pixabay.com\/it\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Pixabay<\/span><\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Unsplash<\/span><\/a><\/li>\n<li><a href=\"https:\/\/kaboompics.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Kaboompics<\/span><\/a><\/li>\n<li><a href=\"https:\/\/www.canva.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Canva<\/span><\/a><span style=\"font-weight: 400;\"> (to make personalized graphics)<\/span><\/li>\n<li><a href=\"https:\/\/www.screely.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Screely<\/span><\/a><span style=\"font-weight: 400;\"> (to make stylish screenshots)<\/span><\/li>\n<\/ul>\n<h3><b>How to optimize the image quality and size<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">So, <\/span><b>high-quality images are critical for a good ranking.<\/b><span style=\"font-weight: 400;\"> But <\/span><b>so it is the page loading time<\/b><span style=\"font-weight: 400;\">, as you should know. And high-quality images mean slow loading times.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How to kill two birds with one stone?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can use your favorite image processing software, but you can also use one of the many <\/span><b>online free image compression tools<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/kraken.io\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Kraken<\/span><\/a><span style=\"font-weight: 400;\">: can optimize the image size without virtually any loss in quality. It is a freemium solution. You can optimize up to 100MB for free. After that, you have to subscribe to a paid account.<\/span><\/li>\n<li><a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">TinyPNG<\/span><\/a><span style=\"font-weight: 400;\">: can convert for free both PNG and JPEG images. Sometimes it returns errors. In that case, retry.<\/span><\/li>\n<li><a href=\"https:\/\/www.iloveimg.com\/it\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Iloveimg<\/span><\/a><span style=\"font-weight: 400;\">: Many tools in one. You can convert the image format, add watermark, edit, reduce the file size and resolution, and much more.\u00a0<\/span><\/li>\n<li><a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Squoosh<\/span><\/a><span style=\"font-weight: 400;\">: very straightforward. Just drag and drop the image you want to convert.<\/span><\/li>\n<li><a href=\"https:\/\/imagecompressor.com\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Optimizilla<\/span><\/a><span style=\"font-weight: 400;\">: can optimize batches of images.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">There is another way to use high quality yet fast-to-load images. <\/span><b>You can embed them directly from Instagram.\u00a0<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select the image you want to use on <\/span><a href=\"http:\/\/www.instagram.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span style=\"font-weight: 400;\">Instagram<\/span><\/a><span style=\"font-weight: 400;\">;\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tap on the three-dot icon;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select &#8220;<\/span><i><span style=\"font-weight: 400;\">embed<\/span><\/i><span style=\"font-weight: 400;\">&#8221; on the pop-up menu;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Copy the snippet and paste it on your webpage<\/span><\/li>\n<\/ul>\n<h3>Use responsive images<\/h3>\n<p><span style=\"font-weight: 400;\">Users can view your webpage on a multitude of devices and, thus, screens of different sizes. <\/span><b>An excellent way to speed up loading times is to use various versions of an image<\/b><span style=\"font-weight: 400;\">, so to load a smaller (read: faster to load) one on smaller devices.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To learn how to do it, and what sizes to choose, read <\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\/images#inlining_pros_cons\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Google&#8217;s fundamentals for images<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h2>The Image Sitemap<\/h2>\n<p><span style=\"font-weight: 400;\">We already mentioned that Google could not &#8216;read&#8217; images. So we must <\/span><b>provide the crawler with something that tells it what images are on a webpage and what they&#8217;re showing<\/b><span style=\"font-weight: 400;\">. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can help it with an <\/span><b>image sitemap.<\/b><span style=\"font-weight: 400;\"> It is a document that tells how many and what images are on a single webpage. To create it, <\/span><a href=\"https:\/\/support.google.com\/webmasters\/answer\/178636?hl=it\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">follow Google&#8217;s guide<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Besides the practices to optimize images for search engines, remember that they are part of your content, and it must be coherent with all the rest.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Put your images near relevant text and, above all, <\/span><b>always keep quality in mind<\/b>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you already know how to optimize images and improve the performance of your site? If the answer is no, read this article!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"acf":[],"lang":"en","translations":{"en":1841,"it":1838},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/posts\/1841"}],"collection":[{"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/comments?post=1841"}],"version-history":[{"count":17,"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/posts\/1841\/revisions"}],"predecessor-version":[{"id":4570,"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/posts\/1841\/revisions\/4570"}],"wp:attachment":[{"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/media?parent=1841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/categories?post=1841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.seotesteronline.com\/wp-json\/wp\/v2\/tags?post=1841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}