{"id":1247,"date":"2025-04-01T14:02:59","date_gmt":"2025-04-01T14:02:59","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=1247"},"modified":"2025-04-01T14:03:00","modified_gmt":"2025-04-01T14:03:00","slug":"optimize-images-page-speed-google","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/optimize-images-page-speed-google\/","title":{"rendered":"How to Optimize Images for Page Speed (and Google)"},"content":{"rendered":"\n<p>Do you want to know how to optimize images for page speed and Google? Wise thinking, because unoptimized images can slow down your site and impact conversions!&nbsp;&nbsp;<\/p>\n\n\n\n<p>On top of that, did you know that page loading speed was also a key ranking factor? Serving optimized images instead of large ones boosts performance, keeps users engaged, and improves your position in the search engine results!&nbsp;<\/p>\n\n\n\n<p>In this article, you\u2019ll learn the best image optimization techniques that improve page speed so you can take your site to the next level of performance.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83c\udfaf <strong>TL;DR: Image Optimization Highlights<\/strong><br>\u00a0<br><strong>\u2705 <\/strong>The most effective ways to optimize images for page speed are compression, resizing to the right dimensions, conversion to a next-gen format such as WebP or Avif, and lazy loading. Caching, preloading critical images above the\u00a0fold,\u00a0and using a CDN for global image delivery are also optimization techniques to make your images lighter.\u00a0<br><br>\ud83d\udcc8\u00a0GTmetrix &amp; PageSpeed Insights are your go-to tools to analyze performance &amp; get optimization suggestions.\u00a0<br><br><strong>\ud83d\udcca<\/strong> The key metrics you should track are page load speed, page weight, number of HTTP requests, and LCP and CLS performance.\u00a0<br>\u00a0<br><strong>\ud83d\udee0<\/strong> Imagify is the easiest WordPress plugin to compress, resize and convert images to WebP and Avif. Tofurtherr optimize your images and make them load faster, you can also use WP Rocket and RocketCDN.\u00a0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">7 Easy Image Optimization Techniques to Improve Page Speed\u00a0<\/h2>\n\n\n\n<p>If you want to optimize images for page speed, you should compress, resize, and serve them in the right format, implement lazy loading, and make the browser prioritize the images above the fold. Here\u2019s the full list of image optimization techniques to implement:\u00a0<br><br>1. <a href=\"#convert-images\">Convert Images to Next-Gen Formats (WebP of AVIF)\u00a0<\/a><br>2. <a href=\"#compress-images\">Compress Images Without Losing Quality<\/a>\u00a0<br>3. <a href=\"#resize-images\">Resize Images and Set Proper Dimensions\u00a0<\/a><br>4. <a href=\"#lazy-loading\">Implement Lazy Loading\u00a0<\/a><br>5.<a href=\"#caching\"> Enable Caching\u00a0<\/a><br>6. <a href=\"#optimize-lcp\">Optimize Your Largest Contentful Paint\u00a0<\/a><br>7. <a href=\"#cdn\">Use a Content Delivery Network (CDN)\u00a0<\/a><\/p>\n\n\n\n<p>Let\u2019s review each technique so you know how to implement them on your site to boost performance.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"convert-images\">\u00a01. Convert Images to Next-Gen Formats (WebP or AVIF)\u00a0<\/h2>\n\n\n\n<p>Google recommends using <a href=\"https:\/\/imagify.io\/blog\/how-to-convert-images-to-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebP<\/a> or AVIF instead of JPEG or PNG, as these formats provide better compression and faster loading times.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Recommended tools<\/strong>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress plugin: <a href=\"https:\/\/imagify.io\/features\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify<\/a> \u2013 The easiest image optimization plugin that automatically compresses and converts images to WebP. It also supports AVIF if you prefer superior compression.\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"311\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-and-WebP-conversion.png\" alt=\"\" class=\"wp-image-2742\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-and-WebP-conversion.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-and-WebP-conversion-300x117.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-and-WebP-conversion-768x299.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">AVIF and WebP conversion with Imagify \u2013 Source: <a href=\"https:\/\/imagify.io\/features\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Online tool: <a href=\"https:\/\/cloudconvert.com\/webp-converter\" target=\"_blank\" rel=\"noreferrer noopener\">CloudConvert<\/a> \u2013 Drag, drop, convert, and re-upload manually on WordPress.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"495\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-conversion-with-Cloudconvert-Source-Cloudconvert-.png\" alt=\"\" class=\"wp-image-2743\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-conversion-with-Cloudconvert-Source-Cloudconvert-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-conversion-with-Cloudconvert-Source-Cloudconvert--300x186.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/AVIF-conversion-with-Cloudconvert-Source-Cloudconvert--768x475.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">AVIF conversion with Cloudconvert &#8211; Source: <a href=\"https:\/\/cloudconvert.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudconvert<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"compress-images\">2. Compress Images Without Losing Quality&nbsp;<\/h2>\n\n\n\n<p>Image compression reduces file size while maintaining visual quality.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Recommended tools<\/strong>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress plugin: <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify<\/a> uses the <a href=\"https:\/\/imagify.io\/blog\/imagify-smart-compression\/\" target=\"_blank\" rel=\"noreferrer noopener\">Smart Compression<\/a> feature to find the perfect balance between quality and file size. It automatically compresses your images directly from WordPress, so you save tons of time.\u00a0\u00a0<\/li>\n\n\n\n<li><a href=\"https:\/\/www.adobe.com\/products\/photoshop\/free-trial-download.html\" target=\"_blank\" rel=\"noreferrer noopener\">Photoshop<\/a>: steep learning curve and manual upload required)\u00a0<\/li>\n\n\n\n<li>Photopea: a simplified version of Photoshop. The solution is free. On <a href=\"https:\/\/www.photopea.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Photopea<\/a>, you can use the quality cursor when you export the file.\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resize-images\">3. Resize Images and Set Proper Dimensions&nbsp;<\/h2>\n\n\n\n<p>Large images negatively impact performance. Google recommends properly sizing images, especially for mobile.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Recommended tools<\/strong>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mac: Use Preview (<strong>Tools<\/strong> &gt; <strong>Adjust Size<\/strong>).\u00a0<\/li>\n\n\n\n<li>Windows: You can use default design tools such as GIMP.\u00a0\u00a0<\/li>\n\n\n\n<li>More advanced tools: Sketch or Photoshop.\u00a0<\/li>\n<\/ul>\n\n\n\n<p><strong>Setting image dimensions manually<\/strong>\u00a0<\/p>\n\n\n\n<p>Ensure the width and height HTML tags are defined as below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"girl.jpg\" width=\"640\" height=\"360\" alt=\"Girl at the beach\" \/&gt;\u00a0<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lazy-loading\">4. Implement Lazy Loading\u00a0<\/h2>\n\n\n\n<p>Lazy loading prevents images from loading until they are visible on the viewer screen, reducing initial page load time. When a user first lands on a webpage, only the images that are immediately visible on the screen load normally.\u00a0<\/p>\n\n\n\n<p>Images below the fold (not visible yet) have a placeholder and only load when the user scrolls down to view them. This reduces the initial loading time, making the site feel faster and more responsive.&nbsp;<\/p>\n\n\n\n<p><strong>Recommended WordPres plugins<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">LazyLoad by WP Rocket<\/a> (free)<\/li>\n\n\n\n<li><a href=\"https:\/\/en-nz.wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">a3 Lazy Load<\/a> (free)<\/li>\n\n\n\n<li><a href=\"https:\/\/wp-rocket.me\/features\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket<\/a> if you want to have access to a full range of speed optimization features. <\/li>\n<\/ul>\n\n\n\n<p>As an example, here\u2019s how a3 Lazy Load dashboard looks like on WordPress:\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"633\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Adding-lazy-loading-Source-a3-Lazy-Load-.png\" alt=\"\" class=\"wp-image-2744\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Adding-lazy-loading-Source-a3-Lazy-Load-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Adding-lazy-loading-Source-a3-Lazy-Load--300x237.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Adding-lazy-loading-Source-a3-Lazy-Load--768x608.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Adding lazy loading &#8211; Source: <a href=\"https:\/\/en-nz.wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">a3 Lazy Load<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p><strong>Setting lazy loading manually<\/strong>&nbsp;<\/p>\n\n\n\n<p>If you are comfortable with coding and don\u2019t want to use any plugins, simply add the loading=&#8221;lazy&#8221; attribute on your image:\u00a0<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"image.png\" loading=\"lazy\" alt=\"\u2026\" width=\"200\" height=\"200\"&gt;\u00a0<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"caching\">5. Enable Caching&nbsp;<\/h2>\n\n\n\n<p>Caching is a powerful image optimization technique that enhances page speed by reducing the need to download the same images from the server repeatedly. When a user visits a website, their browser downloads and stores images in a temporary storage area (cache).&nbsp;&nbsp;<\/p>\n\n\n\n<p>Since cached images don\u2019t need to be reloaded, this reduces the number of HTTP requests and lowers the burden on the hosting server, resulting in faster load times and improved performance.&nbsp;<\/p>\n\n\n\n<p><strong>Recommended tool<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket<\/a> &#8211; The WP Rocket plugin provides 80% of performance best practices upon activation, including caching, GZIP compression, code minification, optimization of the critical images above the fold, and automatic lazy rendering. Its intuitive interface also enables powerful features such as removing unused CSS, optimizing CSS delivery, loading JavaScript deferred, and delaying JavaScript execution in a few clicks \u2013 without touching any code.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"493\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/WP-Rockets-intuitive-dashboard-to-implement-performance-techniques-easily-\u2013-Source-WP-Rocket.png\" alt=\"\" class=\"wp-image-2745\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/WP-Rockets-intuitive-dashboard-to-implement-performance-techniques-easily-\u2013-Source-WP-Rocket.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/WP-Rockets-intuitive-dashboard-to-implement-performance-techniques-easily-\u2013-Source-WP-Rocket-300x185.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/WP-Rockets-intuitive-dashboard-to-implement-performance-techniques-easily-\u2013-Source-WP-Rocket-768x473.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WP Rocket\u2019s intuitive dashboard to implement performance techniques easily \u2013 Source: <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"optimize-lcp\">6. Optimize Your Largest Contentful Paint Element&nbsp;<\/h2>\n\n\n\n<p>Largest Contentful Paint is one of <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google&#8217;s Core Web Vitals<\/a> and plays a role in SEO rankings. It measures how long it takes for the largest visible element on your page\u2014often an image or video\u2014to load. Slow-loading images can negatively impact your LCP score, so optimizing them should help keep this metric in the green.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"321\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Largest-Contentful-Paint-KPI-Core-Web-Vitals-Source-GTmetrix-.png\" alt=\"\" class=\"wp-image-2746\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Largest-Contentful-Paint-KPI-Core-Web-Vitals-Source-GTmetrix-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Largest-Contentful-Paint-KPI-Core-Web-Vitals-Source-GTmetrix--300x120.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Largest-Contentful-Paint-KPI-Core-Web-Vitals-Source-GTmetrix--768x308.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Largest Contentful Paint KPI (Core Web Vitals) &#8211; Source: <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTmetrix<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83d\udca1<strong>Hint<\/strong>: A good LCP score means your main content loads quickly, benefiting user experience and SEO.\u00a0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Here\u2019s how you can optimize your LCP image to improve page speed:&nbsp;<\/p>\n\n\n\n<p>\u2705 Preload the LCP Image by instructing the browser to load the image early in the page load process.\u00a0<br>\u200b\u200b\u2705 Set the right priority on it to tell the browser to render it first. Use the fetchpriority=&#8221;high&#8221; attribute to indicate that this image is really critical and should be prioritized. \u00a0<br>\u2705 Exclude LCP from lazy loading to not delay image loading. This way, you ensure that the LCP image loads immediately.\u00a0<br>\u00a0<br><strong>Recommended tool<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/wp-rocket.me\/features\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket<\/a> is an excellent tool for optimizing critical content. It comes with a feature called &#8220;Optimize critical images\u201d. When you activate the plugin, it automatically applies the above techniques by:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Preloading the LCP image.\u00a0<\/li>\n\n\n\n<li>Setting the fetchpriority=&#8221;high&#8221; attribute.\u00a0<\/li>\n\n\n\n<li>Excluding the LCP image from lazy loading.\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cdn\">7. Use a Content Delivery Network (CDN)&nbsp;<\/h2>\n\n\n\n<p>A Content Delivery Network (CDN) speeds up image delivery by storing cached copies of your images on multiple servers worldwide. When a user visits your site, the CDN serves images from the closest server instead of the original hosting server. This speeds up image delivery, reducing latency and improving page speed.\u00a0 \u00a0<\/p>\n\n\n\n<p><a href=\"https:\/\/rocketcdn.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">RocketCDN<\/a> handles automatic CDN configuration without managing DNS records and has a <a href=\"https:\/\/wordpress.org\/plugins\/rocketcdn\/\" target=\"_blank\" rel=\"noreferrer noopener\">dedicated WordPress plugin<\/a>.&nbsp;<\/p>\n\n\n\n<p>Now that you know the best ways to optimize images for better page speed, you\u2019re probably eager to put them into action on your site! But before you dive in, take a moment to check out the next section on common image optimization issues. That way, if you run into any challenges, you&#8217;ll have the right solutions at hand to fix them quickly.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting Common Image Optimization Issues &nbsp;<\/h2>\n\n\n\n<p>Sometimes, you start the image optimization process but don\u2019t see any improvement in performance or even in file size. This can happen due to various issues, and here are the most common ones along with quick fixes:&nbsp;<\/p>\n\n\n\n<p><strong>\u274c Images remain large after compression.<\/strong>\u00a0<br><strong>\u2705 <\/strong>Check if your compression settings are too light and use a more aggressive compression level.\u00a0<br><strong>\u2705 <\/strong>Make sure to use <a href=\"https:\/\/imagify.io\/blog\/lossless-vs-lossy-image-compression\/\" target=\"_blank\" rel=\"noreferrer noopener\">lossy compression and not lossless<\/a> for better savings.\u00a0<br><strong>\u2705 <\/strong>Ensure that your images are converted to WebP or AVIF.\u00a0<br>\u00a0<\/p>\n\n\n\n<p><strong>\u274c Blurry or low-quality images.<\/strong>\u00a0<br><strong>\u2705 <\/strong>Avoid excessive compression that could reduce clarity. If you are using Photoshop, decrease the compression level when exporting your image.\u00a0<br><strong>\u2705 <\/strong>Use lossless compression for images that need high quality.\u00a0<br><strong>\u2705 <\/strong>Check that your original image has a high resolution to start on a good base.\u00a0<br>\u00a0<\/p>\n\n\n\n<p><strong>\u274c Lazy loading causes images to load too slowly.<\/strong>\u00a0<br><strong>\u2705 <\/strong>Exclude above-the-fold images (especially LCP) from lazy loading.\u00a0<br>\u00a0<br><strong>\u274c Largest Contentful Paint (LCP) image loads too late.<\/strong>\u00a0<br><strong>\u2705 <\/strong>Preload the LCP image so it loads earlier.\u00a0<br><strong>\u2705 <\/strong>Set fetchpriority=&#8221;high&#8221; to prioritize it and tell the browser to focus on this one.\u00a0<br><strong>\u2705 <\/strong>Make sure it\u2019s not lazy loaded.\u00a0<br>\u00a0<br><strong>\u274c Slow image loading despite CDN use.<\/strong>\u00a0<br><strong>\u2705 <\/strong>Check in your settings if CDN caching is properly enabled.\u00a0<br><strong>\u2705 <\/strong>Verify that the correct image format is served based on the user\u2019s device.\u00a0<br>\u00a0<br><strong>\u274c Page speed tools like GTmetrix still flag image optimization issues.<\/strong>\u00a0<br><strong>\u2705 <\/strong>Clear your browser cache and start a new incognito window.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>\ud83d\udca1Here are the three golden rules to check after image optimization:\u00a0<\/strong>\u00a0<br><br>1. Always verify that your image file size is indeed smaller. \u00a0<br>2. Go to the front end to check that the image quality is still OK.\u00a0<br>3. Run an audit on PageSpeed Insights or GTmetrix to check if the flagged issues are gone.\u00a0\u00a0\u00a0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding the Impact of Images on Page Speed \u00a0<\/h2>\n\n\n\n<p>According to Google, optimizing images for page speed is important for rankings and user experience. Image optimization should be part of your entire marketing strategy if you want to rank well, boost conversion, and keep customers engaged.\u00a0\u00a0<\/p>\n\n\n\n<p>Did you know that a large volume of <a href=\"https:\/\/imagify.io\/blog\/reasons-images-slow-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\">unoptimized images is usually the culprit behind a slow website<\/a>? Here\u2019s how images impact performance:&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Images Are One of the Most Consuming Resources on a Web Page\u00a0<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\"><\/ol>\n\n\n\n<p>Large images can make your website slow and upset your visitors, who expect to access the information as soon as possible. As shown in the figure below, along with JavaScript, images are the dominant consuming resource in a web page:&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"496\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Page-weight-by-content-type-\u2013-Source-almanac-HTTP-archive-.png\" alt=\"\" class=\"wp-image-2747\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Page-weight-by-content-type-\u2013-Source-almanac-HTTP-archive-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Page-weight-by-content-type-\u2013-Source-almanac-HTTP-archive--300x186.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Page-weight-by-content-type-\u2013-Source-almanac-HTTP-archive--768x476.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Page weight by content type \u2013 Source: <a href=\"https:\/\/almanac.httparchive.org\/en\/2020\/page-weight\" target=\"_blank\" rel=\"noreferrer noopener\">almanac HTTP archive<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p>Images are a great source of page weight and make up the largest number of HTTP requests on your homepage.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"467\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Median-home-page-weight-by-content-type-\u2013-Source-almanac-HTTP-archiv.png\" alt=\"\" class=\"wp-image-2748\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Median-home-page-weight-by-content-type-\u2013-Source-almanac-HTTP-archiv.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Median-home-page-weight-by-content-type-\u2013-Source-almanac-HTTP-archiv-300x175.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Median-home-page-weight-by-content-type-\u2013-Source-almanac-HTTP-archiv-768x448.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Median home page weight by content type \u2013 Source: <a href=\"https:\/\/almanac.httparchive.org\/en\/2024\/page-weight\" target=\"_blank\" rel=\"noreferrer noopener\">almanac HTTP archive<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. HTTP Requests Are Mainly Coming from Images (and JavaScript)\u00a0<\/h3>\n\n\n\n<p>Additionally, when a visitor lands on your site, your browser has to request and download some files to render the content. An HTTP request is made to the server for every single file, including images.\u00a0\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/HTTP-Requests-explained-\u2013-Source-WP-Rocket-.png\" alt=\"\" class=\"wp-image-2749\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/HTTP-Requests-explained-\u2013-Source-WP-Rocket-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/HTTP-Requests-explained-\u2013-Source-WP-Rocket--300x225.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/HTTP-Requests-explained-\u2013-Source-WP-Rocket--768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">HTTP Requests explained \u2013 Source: <a href=\"https:\/\/wp-rocket.me\/blog\/reduce-http-requests-speed-wordpress-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p>The heavier resources you have, the more requests your browser will need to make. Optimizing your images and making them smaller will reduce the size of the HTTP requests, resulting in a faster-loading site.\u00a0\u00a0<br>It\u2019s no surprise that in 2024, HTTP requests were mainly coming from JavaScript and\u2026 images.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"479\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Requests-by-content-type-\u2013-Source-almanac-HTTP-archive.png\" alt=\"\" class=\"wp-image-2750\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Requests-by-content-type-\u2013-Source-almanac-HTTP-archive.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Requests-by-content-type-\u2013-Source-almanac-HTTP-archive-300x180.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Requests-by-content-type-\u2013-Source-almanac-HTTP-archive-768x460.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Requests by content type \u2013 Source: <a href=\"https:\/\/almanac.httparchive.org\/en\/2024\/page-weight\" target=\"_blank\" rel=\"noreferrer noopener\">almanac HTTP archive<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Unoptimized Images Impact Core Web Vitals\u00a0<\/h3>\n\n\n\n<p>Images influence Core Web Vitals, especially Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS)\u2014two key metrics that measure page speed and visual stability.&nbsp;<\/p>\n\n\n\n<p>Core Web Vitals are a set of performance metrics introduced by Google to evaluate user experience. They are part of Google\u2019s ranking algorithm and can impact SEO and search visibility.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>LCP (Largest Contentful Paint)<\/strong> measures how long it takes for the largest visible element\u2014often an image or video\u2014to load. If images are not optimized, they can delay LCP and negatively affect page speed.\u00a0<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83d\udca1 <strong>Hint<\/strong>: If you follow our seven recommendations, improving LCP becomes much easier. Use modern image formats like WebP and AVIF, serve responsive images to save bandwidth, preload and set fetchpriority for key images, and, of course, compress them.\u00a0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CLS (Cumulative Layout Shift)<\/strong> tracks unexpected visual shifts on a page. If images don\u2019t have defined width and height attributes, the browser doesn\u2019t allocate space properly, causing content to move as the images load.\u00a0<br>\u00a0<\/li>\n<\/ul>\n\n\n\n<p>If you want to rank well on Google and provide a great user experience, you need to focus on your Core Web Vitals\u2014and image optimization is a great starting point.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Measuring the Impact of Image Optimization on Page Speed&nbsp;&nbsp;<\/h2>\n\n\n\n<p>How can you tell if your image optimization efforts are truly improving your site\u2019s performance? The best way is to measure key performance indicators (KPIs) before and after optimization. To do so, you can use <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTmetrix<\/a> and <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a>, two performance tools powered by Lighthouse, which evaluate loading speed, Core Web Vitals, and other key metrics.&nbsp;<\/p>\n\n\n\n<p>Follow this seven-step approach to track the impact of image optimization effectively.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Step 1<\/strong>. Analyze Your Current Site with GTmetrix (Before Optimization)\u00a0<\/p>\n\n\n\n<p>Before optimizing your images, run a test on GTmetrix and take note of the following KPIs.&nbsp;<\/p>\n\n\n\n<p><strong>Step 2<\/strong>. Check the Fully Loaded Time\u00a0<\/p>\n\n\n\n<p>Measure how long it takes for your page to load completely. Compare the results before and after optimization to see if your images improve your page speed.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"543\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix-.png\" alt=\"\" class=\"wp-image-2751\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix--300x204.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix--768x521.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Fully loaded time to compare before and after image optimization &#8211; Source: <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTmetrix<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 3<\/strong>. Check the Largest Contentful Paint (LCP)\u00a0<\/p>\n\n\n\n<p>LCP measures how long it takes for the largest visible element on your page\u2014often an image or video\u2014to load. Since LCP is a Core Web Vital and affects SEO, optimizing your images should help reduce this time. Compare your LCP score before and after optimization to ensure improvements in loading speed.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"321\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Web-Vitals-to-compare-before-and-after-image-optimization-Source-GTmetrix-.png\" alt=\"\" class=\"wp-image-2752\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Web-Vitals-to-compare-before-and-after-image-optimization-Source-GTmetrix-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Web-Vitals-to-compare-before-and-after-image-optimization-Source-GTmetrix--300x120.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Web-Vitals-to-compare-before-and-after-image-optimization-Source-GTmetrix--768x308.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Web Vitals to compare before and after image optimization &#8211; Source: <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTmetrix<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 4<\/strong>. Check the Cumulative Layout Shift (CLS)\u00a0<\/p>\n\n\n\n<p>CSLS measures how much your page layout shifts unexpectedly while loading. If images lack defined width and height attributes, they can cause elements to move, negatively affecting user experience. After optimization, check your CLS score to confirm that your page\u2019s stability is better.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Step 5<\/strong>. Check the Number of HTTP Requests\u00a0\u00a0<\/p>\n\n\n\n<p>Each image on your site generates an HTTP request, and too many requests can slow down loading times. Compare the number of requests before and after optimization to ensure that your images are properly optimized. The HTTP requests made by images should decrease after optimization.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"548\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Total-page-requests-to-compare-before-and-after-image-optimization-Source-GTmetrix-.png\" alt=\"\" class=\"wp-image-2753\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Total-page-requests-to-compare-before-and-after-image-optimization-Source-GTmetrix-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Total-page-requests-to-compare-before-and-after-image-optimization-Source-GTmetrix--300x206.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Total-page-requests-to-compare-before-and-after-image-optimization-Source-GTmetrix--768x526.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Total page requests to compare before and after image optimization &#8211; Source: <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTmetrix<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 6<\/strong>. Check the Page Size and the Weight Occupied by Images\u00a0<\/p>\n\n\n\n<p>Images often account for a significant portion of a page\u2019s total weight. Check how much space they take up before and after optimization to confirm that compression and format changes have reduced their impact.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"543\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix-1.png\" alt=\"\" class=\"wp-image-2754\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix-1.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix-1-300x204.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Fully-loaded-time-to-compare-before-and-after-image-optimization-Source-GTmetrix-1-768x521.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Total page size to compare before and after image optimization &#8211; Source: <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTmetrix<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 7<\/strong>. Run a New Performance Report on PageSpeed Insights\u00a0<\/p>\n\n\n\n<p>In addition to GTmetrix, use <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a> (PSI) to analyze your site\u2019s performance. Before optimizing, note any image-related warnings, such as oversized images or unoptimized formats, as shown below:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"389\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Images-related-issues-\u2013-Source-PageSpeed-Insights.png\" alt=\"\" class=\"wp-image-2755\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Images-related-issues-\u2013-Source-PageSpeed-Insights.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Images-related-issues-\u2013-Source-PageSpeed-Insights-300x146.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Images-related-issues-\u2013-Source-PageSpeed-Insights-768x373.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Images-related issues \u2013 Source: <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a><\/figcaption><\/figure>\n\n\n\n<p>If your optimization is successful, these red flags should move into the &#8220;Passed Audits&#8221; section.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optimizing Images to Improve Speed: a Case Study&nbsp;&nbsp;&nbsp;<\/h2>\n\n\n\n<p>To measure the real impact of image optimization on page speed, we ran a performance test before and after optimizing images. We built a test homepage containing unoptimized images and sections such as \u201cAbout Us,\u201d \u201cWhat we do,\u201d \u201cServices,\u201d \u201cTestimonials,\u201d and \u201cPricing Table.\u201d&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"1024\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/My-test-site-extract--640x1024.png\" alt=\"\" class=\"wp-image-2756\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/My-test-site-extract--640x1024.png 640w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/My-test-site-extract--188x300.png 188w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/My-test-site-extract--768x1229.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/My-test-site-extract-.png 800w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption class=\"wp-element-caption\">My test site (extract)\u00a0<\/figcaption><\/figure>\n\n\n\n<p>Test Conditions&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Device:<\/strong> mobile, iPhone13 (4G)\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Server location:<\/strong> Paris\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Testing tool:<\/strong> GTmetrix\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Optimization tool:<\/strong> <a href=\"https:\/\/imagify.io\/features\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify\u00a0<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>KPIs used: <\/strong>image file size, fully loaded time, Largest Contentful Paint, Page weight, HTTP requests, and the recommendations audit area called \u201cTop Issues.\u201d\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Performance Results&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Let\u2019s go over each KPI before and after optimization so you can see how Imagify helps for page seed and overall performance. Let\u2019s get to the data!&nbsp;<\/p>\n\n\n\n<p><strong>#1 Image File Size\u00a0<\/strong><\/p>\n\n\n\n<p>We used Imagify to compress images and convert them to WebP. Here are the optimization results on the images&#8217; file sizes:\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Image file size before optimization\u00a0\u00a0<\/strong><\/td><td><strong>Image file size after optimization with Imagify\u00a0<\/strong><\/td><td><strong>% saved thanks to Imagify\u00a0<\/strong><\/td><\/tr><tr><td>535 KB&nbsp;<\/td><td>230KB&nbsp;<\/td><td>58%&nbsp;<\/td><\/tr><tr><td>658 KB&nbsp;<\/td><td>158 KB&nbsp;<\/td><td>76%&nbsp;<\/td><\/tr><tr><td>950KB&nbsp;<\/td><td>211KB&nbsp;<\/td><td>78%&nbsp;<\/td><\/tr><tr><td>1MB&nbsp;<\/td><td>252KB&nbsp;<\/td><td>75%&nbsp;<\/td><\/tr><tr><td>1.11MB&nbsp;<\/td><td>283 KB&nbsp;<\/td><td>75%&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Imagify makes the optimization and the WebP conversion very easy and convenient.&nbsp; Everything was automatic and done from the WordPress dashboard:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"435\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Compressed-images-and-WebP-conversion-in-one-click-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2757\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Compressed-images-and-WebP-conversion-in-one-click-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Compressed-images-and-WebP-conversion-in-one-click-Source-Imagify--300x163.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Compressed-images-and-WebP-conversion-in-one-click-Source-Imagify--768x418.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Compressed images and WebP conversion in one click &#8211; Source: <a href=\"http:\/\/imagify.io\/features\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify<\/a>\u00a0<\/figcaption><\/figure>\n\n\n\n<p>It\u2019s worth mentioning that the file sizes are smaller and served in WebP, and the quality is intact.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"628\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Original-file-vs-optimized-one-with-Imagify-quality-untouched-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2758\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Original-file-vs-optimized-one-with-Imagify-quality-untouched-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Original-file-vs-optimized-one-with-Imagify-quality-untouched-Source-Imagify--300x236.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Original-file-vs-optimized-one-with-Imagify-quality-untouched-Source-Imagify--768x603.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Original file vs optimized one with Imagify: quality untouched &#8211; Source: <a href=\"https:\/\/imagify.io\/features\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify<\/a>\u00a0<br>\u00a0<\/figcaption><\/figure>\n\n\n\n<p><strong>#2 Performance KPIs From GTmetrix\u00a0<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>KPI<\/strong>&nbsp;<\/td><td><strong>Before Image Optimization<\/strong>&nbsp;<\/td><td><strong>After Image Optimization with Imagify<\/strong>&nbsp;<\/td><\/tr><tr><td><strong>Fully Loaded Time<\/strong>&nbsp;<\/td><td>3.6 s&nbsp;<\/td><td>2.6 s&nbsp;&nbsp;<\/td><\/tr><tr><td><strong>Largest Contentful Paint (LCP)<\/strong>&nbsp;<\/td><td>2.0 s&nbsp;<\/td><td>1.8 s&nbsp;<\/td><\/tr><tr><td><strong>Page Weight<\/strong>&nbsp;<\/td><td>2.20 MB&nbsp;<\/td><td>1.02 MB&nbsp;<\/td><\/tr><tr><td><strong>HTTP Requests<\/strong>&nbsp;<\/td><td>13&nbsp;<\/td><td>12&nbsp;<\/td><\/tr><tr><td><strong>% HTTP Requests Triggered by Images<\/strong>&nbsp;<\/td><td>31%&nbsp;<\/td><td>25%&nbsp;<\/td><\/tr><tr><td><strong>GTmetrix Audit Issues<\/strong>\u00a0<\/td><td>Image-related issues detected\u00a0<br><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"173\" class=\"wp-image-2770\" style=\"width: 150px\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Image-related-issues-detected-table.png\" alt=\"\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Image-related-issues-detected-table.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Image-related-issues-detected-table-300x65.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/03\/Image-related-issues-detected-table-768x166.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/>\u00a0\u00a0<\/td><td>No image-related issues&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Key Takeaways&nbsp;<\/h3>\n\n\n\n<p>After optimizing images with Imagify, we observed the following improvements:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The image size is significantly reduced, with an average of 70% savings<\/strong> while maintaining image quality.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A faster page load time<\/strong>, improving from <strong>3.6 s to 2.6 s<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A lighter page weight<\/strong>, reduced from <strong>2.20 MB to 1.02 MB<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fewer HTTP requests<\/strong>, decreasing from <strong>13 to 12<\/strong>, reduced server load and improved speed.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An <strong>Improved Largest Contentful Paint (LCP)<\/strong>, meaning the main content became visible <strong>faster<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GTmetrix confirmed that previous image-related warnings were resolved. Imagify fixed the \u201c<a href=\"https:\/\/imagify.io\/blog\/serve-next-gen-formats-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Serve images in next-gen formats<\/a>\u201d and the \u201c<a href=\"https:\/\/imagify.io\/blog\/efficiently-encode-images-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Efficiently <\/a><a href=\"https:\/\/imagify.io\/blog\/efficiently-encode-images-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">encode<\/a><a href=\"https:\/\/imagify.io\/blog\/efficiently-encode-images-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"> images<\/a>\u201d warnings.\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping up&nbsp;&nbsp;<\/h2>\n\n\n\n<p>Now that you\u2019ve learned how image optimization impacts page speed and performance, you\u2019re ready to take action to improve page speed! By following these best practices, you can significantly improve load times, user experience, and SEO rankings.&nbsp;<\/p>\n\n\n\n<p>You\u2019re not alone in this process\u2014powerful tools like Imagify can do the heavy lifting for you. With Imagify, you can:\u00a0<br><br>\u2705 Compress images automatically without losing quality,\u00a0<br>\u2705 Convert images to WebP and AVIF for faster delivery,\u00a0<br>\u2705 Optimize images in bulk, saving you time and effort.\u00a0<\/p>\n\n\n\n<p><em>For even better results, combine Imagify with WP Rocket to easily handle caching, lazy loading, and more advanced performance optimization.<\/em>&nbsp;<\/p>\n\n\n\n<p>Try Imagify for free\u2014compress up to <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noreferrer noopener\">200 images per month with the plugin<\/a> or <a href=\"https:\/\/imagify.io\/optimizer\/\" target=\"_blank\" rel=\"noreferrer noopener\">test the free online tool to reduce file sizes<\/a> without installing a plugin. Start optimizing your images today and boost your website&#8217;s page speed!&nbsp;<\/p>\n<a href=\"https:\/\/imagify.io\/optimizer\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter bottom-blog-post-cta\" src=\"https:\/\/imagify.io\/blog\/wp-content\/themes\/imagify\/assets\/img\/gwic-1.png\" alt=\"Imagify, decrease the size of your images, increase the speed of your website: try it for free\" width=\"690\" height=\"190\"><\/a>","protected":false},"excerpt":{"rendered":"<p>Wondering how to optimize images for page speed and Google? Read the article and learn the best image optimization techniques you need to implement right away.<\/p>\n","protected":false},"author":8,"featured_media":1273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimization"],"_links":{"self":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/1247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/comments?post=1247"}],"version-history":[{"count":18,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/1247\/revisions"}],"predecessor-version":[{"id":2772,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/1247\/revisions\/2772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media\/1273"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media?parent=1247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/categories?post=1247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/tags?post=1247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}