{"id":129872,"date":"2019-05-31T14:32:20","date_gmt":"2019-05-31T14:32:20","guid":{"rendered":"https:\/\/www.searchenginewatch.com\/?p=129872"},"modified":"2019-10-24T08:50:19","modified_gmt":"2019-10-24T08:50:19","slug":"image-optimization-for-seo","status":"publish","type":"post","link":"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/","title":{"rendered":"Image optimization for SEO: Everything you need to know for success"},"content":{"rendered":"<p><strong>As of January 2019, there are more than <a href=\"https:\/\/www.websitehostingrating.com\/internet-statistics-facts\/\" target=\"_blank\" rel=\"noopener\">1.94 billion<\/a> websites.\u00a0That\u2019s a lot of competition. What\u2019s one great way to stand out? Great images. In fact, vision dominates all other senses when it comes to interacting with and absorbing information.<\/strong><\/p>\n<p>Here are <a href=\"https:\/\/books.google.co.in\/books?id=slE8DwAAQBAJ&amp;pg=PA136&amp;lpg=PA136&amp;dq=dr+lynell+burmark+unless+our+words&amp;source=bl&amp;ots=B4saya3FwJ&amp;sig=ACfU3U0v4gG3Ne2M8JfMg69PmzFBapwd8w&amp;hl=en&amp;sa=X&amp;redir_esc=y#v=onepage&amp;q=dr%20lynell%20burmark%20unless%20our%20words&amp;f=false\" target=\"_blank\" rel=\"noopener\">three quick facts<\/a> to help you understand how critical images are for people (and for <a href=\"https:\/\/searchenginewatch.com\/2019\/06\/03\/podcast-seo-tips-101\/\">SEO<\/a>):<\/p>\n<ul>\n<li>90% of all the data the brain transmits is visual.<\/li>\n<li>The human brain processes one image in the same amount of time it would take to read 1000 words. (Yes, turns out the old adage is indeed rooted in scientific fact.)<\/li>\n<li>The recall value of <a href=\"https:\/\/www.jeffbullas.com\/visual-content-marketing-statistics\/\" target=\"_blank\" rel=\"noopener\">visual content<\/a> even after three days is 65%, whereas the recall value for written text is merely 10%.<\/li>\n<\/ul>\n<p>With the majority of search volume coming from phones &#8212; and coupled with the fact that people\u2019s attention spans have reduced to eight seconds &#8212; it&#8217;s essential for websites to be able to deliver a quick, frictionless, and delightful user experience.<\/p>\n<p><a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">Image optimization<\/a> serves as a major part of this puzzle.<\/p>\n<h2><strong>What can image optimization do for my users (and for <a href=\"https:\/\/searchenginewatch.com\/2019\/06\/17\/local-seo-guide\/\">SEO<\/a>)? <\/strong><\/h2>\n<ol>\n<li>By shaving seconds off your site speed, it can reduce bounce rate and improve site retention.<\/li>\n<li>It helps improve page loading speed, which is a major <a href=\"https:\/\/backlinko.com\/google-ranking-factors\" target=\"_blank\" rel=\"noopener\">Google ranking factor<\/a>.<\/li>\n<li>It can help improve your <a href=\"https:\/\/sewprod.wpenginepowered.com\/2019\/07\/15\/keyword-research-tools-free\/\">keyword<\/a> prominence.\u00a0<span style=\"font-weight: 400;\">Read more on that here.<\/span><\/li>\n<li>It helps in reverse image search, which can be a big value add especially if you\u2019re a product-based business.<\/li>\n<li>Many devices and desktops use high-resolution screens, which increase the need for good quality images.<\/li>\n<\/ol>\n<h2><strong>Basic image optimization tips <\/strong><\/h2>\n<p>These are some tips that anyone can apply for any type of site (even WordPress), so you\u2019re not solely at the mercy of your developers and designers.<\/p>\n<h2><strong>1. Choosing the right type of image: Vector or raster?<\/strong><\/h2>\n<ul>\n<li><strong>Vector images<\/strong> are simple, created by using lines, points, and polygons. <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">Vector images<\/a> are best applicable for shapes, logos, icons, and flat images. They have as good as no pixelation when you zoom in, making them apt for high-resolution devices. Additionally, you can use the same image file on multiple platforms (as well as for responsive website design) without having to use multiple variations.<\/li>\n<li><strong>Raster images<\/strong>, on the other hand, are images that are made of rectangular grids, each packed with multiple color values (pixels). <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">Raster images<\/a> provide depth to the imagery you would want to convey, giving it an emotional and psychological appeal as these images look real. However, if not handled well, these can heavily hamper your site\u2019s loading speed! Plus, you might have to save multiple file variations to ensure they\u2019re compatible on different platforms and fit for responsive designs.<\/li>\n<\/ul>\n<p>Here\u2019s a table that Google shared to help understand the pixel-to-byte relation. In short, you\u2019ll get an idea of how heavy one image can get based on its dimensions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-129957\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/Googles-chart-on-image-dimensions-and-file-sizes-1.png\" alt=\"Google's chart on image dimensions and file sizes\" width=\"803\" height=\"225\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/Googles-chart-on-image-dimensions-and-file-sizes-1.png 803w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/Googles-chart-on-image-dimensions-and-file-sizes-1-300x84.png 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/Googles-chart-on-image-dimensions-and-file-sizes-1-768x215.png 768w\" sizes=\"auto, (max-width: 803px) 100vw, 803px\" \/><\/p>\n<p>Source: <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/image-optimization\" target=\"_blank\" rel=\"noopener\">Google<\/a><\/p>\n<p>Google also mentioned that it takes four bytes of memory to deliver one pixel. Imagine if you had several images on a site with 800 X 800 pixels. our site would take at least something around 625 kBps. Or in simpler terms, imagine an elephant participating in a rabbit race.<\/p>\n<h4><strong>Bottom line<\/strong><\/h4>\n<p>I would suggest wisely using a mix of both. An ideal ratio could be 40% vector images and 60% raster images.<\/p>\n<h2><strong>2. Picking the best image format \u2013 SVG, JPG, PNG, or GIF?<\/strong><\/h2>\n<h3><strong>Best format for vector images: <\/strong><\/h3>\n<p><a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">SVG<\/a> is the only, and the best, option for vector images. Due to its flat imagery, you also benefit from high quality that is easily scalable.<\/p>\n<h3><strong>Best formats for raster images:<\/strong><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">PNG<\/a>:<\/strong> Produces high-quality images with heavy file sizes. It can be suggested only for times when you want to save every detail of the image.<\/li>\n<li><strong>JPG:<\/strong> Produces good quality images which aren\u2019t heavy in terms of file size. However, these are lossy images, which means you\u2019ll lose some minor image details permanently. <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">JPG<\/a> is undoubtedly the preferred image format, which gives you the convenience of hassle-free downloading and uploading of images. Because of this, they\u2019re the most widely used &#8212; around 72.3% of websites use JPG image formats and most of the phones save images as \u201c.JPG\u201d files. They are especially suggested for <a href=\"https:\/\/searchenginewatch.com\/2019\/10\/04\/tips-for-q4-ad-copy-and-messaging\/\">ecommerce<\/a> sites and social media.<\/li>\n<li><strong>Gif: <\/strong>If you\u2019re looking for animation, GIF is an ideal choice as it supports 256 different colors chosen from the\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/24-bit_color\">24-bit<\/a>\u00a0RGB color space. As of now, just <a href=\"https:\/\/w3techs.com\/technologies\/details\/im-gif\/all\/all\" target=\"_blank\" rel=\"noopener\">26.6% of websites<\/a> use GIF formats.<\/li>\n<\/ul>\n<h4>Here\u2019s a chart that could help you take a call on which image format is best to use.<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-129955 size-full\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-image-formats-and-usage-trends.png\" alt=\"Chart on image formats and usage trends\" width=\"600\" height=\"600\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-image-formats-and-usage-trends.png 600w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-image-formats-and-usage-trends-300x300.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Source: <a href=\"https:\/\/w3techs.com\/technologies\/details\/im-jpeg\/all\/all\" target=\"_blank\" rel=\"noopener\">W3Techs<\/a><\/p>\n<p>Note: The data in the above chart is of May 15, 2019<\/p>\n<h2><strong>3. Resizing images<\/strong><\/h2>\n<p>With a cloud full of devices it\u2019s obvious why people get confused about ideal image sizes.<\/p>\n<p>Note that image size and image file size are two different things. Here we\u2019ll explain how you can get ideal image size (also called image dimensions).<\/p>\n<p>As part of image dimensions, we\u2019ll also discuss aspect ratios.<\/p>\n<h3><strong>What\u2019s an aspect ratio?<\/strong><\/h3>\n<p>Aspect ratios tell the width and height of an image and are written in an \u201cx:y\u201d format.<\/p>\n<h3><strong>Why is it important?<\/strong><\/h3>\n<p>Remember the time when you tried scaling an image and literally blew it out of proportion? This is exactly what it saves you from. Referring to an image aspect ratio while cropping or resizing images helps you maintain the viability and beauty of the image\u2019s dimensions.<\/p>\n<p>You could refer to this image <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">Shutterstock<\/a> created to enlist some commonly used aspect ratios.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-129958\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-of-best-image-aspect-ratios.jpg\" alt=\" Chart of best image aspect ratios\" width=\"1024\" height=\"451\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-of-best-image-aspect-ratios.jpg 1024w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-of-best-image-aspect-ratios-300x132.jpg 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-of-best-image-aspect-ratios-768x338.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Source for the image and the table data: <a href=\"https:\/\/www.shutterstock.com\/blog\/common-aspect-ratios-photo-image-sizes\" target=\"_blank\" rel=\"noopener\">Shutterstock<\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td>Aspect ratio<\/td>\n<td>Typical dimensions (inches)<\/td>\n<td>Typical dimensions (pixels)<\/td>\n<td>Ideal for<\/td>\n<\/tr>\n<tr>\n<td>1:1<\/td>\n<td>\u00a08 x 8<\/td>\n<td>1080 x 1080<\/td>\n<td>Social media profile photos and mobile screens<\/td>\n<\/tr>\n<tr>\n<td>3:2<\/td>\n<td>6 x 4<\/td>\n<td>1080 x 720<\/td>\n<td>Photography and print<\/td>\n<\/tr>\n<tr>\n<td>4:3<\/td>\n<td>8 x 6<\/td>\n<td>1024 x 768 pixels<\/td>\n<td>TVs, monitors, and digital cameras<\/td>\n<\/tr>\n<tr>\n<td>16:9<\/td>\n<td>1920 x 1080 and 1280 x 720<\/td>\n<td><\/td>\n<td>Presentations, monitors, and widescreen TVs<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>With reference to the table above, it\u2019s best to focus on the 1:1 and 4:3 image ratio that are apt for social media, mobile screens, photography, and print.<\/p>\n<p>You might have your own dimension templates based on the content management system (CMS) you\u2019re using.<\/p>\n<p><a href=\"https:\/\/support.squarespace.com\/hc\/en-us\/articles\/206542517-Formatting-your-images-for-display-on-the-web\" target=\"_blank\" rel=\"noopener\">According to Squarespace<\/a>, the most ideal size for image optimization on a CMS is 1500 and 2500 pixels.<\/p>\n<p>Here\u2019s a quick and simple answer to spot the most common image sizes for the web.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-129956 size-full\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-most-ideal-image-optimization-sizes.jpg\" alt=\"Chart on most ideal image optimization sizes\" width=\"1024\" height=\"501\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-most-ideal-image-optimization-sizes.jpg 1024w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-most-ideal-image-optimization-sizes-300x147.jpg 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/chart-on-most-ideal-image-optimization-sizes-768x376.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>Source: Shutterstock<\/p>\n<h4><strong>Bottom line<\/strong><\/h4>\n<p>From personal observation, I can suggest using 1080 X 1080 pixels and 1500 X 2500 pixels.<\/p>\n<p>If you\u2019re feeling too lazy to go through all these details, you could also try scaling the image from the corner arrow while you\u2019ve pressed the \u201cShift\u201d key. Works for some platforms.<\/p>\n<h2><strong>4. Naming images &#8211; Best practices<\/strong><\/h2>\n<p>Search engines have brains without eyes, so unless you name your images right, they won\u2019t be able to \u00a0\u201cread\u201d your images nor rank you accordingly. This is where your <a href=\"https:\/\/searchenginewatch.com\/optimize-instagram-account-search-engines\">keywords<\/a> come into play. As I\u2019ve mentioned above, if you name your images well, you can improve your keyword density and chances of ranking.<\/p>\n<p>Let\u2019s explain this with an example:<\/p>\n<ul>\n<li><strong>How people commonly save images &#8211;<\/strong> &#8220;Haphazard\/random numbers and alphabets\u201d, \u201cFlowers can dance\u201d, and \u201cWhat was I thinking\u201d<\/li>\n<li><strong>How \u00a0people should save images \u00a0\u2013<\/strong> \u201cfive-tips-for-image-optimization\u201d and \u201cthe-ideal-method-for-naming-images-in-2019\u201d<\/li>\n<\/ul>\n<p>Name your images in all small letters with hyphens in between and leave no spaces. As you\u2019ve seen, I\u2019ve used the keyword \u201cimage optimization\u201d in the \u201cfive-tips-for-image-optimization\u201d example. You\u2019ll be surprised with how much that helps in ranking.<\/p>\n<h3><strong>Bonus<\/strong><\/h3>\n<p>You could also use the following to improve keyword usage in your site content:<\/p>\n<ul>\n<li>Alt text (If your image is loading slowly, this text appears in place of the image so users can get an idea of what should be there.)<\/li>\n<li>Captions (Text that gives a short description, helping users know more about the image.)<\/li>\n<\/ul>\n<p>Plus, if you have an ecommerce site, you could even make good use of <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/30\/implement-googles-how-to-schema\/\">structured data<\/a> to give the search engine more specific details about your products\u2019 color, type, size, and a lot more.<\/p>\n<h2><strong>5. Compressing the byte size of the image files<\/strong><\/h2>\n<p>Compressing a file is possibly the simplest yet the most crucial part of image optimization as it directly relates to the website\u2019s loading time. Points one to four prepare you for this final stage of image optimization.<\/p>\n<h4>Two <a href=\"http:\/\/robotics.stanford.edu\/~ronnyk\/2007IEEEComputerOnlineExperiments.pdf\" target=\"_blank\" rel=\"noopener\">live examples<\/a> of how much load time can cost your bottom line:<\/h4>\n<ul>\n<li><a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">Amazon<\/a>.com observed a one percent decrease in sales for every 100-ms increase in the page load time.<\/li>\n<li>Google experienced a 20 percent drop in revenue for every 500-ms increase in the search results\u2019 display time.<\/li>\n<\/ul>\n<h3><strong>What\u2019s the ideal image file size?<\/strong><\/h3>\n<p>A file size below 70 kb is what you should be targeting. In case of heavy files closer to 300 kb, the best you can achieve is a 100 kb file size. Doing so saves your images from taking extra milliseconds to load while it gives you lossy, compressed images that do not compromise the visual quality.<\/p>\n<h3><strong>How can you decrease an image\u2019s file size?<\/strong><\/h3>\n<p>All you need to do is drop these files on a file compression site and you\u2019re all set. These are some good, free image file compression online <a href=\"https:\/\/sewprod.wpenginepowered.com\/2019\/07\/15\/keyword-research-tools-free\/\">tools<\/a>:<\/p>\n<ul>\n<li><strong>TinyPNG\/TinyJPG &#8211;<\/strong> (Compresses .png and .jpg files &#8211; 135 kb reduced to 43.9 kb \u2013 Does up to 20 images at a time \u2013 Supports dropbox)<\/li>\n<li><strong>Image optimizer<\/strong> &#8211; (Compresses .png and .jpg files &#8211; 135 kb reduced to 49 kb \u2013 Only does 1 file at a time)<\/li>\n<li><strong>WeCompress<\/strong> &#8211; (Compresses .png, .jpg, and other files &#8211; 135 kb reduced to 48 kb \u2013 Only does 1 file at a time)<\/li>\n<li><strong>EzGif &#8211;<\/strong> (Compresses .gif and other files &#8211; 2MiB reduced to 1.77MiB &#8211; Only does 1 file at a time. It also lets you edit the gif before compressing it.)<\/li>\n<\/ul>\n<h3><strong>Bonus tips<\/strong><\/h3>\n<ul>\n<li>Use web fonts in place of images with text on them as they look better, do not need to be scaled with the image, take less space, and save loading time.<\/li>\n<li>Use 72dpi resolution for your images.<\/li>\n<\/ul>\n<h2><strong>Closing notes<\/strong><\/h2>\n<p>You could be using all these <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/31\/image-optimization-for-seo\/\">image optimization tips<\/a> and still get stuck with a site that loads in 13 seconds or even worse. This is when you might want to ask yourself:<\/p>\n<ul>\n<li>Do I need all these images?<\/li>\n<li>Which images are redundant?<\/li>\n<li>What\u2019s the best place to put images on the site?<\/li>\n<\/ul>\n<p>Website content, both visual and written, has an intertwined relationship that stimulates emotions and inspires people to further engage with your product or service. People (or at least I) judge a business through its website so feel free to tell us, which was the last impressive website you visited? Or what have you done for image optimization?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Basic image optimization tips that anyone can apply for any type of site, even WordPress. Lots of facts, stats and screenshots included.<\/p>\n","protected":false},"author":688,"featured_media":129962,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[127,9241,37,756,27502,9242,9243,27504,22,676,1482,27505,27503],"content_type":[],"class_list":["post-129872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-amazon","tag-gif","tag-google","tag-image-optimization","tag-image-optimization-tips","tag-jpg","tag-png","tag-raster-images","tag-seo","tag-seo-best-practices","tag-shutterstock","tag-svg","tag-vector-images"],"acf":{"tad_independentcommercial":false,"tad_content_format":false},"post_info":{"name":"Kamaljeet Kalsi","title":"","thumbnail_url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/05\/Image-optimization-for-SEO-Everything-you-need-to-know-for-success-120x90.png","category":"SEO","timeago":"7y"},"_links":{"self":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/129872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/users\/688"}],"replies":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/comments?post=129872"}],"version-history":[{"count":0,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/129872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media\/129962"}],"wp:attachment":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media?parent=129872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/categories?post=129872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/tags?post=129872"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/content_type?post=129872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}