{"id":18192,"date":"2018-04-03T12:40:18","date_gmt":"2018-04-03T09:40:18","guid":{"rendered":"https:\/\/cognitiveseo.com\/blog\/?p=18192"},"modified":"2019-05-15T10:52:48","modified_gmt":"2019-05-15T07:52:48","slug":"image-seo-tips","status":"publish","type":"post","link":"https:\/\/cognitiveseo.com\/blog\/18192\/image-seo-tips\/","title":{"rendered":"8 Effective Image SEO Tips Every Digital Marketer Should Know"},"content":{"rendered":"<p>Image optimization for SEO purposes is an art you should learn how to master. Since images take a lot of space on your website, it\u2019s only natural to find ways to optimize them not only for better user experience and functionality but also for better ranks and traffic.The big dilemma is finding the balance between a well-optimized image that still preserves its visual quality and a fast, high-peformance website. Thus, the better question to ask is: <strong>Can optimized images help\/complement your SEO efforts<\/strong>?<\/p>\n<p>&nbsp;<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-large wp-image-18294\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-optimization-tips-for-SEO-purposes-2-1024x512.jpg\" alt=\"Image Optimization Tips for SEO-purposes-2\" width=\"1024\" height=\"512\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-optimization-tips-for-SEO-purposes-2.jpg 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-optimization-tips-for-SEO-purposes-2-300x150.jpg 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-optimization-tips-for-SEO-purposes-2-768x384.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>We shouldn&#8217;t add pictures to our content for the sake of having something to break our content and create more lines. That\u2019s not the recommended way to use visual content.\u00a0There are lots of situations when pixels are sacrificed and pictures have a bad-looking aspect. Why should some innocent pictures end up pixelated after compression when there are lots of other ways to optimize images and still keep the visual aspect? So, we gathered the most important tips that will help you not only optimize the images for SEO but also speed up your website and help you in your SEO endeavour.<\/p>\n<p>&nbsp;<\/p>\n<ol class=\"summaryext\">\n<li><strong><a href=\"#1\">Choose the Right Image Format<\/a><\/strong><\/li>\n<li><strong><a href=\"#2\">Optimize Image File Weight<\/a><\/strong><\/li>\n<li><strong><a href=\"#3\">Save Images at Smaller Resolutions<\/a><\/strong><\/li>\n<li><strong><a href=\"#4\">Resize Images to Scale<\/a><\/strong><\/li>\n<li><strong><a href=\"#5\">Reduce the File Size Using Plugins<\/a><\/strong><\/li>\n<li><strong><a href=\"#6\">Remove Any Irrelevant or Unneeded Metadata<\/a><\/strong><\/li>\n<li><strong><a href=\"#7\">Name Your Images and Add Alt Descriptions for SEO Success<\/a><\/strong><\/li>\n<li><strong><a href=\"#8\">Use SVG Files to Have a Higher Clarity and Lighter Website<\/a><\/strong><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>Our previous researches and case studies about <a href=\"https:\/\/cognitiveseo.com\/blog\/5909\/did-google-read-text-image-can-affect-my-rankings\/\"><strong>the connection between images and SEO<\/strong><\/a> got us to this image optimization topic. We discovered then that Google can read text from images, which can have huge implication\u00a0in rankings and Google Image Search world in the future.<\/p>\n<p>&nbsp;<\/p>\n<p>It is highly possible that in the very near future, Google will probably change the algorithms regarding the way it will rank images. That change will dramatically impact the search, and thereby the SEO world. Especially since Google is using the <strong><a href=\"https:\/\/cognitiveseo.com\/blog\/6511\/will-google-read-rank-images-near-future\/\">object detection in images<\/a><\/strong>. Therefore, it is best to be prepared and follow our next image SEO tips to help Google \u201cread\u201d &amp; rank your images in the near future.\u00a0<\/p>\n<div class='cgn-shortcode-anchor' id='1' style='height:50px'>&nbsp;<\/div>\n<h2><strong>1. Choose the Right Image Format<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>There are multiple file types for visual content, each serving for a different purpose. If you choose the right file, it will turn out to be a huge improvement. For web, you can choose:<\/p>\n<ul>\n<li>JPEG format when you have pictures with a lot of color, color gradient and shading.<\/li>\n<li>PNG format when you have a logo, or it is a picture with a lot of solid color or you need to use transparency.<\/li>\n<li>GIF format when you have an animation or in the same situation explained or the PNG format.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<table style=\"width: 1092px;\">\n<tbody>\n<tr style=\"height: 22px;\">\n<td style=\"width: 390px; height: 22px; text-align: center;\">JPEG<\/td>\n<td style=\"width: 252px; height: 22px; text-align: center;\">PNG<\/td>\n<td style=\"width: 458px; height: 22px; text-align: center;\">GIF<\/td>\n<\/tr>\n<tr style=\"height: 239.813px;\">\n<td style=\"width: 390px; height: 239.813px;\"><img decoding=\"async\" class=\"aligncenter  wp-image-18213\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/JPEG-example.jpg\" alt=\"JPEG example\" width=\"377\" height=\"227\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/JPEG-example.jpg 998w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/JPEG-example-300x180.jpg 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/JPEG-example-768x462.jpg 768w\" sizes=\"(max-width: 377px) 100vw, 377px\" \/><\/td>\n<td style=\"width: 252px; height: 239.813px;\"><img decoding=\"async\" class=\"aligncenter  wp-image-18225\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Giraffe-PNG-example-.png\" alt=\"Giraffe PNG example\" width=\"233\" height=\"253\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Giraffe-PNG-example-.png 567w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Giraffe-PNG-example--277x300.png 277w\" sizes=\"(max-width: 233px) 100vw, 233px\" \/><\/td>\n<td style=\"width: 458px; height: 239.813px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-18217\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Gif-example-madagascar.gif\" alt=\"Gif example madagascar\" width=\"446\" height=\"229\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>Ilya Grigorik, Web performance engineer at Google, explains how you can choose the best file format for your picture through the next representation in <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/image-optimization\" target=\"_blank\" rel=\"nofollow\"><strong>Web Fundamentals<\/strong><\/a> on Google Developer website.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_18220\" style=\"width: 615px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-18220\" class=\"size-full wp-image-18220\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-format-tree.png\" alt=\"Image-format-tree\" width=\"605\" height=\"347\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-format-tree.png 605w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-format-tree-300x172.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><p id=\"caption-attachment-18220\" class=\"wp-caption-text\">Source: developers.google.com<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>Having the right format and the right picture can influence a lot the future of your content. More and more businesses invest in the visual appearance of their content. That&#8217;s why\u00a0<a href=\"https:\/\/learn.g2crowd.com\/choosing-the-best-images-for-websites\" target=\"_blank\"><strong>51 percent<\/strong><\/a> of B2B marketers prioritize creating visual assets as part of their content strategy.<\/p>\n<div class='cgn-shortcode-anchor' id='2' style='height:50px'>&nbsp;<\/div>\n<h2><strong>2. Optimize Image File Weight<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>Reducing the image quality can improve a website\u2019s speed for loading the page faster. Fast websites mean better user experience, which in turn leads to increased conversions. According to a study by Kissmetrics, 1-second delay in page response can result in a <a href=\"https:\/\/blog.kissmetrics.com\/loading-time\/\" target=\"_blank\" rel=\"nofollow\"><strong>7% reduction in conversions<\/strong><\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #000000;\">An even bigger problem is for mobile users<\/span><span style=\"color: #0000ff;\">. <\/span>Images account for <a href=\"https:\/\/searchenginewatch.com\/2017\/06\/02\/how-to-optimize-your-mobile-site-speed-testing-for-issues\/\" target=\"_blank\" rel=\"nofollow\"><strong>68% of total page weight<\/strong><\/a>\u00a0and tend to be too large, too many and often times unnecessary, slowing down the page load and preventing the user from accessing the information.<\/p>\n<p>&nbsp;<\/p>\n<p>The size of an image is given by its quality, or the number of pixels. If a picture has more pixels, it will lead to a higher size, dimension, and quality. That&#8217;s why reducing quality by 15-20% is recommended for JPEG and PNG formats. A lot of dedicated softwares have this option.<\/p>\n<p>&nbsp;<\/p>\n<p>In Adobe Photoshop, for example, for both JPEG and PNG there is the option to optimize images for web. The steps are quite simple: <strong>Export<\/strong> <strong>\u00bb Save for Web \u00bb Quality 85%<\/strong> (Use the photo viewer on the left to determine if you can compress the picture more and how it looks) \u00bb Click <strong>Save<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18195\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Reduce-quality-to-85-percents-for-JPEG-formats1-1024x705.png\" alt=\"Reduce quality to 85 percents for JPEG formats1\" width=\"1024\" height=\"705\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Reduce-quality-to-85-percents-for-JPEG-formats1-1024x705.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Reduce-quality-to-85-percents-for-JPEG-formats1-300x207.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Reduce-quality-to-85-percents-for-JPEG-formats1-768x529.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Reduce-quality-to-85-percents-for-JPEG-formats1.png 1481w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The higher the percentage, the better the quality of the photo. For PNG pictures, there are other optimizations you can choose from, such as PNG 8 bit and PNG 24 bit. It would be recommended to save it as a 8-bit png to have a lightly sized pictured.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18196\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-for-Web-as-PNG-optimization1-1024x748.png\" alt=\"Save for Web as PNG optimization\" width=\"1024\" height=\"748\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-for-Web-as-PNG-optimization1-1024x748.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-for-Web-as-PNG-optimization1-300x219.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-for-Web-as-PNG-optimization1-768x561.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-for-Web-as-PNG-optimization1.png 1031w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/affinity.serif.com\/en-gb\/photo\/\" target=\"_blank\" rel=\"nofollow\">Affinity Photo<\/a> is another option for compressing images, which can be similar to Photoshop, but cheaper. In the example below, you can see that the image size is 3.19 MB.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18197\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Affinity-Photo-save-for-web1.png\" alt=\"Affinity Photo save for web option\" width=\"667\" height=\"459\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Affinity-Photo-save-for-web1.png 667w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Affinity-Photo-save-for-web1-300x206.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>For a high export compression efficiency at 55% quality, the size will decrease at 303 kB, which is 10x times lighter.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18198\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Affinity-Photo-save-for-web-compressed1.png\" alt=\"Compressed image with Affinity Photo\" width=\"659\" height=\"459\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Affinity-Photo-save-for-web-compressed1.png 659w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Affinity-Photo-save-for-web-compressed1-300x209.png 300w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>There are additional,\u00a0 easier to use softwares in order to reduce the quality of images, such as Gimp and other small softwares for beginners, such as <a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" target=\"_blank\" rel=\"nofollow\">GIFsicle<\/a>, <a href=\"http:\/\/jpegclub.org\/jpegtran\/\" target=\"_blank\" rel=\"nofollow\">JPEGtran<\/a>, <a href=\"http:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"nofollow\">JPEG Mini<\/a>, <a href=\"http:\/\/optipng.sourceforge.net\/\">OptiPNG<\/a>, <a href=\"https:\/\/pngquant.org\/\" target=\"_blank\" rel=\"nofollow\">pngquant<\/a>, <a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\">FileOptimizer<\/a>, <a href=\"https:\/\/imageoptim.com\/mac\" target=\"_blank\" rel=\"nofollow\">ImageOptim<\/a> (see the picture below).<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18199\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/ImageOptim-Save-for-web.png\" alt=\"ImageOptim Save for web option\" width=\"909\" height=\"392\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/ImageOptim-Save-for-web.png 909w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/ImageOptim-Save-for-web-300x129.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/ImageOptim-Save-for-web-768x331.png 768w\" sizes=\"(max-width: 909px) 100vw, 909px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>If you want to choose the easiest way and not to download any software, there\u2019s the option to use online editing tools for compressing images. TinyPNG and Trimage are two of the most used.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18200\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/PPI-save.png\" alt=\"PPI save option\" width=\"703\" height=\"511\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/PPI-save.png 703w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/PPI-save-300x218.png 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>There is also the <a href=\"https:\/\/pageweight.imgix.com\/%20\" target=\"_blank\" rel=\"nofollow\"><strong>PageWeight<\/strong><\/a> by imgIX, where you can add your website and evaluate the \u201camount\u201d of visual content. For that,<b> <\/b>there are calculated three main metrics for each site, represented using color bars (light, recommended and heavy) as you can see in the screenshot below. In our example, we have a light website content weight, light image weight and a few recommendations for a better image optimization.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18201\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Weight-on-a-site-1024x263.png\" alt=\"Image Weight on a site\" width=\"1024\" height=\"263\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Weight-on-a-site-1024x263.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Weight-on-a-site-300x77.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Weight-on-a-site-768x197.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Weight-on-a-site.png 1278w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Below, we can see an exemplified report and the actions that must be taken:<\/p>\n<ul>\n<li>How images are affecting your page weight;<\/li>\n<li>Your worst performing image;<\/li>\n<li>Your page&#8217;s image breakdown.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18202\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Images-Page-Weight-Report-1024x420.png\" alt=\"Page Weight Report\" width=\"1024\" height=\"420\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Images-Page-Weight-Report-1024x420.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Images-Page-Weight-Report-300x123.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Images-Page-Weight-Report-768x315.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Images-Page-Weight-Report.png 1203w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>For each result, there are some recommended actions we could take to improve the delay of your load page, optimize images to lower the weight.<\/p>\n<div class='cgn-shortcode-anchor' id='3' style='height:50px'>&nbsp;<\/div>\n<h2><strong>3. Save Images at Smaller Resolutions<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>Another image optimization solution is to save pictures at a smaller resolution. Resolutions refer to the number of pixels in an image. The editing software identifies the resolution as the width and height of an image and the number of pixels in that image.<\/p>\n<p>&nbsp;<\/p>\n<blockquote>\n<p>For example, if you have an image that is 500 pixels wide and 281 pixels high (500&#215;281), it will have 140,500 pixels (we multiplied the number of pixels on width and height), which means 141 KP.<\/p>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p>For a larger image, the resolution will be bigger. For example, if we have a high-quality\u00a0image at 1920&#215;1080, the resolution will be 2.07 Megapixels.<\/p>\n<p>&nbsp;<\/p>\n<p>In graphics editing software we have the possibility to choose your image dimensions and resolution, which can be a little bit misleading, because we cannot have images with the same size on different resolutions.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18203\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-images-at-a-smaller-resolutions-1024x616.png\" alt=\"Save images at a smaller resolutions\" width=\"1024\" height=\"616\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-images-at-a-smaller-resolutions-1024x616.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-images-at-a-smaller-resolutions-300x181.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-images-at-a-smaller-resolutions-768x462.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Save-images-at-a-smaller-resolutions.png 1072w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>An image with 500&#215;281 at 72 ppi, 300 ppi and 1000 ppi will look exactly the same and the number of pixels will be 141 KP.<\/p>\n<p>&nbsp;<\/p>\n<p>HTTP Archive performed some interesting analyses regarding the <a href=\"http:\/\/httparchive.org\/interesting.php#bytesperpage\" target=\"_blank\" rel=\"nofollow\"><strong>breakdown of website sized by content type<\/strong><\/a>. The results were incredible. Below you can see data from that report. You can easily see that images have the highest weight on a website.\u00a0<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18204\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Average-bytes-per-page-by-content-type.png\" alt=\"Average bytes per page by content type\" width=\"400\" height=\"225\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Average-bytes-per-page-by-content-type.png 400w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Average-bytes-per-page-by-content-type-300x169.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The sizes presented in the chart are the transfer sizes, therefore the compressed responses are counted to be smaller than the original, uncompressed content.<\/p>\n<p>&nbsp;<\/p>\n<p>Google\u2019s PageSpeed Insights can show you images that need to be compressed and the space you\u2019ll save after that. In the example presented below, you can see the files that need to be compressed. If you compress them, you will save 1.1MiB.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18205\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Optimize-images-for-Page-Speed-Insights-1024x444.png\" alt=\"Optimize images for Page Speed Insights\" width=\"1024\" height=\"444\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Optimize-images-for-Page-Speed-Insights-1024x444.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Optimize-images-for-Page-Speed-Insights-300x130.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Optimize-images-for-Page-Speed-Insights-768x333.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Optimize-images-for-Page-Speed-Insights.png 1084w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/pixlr.com\/editor\/\" target=\"_blank\" rel=\"nofollow\"><strong>Pixlr Online Photo Editor<\/strong><\/a> is a free and online option for lots of editing needs and it can be used for saving images at smaller resolutions. Also, you can use it to apply layers and effects. It has a similar interface as Adobe Photoshop.\u00a0<\/p>\n<div class='cgn-shortcode-anchor' id='4' style='height:50px'>&nbsp;<\/div>\n<h2><strong>4. Resize Images to Scale<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>When you upload images on your website and want to optimize them, it is recommended to resize them to scale, and not let CSS resize them. This method can be applied only if don\u2019t have responsive pages, otherwise it is not relevant. Another thing worth mentioning is the fact that you shouldn\u2019t just scale images without taking any other optimization techniques into account. It works best with the next recommendation, reducing file sizes through plugins.<\/p>\n<p>&nbsp;<\/p>\n<p>Being a WordPress user, you have a lot of advantages. For example, in this case, your images will be resized by default when you add them to the media library. You can easily access that option if you go to <strong>Settings \u00bb Media<\/strong>. The max width of the picture must be close to the width of your site. This way, CSS will not resize your images down to fit inside.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18206\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-media-settings-1024x828.png\" alt=\"wordpress-media-settings\" width=\"1024\" height=\"828\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-media-settings-1024x828.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-media-settings-300x242.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-media-settings-768x621.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-media-settings.png 1626w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Some other recommendations worth mentioning in this case are:<\/p>\n<ul>\n<li>Use CSS3 effects as much as possible;<\/li>\n<li>Save your images at the dimension you want instead of letting HTML or CSS resize them;<\/li>\n<li>Crop the white spaces from images and recreate them by using CSS to provide the padding;<\/li>\n<li>Reduce the bit-depth to a smaller color palette;<\/li>\n<li>Choose web fonts and avoid placing text within images because this way you won\u2019t have problems at scaling and it will save space;<\/li>\n<li>Use raster images (represented by a collection of countless tiny squares\/pixels) only for scenes with lots of shapes and details;<\/li>\n<li>Minify your images with Gzip compression.<\/li>\n<\/ul>\n<div class='cgn-shortcode-anchor' id='5' style='height:50px'>&nbsp;<\/div>\n<h2><strong>5. Reduce the File Size Using Plugins<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>If you\u2019re a WordPress user, you should be glad to find out that there are also automatic ways to compress your images, by using plugins.<\/p>\n<p>&nbsp;<\/p>\n<p>Plugins can work very well as a second step for image compression. Don\u2019t ever use it alone. For example, adding a picture that has 2MB in the library can result in eating up your web hosts disk space really fast. You need to select the plugins that suit you the best and get to work. For each plugin the steps are easy:<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Sign in<\/strong> your WordPress \u00bb <strong>Plugins<\/strong> \u00bb <strong>Add New<\/strong> \u00bb Search for the plugin \u00bb <strong>Install now<\/strong> and wait for a few seconds \u00bb <strong>Activate<\/strong>. Then, if you like you can go to\u00a0the specific Plugin and look through Settings to make sure everything is according to your needs.<\/p>\n<p>&nbsp;<\/p>\n<p>WP Smush, CW Image Optimizer, Insanity, Hammy, SEO Friendly images or PB Responsive Images are just a few examples of plugins that will automatically and losslessly compress your images. All the plugins can be used to optimize images that were previously uploaded or added after the install.<\/p>\n<p>&nbsp;<\/p>\n<p>Below you can see a speed test <a href=\"https:\/\/kinsta.com\/blog\/optimize-images-for-web\/#how-to-optimize-images\" target=\"_blank\" rel=\"nofollow\"><strong>performed by Kinsta<\/strong><\/a> using Pingdom before and after compressing images. For the uncompressed JPEGs, the website had a 1.55 seconds load time and a 14.7 MB total page size.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_18207\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-18207\" class=\"wp-image-18207 size-large\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Uncompressed-JPEGs-1024x324.png\" alt=\"Test for Uncompressed JPEGs\" width=\"1024\" height=\"324\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Uncompressed-JPEGs-1024x324.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Uncompressed-JPEGs-300x95.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Uncompressed-JPEGs-768x243.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Uncompressed-JPEGs.png 1693w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-18207\" class=\"wp-caption-text\">Source: kinsta.com<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>For the compressed JPEGs, load times were decreased by 54.88% and page size was decreased by 80.27%. The results speak for themselves:<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_18208\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-18208\" class=\"wp-image-18208 size-large\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Compressed-JPEGs-1024x325.png\" alt=\"Test for Compressed JPEGs\" width=\"1024\" height=\"325\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Compressed-JPEGs-1024x325.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Compressed-JPEGs-300x95.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Compressed-JPEGs-768x244.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Test-for-Compressed-JPEGs.png 1686w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-18208\" class=\"wp-caption-text\">Source: kinsta.com<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>As a suggestion, you should keep your image file size weight under 120 kb for large images (1920px &amp; up) and even lighter for smaller images. As a general rule, keeping most images around 50 kb is the best.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/twitter.com\/brianleejackson\" target=\"_blank\" rel=\"nofollow\"><strong>Brian Jackson<\/strong><\/a>, Dir. of Inbound Marketing of Kinsta, explained in an article on <a href=\"https:\/\/optimus.keycdn.com\/support\/lossy-vs-lossless\/\" target=\"_blank\" rel=\"nofollow\"><strong>Optimus<\/strong><\/a>, the different types of compression when it comes to reducing the size of your images for the web.<\/p>\n<p>&nbsp;<\/p>\n<table class=\"author-quotes\" width=\"100%\">\n<tbody>\n<tr class=\"author-quote-row\">\n<td class=\"author-text\" colspan=\"2\">Lossy compression refers to compression in which some of the data from the original file (JPEG) is lost. The process is irreversible, once you convert to lossy, you can\u2019t go back. And the more you compress it, the more degradation occurs.<\/td>\n<\/tr>\n<tr>\n<td class=\"author-image\" rowspan=\"2\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-18209\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson.jpg\" alt=\"Brian Jackson\" width=\"46\" height=\"46\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson.jpg 400w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson-150x150.jpg 150w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson-300x300.jpg 300w\" sizes=\"(max-width: 46px) 100vw, 46px\" \/><\/td>\n<td class=\"author-name\">Brian Jackson<\/td>\n<\/tr>\n<tr class=\"author-description-row\">\n<td>\n<p>Dir. of Inbound Marketing <a href=\"http:\/\/kinsta.com\/\" target=\"_blank\" rel=\"nofollow\">Kinsta<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>On the other side,<\/p>\n<table class=\"author-quotes\" width=\"100%\">\n<tbody>\n<tr class=\"author-quote-row\">\n<td class=\"author-text\" colspan=\"2\">Lossless compression refers to compression in which the image is reduced without any quality loss. Usually this is done by removing unnecessary metadata from JPEG and PNG files. RAW, BMP, GIF, and PNG are all lossless image formats.<\/td>\n<\/tr>\n<tr>\n<td class=\"author-image\" rowspan=\"2\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-18209\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson.jpg\" alt=\"Brian Jackson\" width=\"46\" height=\"46\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson.jpg 400w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson-150x150.jpg 150w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Brian-Jackson-300x300.jpg 300w\" sizes=\"(max-width: 46px) 100vw, 46px\" \/><\/td>\n<td class=\"author-name\">Brian Jackson<\/td>\n<\/tr>\n<tr class=\"author-description-row\">\n<td>\n<p>Dir. of Inbound Marketing <a href=\"http:\/\/kinsta.com\/\" target=\"_blank\" rel=\"nofollow\">Kinsta<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class='cgn-shortcode-anchor' id='6' style='height:50px'>&nbsp;<\/div>\n<h2><strong>6. Remove Any Irrelevant or Unneeded Metadata<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>Metadata is the information stored in the image file and usually, it is generated automatically by the device that captured the image.<\/p>\n<p>&nbsp;<\/p>\n<p>Additional metadata, such as EXIF data (a record of all the camera settings) can be added manually using dedicated software or directly on digital cameras. \u00a0All sorts of information &#8211; such as exposure time, aperture settings, camera type, date taken, author and other information &#8211; can be embedded into an image. That information is crucial for the particular websites (photography, for example), while for other websites it might be completely irrelevant.<\/p>\n<p>&nbsp;<\/p>\n<p>Sanitizing your image can be extremely beneficial for improving website\u2019s loading speed time. \u00a0If you take a look at the next picture, you\u2019ll see what kind of information can be embedded into an image. You can easily access that data if you go to the <strong>Properties<\/strong> of the image and then select <strong>Details<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18210\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Metadata-1024x480.png\" alt=\"Image Metadata\" width=\"1024\" height=\"480\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Metadata-1024x480.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Metadata-300x141.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Metadata-768x360.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-Metadata.png 1074w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Choose what to delete and what to keep by easily going into the Value cell for each property and deleting the content. If the file is on Read-only mode, you won\u2019t be able to edit that information. But there are other ways to review it by using the Google Chrome extension, <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/exif-viewer\/mmbhfeiddhndihdjeganjggkmjapkffm?hl=en\" target=\"_blank\" rel=\"nofollow\"><strong>EXIF viewer<\/strong><\/a>, which will be accessible by a tiny camera from your browser. At just one click on the icon you\u2019ll get all the Exif data.<\/p>\n<p>&nbsp;<\/p>\n<p>Photoshop or Adobe Lightroom are other examples that could help you get rid of unneeded EXIF data. Go to<strong> File \u00bb File Info.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18211\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/File-info-Photoshop.png\" alt=\"File info Photoshop\" width=\"640\" height=\"670\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/File-info-Photoshop.png 640w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/File-info-Photoshop-287x300.png 287w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Make sure you keep the data that is important for you and delete the unnecessary image data. This way, you can optimize your images and make it easier for search engines to understand your visual content better.<\/p>\n<div class='cgn-shortcode-anchor' id='7' style='height:50px'>&nbsp;<\/div>\n<h2><strong>7. Name Your Images and Add Alt Descriptions for SEO Success<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>Getting your images easy to read-on by Google and making them friendly will empower SEO success for your website. You can kick your SEO game up a notch by giving your images relevant names and keyword-rich alt text descriptions, without taking advantage of this and practicing keyword stuffing.<\/p>\n<p>&nbsp;<\/p>\n<p>If necessary, use description for your image or caption. You can add these elements, by following the previous step, where you can save the metadata regarding the description, author and name or the file.<\/p>\n<p>&nbsp;<\/p>\n<p>In case you don\u2019t have that information embedded in the file, add it directly when you upload the image on your site. WordPress makes it easier for the user to edit the data they want Google to access.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-18212\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-SEO-optimization-1024x550.png\" alt=\"Image-SEO-optimization\" width=\"1024\" height=\"550\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-SEO-optimization-1024x550.png 1024w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-SEO-optimization-300x161.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-SEO-optimization-768x412.png 768w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Image-SEO-optimization.png 1647w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Search engines crawl both the text on your website and that embedded in your images. Make sure you don\u2019t use generic names, such as DSCN093298.png, Image01.jpg or animation-version1.gif and so on, but rather descriptive file names. Title tags and image alt texts are crucial when a browser can\u2019t render your website properly.<\/p>\n<div class='cgn-shortcode-anchor' id='8' style='height:50px'>&nbsp;<\/div>\n<h2><strong>8. Use SVG Files to Have a Higher Clarity and Lighter Website<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>SVG is used for logos, icons, text, and simple images. The entire content of \u00a0Scalable Vector Graphics is just text. Just take a look at the example on <a href=\"https:\/\/www.w3schools.com\/graphics\/tryit.asp?filename=trysvg_circle\" target=\"_blank\" rel=\"nofollow\"><strong>W3Schools<\/strong><\/a>. On the left side is the content of the file and on the right side is the rendered version of the text, where you could see what it looks like. That\u2019s exactly how the users will see the SVG file. If you try to change the color or dimensions, the quality of the image won\u2019t be damaged, it will be preserved.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18221\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/SVGs-file-tester-in-W3Schools.png\" alt=\"SVGs file tester in W3Schools\" width=\"773\" height=\"430\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/SVGs-file-tester-in-W3Schools.png 773w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/SVGs-file-tester-in-W3Schools-300x167.png 300w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/SVGs-file-tester-in-W3Schools-768x427.png 768w\" sizes=\"(max-width: 773px) 100vw, 773px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Using SVG file is another recommendation for creating better websites. You can still have PNGs and JPEGs on your site, but in addition, it is very good to use vector images whenever possible.<\/p>\n<p>&nbsp;<\/p>\n<p>Ilya Grigorik explained the difference between image vectors and raster images. Just like I\u2019ve mentioned before, raster images are used for complex scenes with irregular shapes and details. Vector images, on the other side, are ideal for images that consist of geometric shapes. \u00a0\u00a0<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_18222\" style=\"width: 493px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-18222\" class=\"size-full wp-image-18222\" src=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Vector-vs-Raster-zoom.png\" alt=\"Vector vs Raster zoom\" width=\"483\" height=\"313\" srcset=\"https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Vector-vs-Raster-zoom.png 483w, https:\/\/cognitiveseo.com\/blog\/wp-content\/uploads\/2018\/03\/Vector-vs-Raster-zoom-300x194.png 300w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><p id=\"caption-attachment-18222\" class=\"wp-caption-text\">Source: developers.google.com<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>Vector images carry great advantages:<\/p>\n<ul>\n<li>They are scalable in both browser and editing tools. You can zoom in and out without affecting the quality;<\/li>\n<li>You don\u2019t lose SEO quality. SVGs are indexed in Google the same way JPEGs and PNGs are;<\/li>\n<li>Usually, SVGs are smaller than JPEGs and PNGs.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>&nbsp;<\/p>\n<p>When someone is surfing the internet, the browser needs to download every file from your website to render it. On a large scale, that means pictures, which can store a lot of irrelevant data and pixels.<\/p>\n<p>&nbsp;<\/p>\n<p>We\u2019ve explored the topic and found lots of embarrassedly simple ways to reduce the image file size by editing the quality settings. We gathered our tips and resources that we followed thoroughly over the years. Saving an image for web, using image optimization tools, removing irrelevant metadata, resizing image to scale are just some examples on how you could optimize your images.<\/p>\n<p>&nbsp;<\/p>\n<p>Use GIF and PNG formats because they are lossless. The desired format is PNG because you can achieve the best compression ratio with a better visual quality.<\/p>\n<p>&nbsp;<\/p>\n<p>In the end, make sure you test your visual content using plugins, tools, and software to ease up the process.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image optimization for SEO purposes is an art you should learn how to master. Since images take a lot of space on your website, it\u2019s only natural to find ways to optimize them not only for better user experience and functionality but also for better ranks and traffic.The big dilemma is finding the balance between [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":18294,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-18192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/posts\/18192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/comments?post=18192"}],"version-history":[{"count":0,"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/posts\/18192\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/media\/18294"}],"wp:attachment":[{"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/media?parent=18192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/categories?post=18192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cognitiveseo.com\/blog\/wp-json\/wp\/v2\/tags?post=18192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}