{"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\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>\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","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\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>At LoadFocus, we&#8217;ve implemented an easy way to monitor the rendering of websites on desktop and mobile devices, this helps you get hints on how to improve the images that you load on your website. Your website&#8217;s or blog&#8217;s speed is a very important metric in ranking in search engines Try to keep that in&#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,316,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-web-vitals","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}]}}