https://www.debugbear.com/assets/js/07279073.772c644d.js

1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[1772],{47424:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>d,contentTitle:()=>r,default:()=>m,frontMatter:()=>t,metadata:()=>c,toc:()=>l});var s=n(74848),a=n(28453),o=n(78779);const t={title:"How To Efficiently Encode Images On Your Website",date:new Date("2025-03-19T00:00:00.000Z"),description:"Learn how image encoding can improve your website\u2019s performance by reducing load times. This article explores different types of image compression and their impact on page speed, helping you deliver high-quality content more efficiently to your visitors.",image:"https://www.debugbear.com/dimg/3a68dbcb2097e5ddf1eb46f257be3ccc.png",authors:"conormccarthy"},r=void 0,c={permalink:"/blog/efficiently-encode-images",source:"@site/blog/efficiently-encode-images.md",title:"How To Efficiently Encode Images On Your Website",description:"Learn how image encoding can improve your website\u2019s performance by reducing load times. This article explores different types of image compression and their impact on page speed, helping you deliver high-quality content more efficiently to your visitors.",date:"2025-03-19T00:00:00.000Z",tags:[],readingTime:4.385,hasTruncateMarker:!0,authors:[{name:"Conor McCarthy",title:"Customer Support Engineer at DebugBear",imageURL:"https://www.debugbear.com/dimg/dba8ab903df82f2f9d8558ccbd3a61ae.jpeg",key:"conormccarthy"}],frontMatter:{title:"How To Efficiently Encode Images On Your Website",date:"2025-03-19T00:00:00.000Z",description:"Learn how image encoding can improve your website\u2019s performance by reducing load times. This article explores different types of image compression and their impact on page speed, helping you deliver high-quality content more efficiently to your visitors.",image:"https://www.debugbear.com/dimg/3a68dbcb2097e5ddf1eb46f257be3ccc.png",authors:"conormccarthy"},unlisted:!1,lastUpdatedAt:1788186731e3,prevItem:{title:"Cookie Consent Banners, Page Speed, And Core Web Vitals",permalink:"/blog/cookie-consent-banner-performance"},nextItem:{title:"Legacy JavaScript: How To Avoid Serving It To Modern Browsers",permalink:"/blog/avoid-legacy-js"}},d={authorsImageUrls:[void 0]},l=[{value:"What is efficient image encoding?",id:"what-is-efficient-image-encoding",level:2},{value:"Lossy compression",id:"lossy-compression",level:3},{value:"Lossless compression",id:"lossless-compression",level:3},{value:"Efficient and inefficient image compression",id:"efficient-and-inefficient-image-compression",level:3},{value:"Why does efficient image encoding matter?",id:"why-does-efficient-image-encoding-matter",level:3},{value:"How to check if images are encoded efficiently",id:"how-to-check-if-images-are-encoded-efficiently",level:2},{value:"How to improve image encoding",id:"how-to-improve-image-encoding",level:2},{value:"Using an image hosting services",id:"using-an-image-hosting-services",level:3},{value:"Manually compressing images",id:"manually-compressing-images",level:3},{value:"Monitor image page weight and performance impact",id:"monitor-image-page-weight-and-performance-impact",level:2}];function g(e){const i={a:"a",admonition:"admonition",h2:"h2",h3:"h3",img:"img",p:"p",strong:"strong",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(i.p,{children:["Encoding images with an ",(0,s.jsx)(i.a,{href:"/blog/image-formats",children:"efficient image format"})," at the right quality level can help you ",(0,s.jsx)(i.a,{href:"https://www.debugbear.com/blog/improve-image-delivery",children:"improve image delivery"})," and the overall ",(0,s.jsx)(i.a,{href:"https://www.debugbear.com/blog/improve-website-performance",children:"performance of your website"}),"."]}),"\n",(0,s.jsx)(i.p,{children:"In this article, we will explore image compression types and their effect on page speed, showing how optimized images can deliver high quality content sooner to the visitor."}),"\n",(0,s.jsx)(i.admonition,{type:"tip",children:(0,s.jsxs)(i.p,{children:["For a complete overview of image optimization techniques, see our guide on ",(0,s.jsx)(i.a,{href:"/blog/image-optimization-web-performance",children:"optimizing images for web performance"}),"."]})}),"\n",(0,s.jsx)(i.h2,{id:"what-is-efficient-image-encoding",children:"What is efficie

1nt image encoding?"}),"\n",(0,s.jsx)(i.p,{children:"Image encoding minimizes file size while maintaining visual quality by compressing the image. Encoding images can help performance by reducing load times and bandwidth usage. There are two forms of image compression to be aware of: lossy and lossless."}),"\n",(0,s.jsx)(i.h3,{id:"lossy-compression",children:"Lossy compression"}),"\n",(0,s.jsx)(i.p,{children:"Lossy compression reduces file size by permanently removing some image data, which may result in reduced quality. JPEG is a lossy image format."}),"\n",(0,s.jsx)(i.h3,{id:"lossless-compression",children:"Lossless compression"}),"\n",(0,s.jsx)(i.p,{children:"Lossless compression reduces file size without losing image quality. The original image can be perfectly restored after decompression. PNG is a lossless image format."}),"\n",(0,s.jsx)(i.p,{children:"Understanding lossy and lossless can help you decide which encoding process is best for your website. If your website shares high quality art, then lossless may be preferred. However, if delivering a fast experience for your visitors is a priority then lossy may be the most suitable option."}),"\n",(0,s.jsx)(i.p,{children:"Modern image formats like WebP and AVIF offer a balance between quality and compression, providing even better performance for web optimization."}),"\n",(0,s.jsx)(i.h3,{id:"efficient-and-inefficient-image-compression",children:"Efficient and inefficient image compression"}),"\n",(0,s.jsx)(i.p,{children:"When compressing images, the goal is to improve user experience by providing a faster page load. However, caution should be practiced as to compress images efficiently in order to not sacrifice image quality. In the comparison below, we can see an original JPEG image with the file size of 734 kb."}),"\n",(0,s.jsx)(i.p,{children:"When compressing the image to 85%, the file size is now 617kb. This can be considered as efficient encoding with over 100 kb saved without compromising the image quality."}),"\n",(0,s.jsx)(i.p,{children:"However, when compressing more aggressively to 5%, the size savings come with an obvious deterioration in image quality."}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/ecd888e791b6d6e8cd47456f2477b828.png",alt:"Efficient and inefficient image compression examples"})}),"\n",(0,s.jsx)(i.h3,{id:"why-does-efficient-image-encoding-matter",children:"Why does efficient image encoding matter?"}),"\n",(0,s.jsxs)(i.p,{children:["Efficient image encoding allows the browser to download and deliver images faster to the user, improving user experience and also ",(0,s.jsx)(i.a,{href:"https://www.debugbear.com/docs/metrics/largest-contentful-paint",children:"Largest Contentful Paint (LCP)"}),"."]}),"\n",(0,s.jsxs)(i.p,{children:["In the request waterfall below we have a demo page which has an uncompressed LCP image. By viewing the ",(0,s.jsx)(i.a,{href:"https://www.debugbear.com/docs/metrics/largest-contentful-paint#measuring-lcp-sub-parts",children:"LCP sub-parts"})," we can see a ",(0,s.jsx)(i.a,{href:"/blog/lcp-resource-load-duration",children:"load duration"})," of 1.23 seconds. Due to the large file size of the image causing a high load duration, the LCP score is 1.72 seconds."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/dcacce7664fd2da02c436debbbdeecb1.png",alt:"Request waterfall with high load duration"})}),"\n",(0,s.jsx)(i.p,{children:"After encoding the image, the file size has reduced from 734 kb to 207 kb. This reduction in file size has a direct impact on the load duration, as the browser is able to download the image sooner. The new LCP score for the page is 891 ms."}),"\n",(0,s.jsx)(i.p,{children:"Efficiently encoding the image has improved the LCP score by almost 1 second, without compromising on image quality."}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/0f0562956501700dc05b0982013c58a1.png",alt:"Request waterfall with compressed image"})}),"\n",(0,s.jsx)(i.h2,{id:"how-to-check-if-images-are-encoded-efficiently",children:"How to check if images are encoded efficie

1ntly"}),"\n",(0,s.jsxs)(i.p,{children:["Google's ",(0,s.jsx)(i.a,{href:"/blog/lighthouse-page-speed",children:"Lighthouse website analysis tool"})," can identify whether images are encoded efficiently on your page. Look for the ",(0,s.jsx)(i.strong,{children:"Efficiently encode images"})," audit in the performance diagnostics."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/8ace0634bbfdf3f21a2cf03dc3342c58.png",alt:"Efficiently encode images passed Lighthouse audit"})}),"\n",(0,s.jsx)(i.p,{children:"When an audit fails, an analysis listing the images and their potential savings is presented."}),"\n",(0,s.jsx)(i.admonition,{type:"note",children:(0,s.jsx)(i.p,{children:"Images are only reported in this audit if larger than 4 kb."})}),"\n",(0,s.jsx)(i.p,{children:"Lighthouse also lists potential savings from using efficient image encoding. In this example, it would bring the resource size down from 33 kilobytes to just 11.9 kilobytes."}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/81cba1a685c1858e726d7f0dc1d7630b.png",alt:"Failed Lighthouse audit with potential savings analysis"})}),"\n",(0,s.jsx)(i.h2,{id:"how-to-improve-image-encoding",children:"How to improve image encoding"}),"\n",(0,s.jsx)(i.p,{children:"To better compress your images, you can either use an image hosting service or manually compress your images."}),"\n",(0,s.jsx)(i.h3,{id:"using-an-image-hosting-services",children:"Using an image hosting services"}),"\n",(0,s.jsxs)(i.p,{children:["There are several platforms to help you serve optimized images on your website. ",(0,s.jsx)(i.a,{href:"https://www.imgix.com/",children:"Imgix"})," is an image processing service that takes your original file and serves it in a more efficient format"]}),"\n",(0,s.jsxs)(i.p,{children:["Once your image source is set up, find ",(0,s.jsx)(i.strong,{children:"Parameter Defaults"})," and set the quality to 80. This setting ensures a smaller file size while maintaining high quality, without needing to update the image from your website directly."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/e61e2fe1e2bad7414c5a1915c8237514.png",alt:"Imgix parameter settings"})}),"\n",(0,s.jsx)(i.h3,{id:"manually-compressing-images",children:"Manually compressing images"}),"\n",(0,s.jsxs)(i.p,{children:["You can also edit images on your website directly. One quick ",(0,s.jsx)(i.a,{href:"pathname:///software/online-image-optimization-tools",children:"tool to compress images online"})," is the ",(0,s.jsx)(i.a,{href:"https://squoosh.app/",children:"Squoosh"})," web app. Drop or paste your image into the app to begin the compression process."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/83187508bb89a3f1560a54938385795d.png",alt:"Squoosh image compression"})}),"\n",(0,s.jsx)(i.p,{children:"To compress the image, drag the slider to the desired quality and then download it. The compressed image can then replace the original image on your website."}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/14ecd9d8d8a726a0abc6eddacc8252ad.png",alt:"Squoosh image compression slider"})}),"\n",(0,s.jsx)(i.h2,{id:"monitor-image-page-weight-and-performance-impact",children:"Monitor image page weight and performance impact"}),"\n",(0,s.jsxs)(i.p,{children:["DebugBear can help monitor page weight over time and alert you to any regressions. Setting ",(0,s.jsx)(i.a,{href:"https://www.debugbear.com/docs/performance-budgets",children:"performance budgets"})," means you can receive a notification if page weight or LCP exceeds a certain value."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/2c0c7ba69724cdb984b51edff730304f.png",alt:"Page weight and LCP timeline"})}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.a,{href:"/docs/waterfall",children:"Request waterfalls"})," make identifying potential file size savings for images easy. Any larger file sizes are highlighted in orange or red, allowing you to make optimizations and compare to previous results."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{src:"https://www.debugbear.com/dimg/2d21f4cf6ebadd89320919af2246e119.png",alt:"Request waterfall identifying potential image size savings"})}),"\n","\n",(0,s.jsx)(o.P,{})]})}function m(e={}){const{wrapper:i}={...(0,a.R)(),...e.components};return i?(0,s.jsx)(i,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}},78779:(e,i,n)=>{n.d(i,{P:()=>t});n(96540);var s=n(13152),a=n(75205),o=n(74848);function t(){return(0,o.jsx)("div",{className:a.A.cta,children:(0,o.jsxs)("div",{className:a.A.ctaContainer,children:[(0,o.jsx)("div",{className:a.A.ctaImage,children:(0,o.jsx)(s.A,{alt:"Illustration of website monitoring",sources:{light:"https://www.debugbear.com/dimg/57001785e35454b95f43aa4f3bf6f857.png",dark:"https://www.debugbear.com/dimg/b2c0ae7a8dfbc4b18ba827a334c5c1af.png"}})}),(0,o.jsxs)("div",{className:a.A.ctaContent,children:[(0,o.jsx)("h2",{children:"Monitor Page Speed & Core Web Vitals"}),(0,o.jsxs)("div",{className:a.A.ctaBenefits,children:[(0,o.jsx)("h3",{children:"DebugBear monitoring includes:"}),(0,o.jsxs)("ul",{children:[(0,o.jsx)("li",{children:"In-depth Page Speed Reports"}),(0,o.jsx)("li",{children:"Automated Recommendations"}),(0,o.jsx)("li",{children:"Real User Analytics Data"})]})]}),(0,o.jsxs)("div",{children:[(0,o.jsx)("a",{href:"/signup",className:a.A.ctaButton+" hidden-when-logged-in",onClick:()=>{plausible&&plausible("DocsCtaClick_monitoring")},children:(0,o.jsx)("span",{children:"Start Free Trial"})}),(0,o.jsx)("a",{href:"/app",className:a.A.ctaButton+" visible-when-logged-in",children:(0,o.jsx)("span",{children:"Go To App"})})]})]})]})})}},75205:(e,i,n)=>{n.d(i,{A:()=>s});const s={cta:"cta_Vy7l",ctaContainer:"ctaContainer_dzq8",ctaContent:"ctaContent_VgWi",ctaImage:"ctaImage_MZ5b",ctaBenefits:"ctaBenefits_OYw7",ctaButton:"ctaButton_Uos9"}},28453:(e,i,n)=>{n.d(i,{R:()=>t,x:()=>r});var s=n(96540);const a={},o=s.createContext(a);function t(e){const i=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function r(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:t(e.components),s.createElement(o.Provider,{value:i},e.children)}}}]);