{"id":2310,"date":"2021-12-13T13:07:28","date_gmt":"2021-12-13T13:07:28","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=2310"},"modified":"2023-09-03T14:09:47","modified_gmt":"2023-09-03T14:09:47","slug":"why-you-should-start-improving-the-images-on-your-website","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2021\/12\/why-you-should-start-improving-the-images-on-your-website","title":{"rendered":"Why you should start improving the images on your website"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><!-- pn-tldr --><h2>Key takeaways<\/h2><ul><li>Images are usually the largest thing on a page and the easiest to fix.<\/li><li>Modern formats and correct dimensions cut weight without visible quality loss.<\/li><li>Set width and height so late-loading images do not shift the layout.<\/li><\/ul><!-- \/pn-tldr -->\n<p class=\"lead\">At <a href=\"https:\/\/loadfocus.com\/page-speed-monitoring\">LoadFocus<\/a>, we&#8217;ve implemented an easy way to <a href=\"https:\/\/loadfocus.com\/page-speed-monitoring\" target=\"_blank\" rel=\"noreferrer noopener\">monitor the rendering of websites<\/a> on desktop and mobile devices, this helps you get hints on how to improve the images that you load on your website.<\/p>\n\n\n\n<p>Your website&#8217;s or blog&#8217;s speed is a very important metric in ranking in search engines<\/p>\n\n\n\n<p>Try to keep that in mind when developing new features and adding fancy images and animatios to your pages.<\/p>\n\n\n\n<p>Here are the most important image optimization hacks and best practices to <a href=\"https:\/\/loadfocus.com\/used-by\/seo-experts\" target=\"_blank\" rel=\"noreferrer noopener\">improve the SEO rankings<\/a> for your web pages:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Lazy load your offscreen and hidden images <\/strong>(don&#8217;t load all images at once when your page renders, instead load them once the user starts scrolling your website and the images get in the view).<\/li><li><strong>Adapt the sizes of your images<\/strong> (don&#8217;t use super large images if it&#8217;s not needed, try to resize the images or crop them).<\/li><li><strong>Compress images to reduce file size<\/strong> with keeping the clarity and detail needed (balance between the lowest file size and an acceptable quality).<\/li><li><strong>Use modern image formats<\/strong> (AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts).<\/li><li><strong>Use SVGs where possible<\/strong> (SVGs are automatically scalable and are smaller in file size than PNGs or JPGs which can result in faster load times).<\/li><li><strong>Use lossy compression where possible<\/strong> (with lossy compression you can obtain much higher compression ratios than is possible with lossless compression).<\/li><li><strong>Host your images on a CDN<\/strong> (Content Delivery Networks are networks located all over the world with powerful web servers that take care of loading your site\u2019s images to the visitor using the closest geographically server).<\/li><li><strong>Serve images with an efficient cache policy<\/strong> (either using a CDN or from within your website, caching images reduces the load on your server).<\/li><li><strong>Set an explicit width and height on image elements<\/strong> to reduce layout shifts and improve CLS (Cumulative Layout Shift &#8211; one of the most important Core Web Vital metric).<\/li><li><strong>Add descriptive texts to your images<\/strong> (make use of the <strong>alt<\/strong> attribute to add descriptions to help search engines understand your content).<\/li><li><strong>Monitor <a href=\"https:\/\/loadfocus.com\/blog\/2020\/12\/what-is-google-lighthouse\/\" title=\"What is Google Lighthouse?\">Largest Contentful Paint<\/a> metric<\/strong> (<strong>LCP<\/strong> measures when the largest content element in the viewport is rendered to the screen).<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/loadfocus.com\/pricing\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"360\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/sign-up.jpeg\" alt=\"\" class=\"wp-image-2301\" srcset=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/sign-up.jpeg 870w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/sign-up-800x331.jpeg 800w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/sign-up-600x248.jpeg 600w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/sign-up-768x318.jpeg 768w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><em>Written by&nbsp;<a href=\"https:\/\/coursinator.com\/instructor\/bogdan-vazzolla\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"broken_link\">Bogdan&nbsp;Vazzolla<\/a>.<\/em><\/p>\n\n\n\n<p><em><a href=\"https:\/\/loadfocus.com\/\">LoadFocus<\/a>&nbsp;is a cloud testing platform,&nbsp;a&nbsp;<a href=\"https:\/\/loadfocus.com\/load-testing\" target=\"_blank\" rel=\"noreferrer noopener\">load and stress testing tool<\/a>&nbsp;which provides the infrastructure to run tests with thousands of concurrent users, from&nbsp;<a href=\"https:\/\/loadfocus.com\/locations\">multiple cloud locations<\/a>, in less than a few minutes, keep history of the results, compare different runs to inspect performance improvements or performance degradation.<\/em>&nbsp;<em>It also supports running&nbsp;<a href=\"https:\/\/loadfocus.com\/jmeter-load-testing\" target=\"_blank\" rel=\"noreferrer noopener\">JMeter load tests from the cloud<\/a><\/em>&nbsp;and&nbsp;<a href=\"https:\/\/loadfocus.com\/page-speed-monitoring\">monitoring and audit web and mobile performance<\/a>.<\/p>\n<!-- pn-faq --><h2>Frequently Asked Questions<\/h2><h3>Why start with images?<\/h3><p>They are usually the largest thing on the page and the easiest to fix. The gain per hour of effort is higher than almost any code change.<\/p><h3>What actually reduces the weight?<\/h3><p>Modern formats and correct dimensions. Serving an image scaled to the size it is displayed at, in a current format, cuts the bytes substantially with no visible quality loss.<\/p><h3>Anything else worth doing?<\/h3><p>Set width and height attributes. It costs nothing and stops late-loading images shifting the layout, which is a large part of a poor CLS score.<\/p><!-- \/pn-faq --><!-- pn-related-reading --><h2>Related reading<\/h2><ul><li><a href=\"https:\/\/loadfocus.com\/blog\/2024\/07\/from-slow-to-superfast-how-to-improve-your-website-speed-in-10-easy-steps\">Improve Your Website Speed in 10 Easy Steps<\/a><\/li><li><a href=\"https:\/\/loadfocus.com\/blog\/2024\/08\/speed-up-wordpress-site\">How to Speed Up Your WordPress Site in 2026 (Ultimate Guide)<\/a><\/li><li><a href=\"https:\/\/loadfocus.com\/blog\/2023\/09\/fix-slow-loading-pages\">How to Fix Slow Loading Pages: 6 Practical Tips<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Key takeaways Images are usually the largest thing on a page and the easiest to fix. Modern formats and correct dimensions cut weight without visible quality loss. Set width and height so late-loading images do not shift the layout. At LoadFocus, we&#8217;ve implemented an easy way to monitor the rendering of websites on desktop and&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/2021\/12\/why-you-should-start-improving-the-images-on-your-website\" class=\"more-link\" title=\"Read Why you should start improving the images on your website\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,104],"tags":[375,374,373,372],"class_list":["post-2310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test-automation","category-website-speed-testing","tag-image-optimisation-best-practices","tag-image-optimization-hacks","tag-improve-images","tag-optimize-images"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/2310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/comments?post=2310"}],"version-history":[{"count":1,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/2310\/revisions"}],"predecessor-version":[{"id":2759,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/2310\/revisions\/2759"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media?parent=2310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/categories?post=2310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/tags?post=2310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}