{"id":227,"date":"2026-07-20T19:13:29","date_gmt":"2026-07-20T19:13:29","guid":{"rendered":"https:\/\/artsflick.com\/blog\/?p=227"},"modified":"2026-07-20T19:13:32","modified_gmt":"2026-07-20T19:13:32","slug":"compress-images-for-web","status":"publish","type":"post","link":"https:\/\/artsflick.com\/blog\/compress-images-for-web\/","title":{"rendered":"How to Compress Images for Web Pages That Load Fast"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1376\" height=\"768\" src=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/compress-images-web-speed-hero.webp\" alt=\"A heavy photo file shrinking to a light one, showing how to compress images for web pages\" class=\"wp-image-229\" srcset=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/compress-images-web-speed-hero.webp 1376w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/compress-images-web-speed-hero-300x167.webp 300w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/compress-images-web-speed-hero-1024x572.webp 1024w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/compress-images-web-speed-hero-768x429.webp 768w\" sizes=\"auto, (max-width: 1376px) 100vw, 1376px\" \/><\/figure>\n\n\n<style>.kb-row-layout-id227_d5c004-0d > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id227_d5c004-0d > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id227_d5c004-0d > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:1140px;margin-left:auto;margin-right:auto;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}.kb-row-layout-id227_d5c004-0d > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id227_d5c004-0d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}}@media all and (max-width: 767px){.kb-row-layout-id227_d5c004-0d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id227_d5c004-0d alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-right-golden kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>#wrapper.site{overflow:clip;}.kadence-column227_3795ca-30 > .kt-inside-inner-col,.kadence-column227_3795ca-30 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column227_3795ca-30 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column227_3795ca-30 > .kt-inside-inner-col{flex-direction:column;}.kadence-column227_3795ca-30 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column227_3795ca-30 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column227_3795ca-30{position:relative;}@media all and (max-width: 1024px){.kadence-column227_3795ca-30 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column227_3795ca-30 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column227_3795ca-30 kb-section-is-sticky\"><div class=\"kt-inside-inner-col\"><style>.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:0px solid #000000;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-contents-title-wrap{color:#000000;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-contents-title{color:#000000;letter-spacing:1px;font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-wrap .kb-table-of-content-list{color:#5b6472;font-size:15px;font-weight:regular;font-style:normal;margin-top:0px;margin-left:-2px;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:#1f2430;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry{color:#3b6cf6;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-list li{margin-bottom:16px;}.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-list li .kb-table-of-contents-list-sub{margin-top:16px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-wrap{border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:0px solid #000000;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id227_ab3a2b-a3 .kb-table-of-content-wrap{border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:0px solid #000000;}}<\/style><\/div><\/div>\n\n\n<style>.kadence-column227_88b2ee-3d > .kt-inside-inner-col,.kadence-column227_88b2ee-3d > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column227_88b2ee-3d > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column227_88b2ee-3d > .kt-inside-inner-col{flex-direction:column;}.kadence-column227_88b2ee-3d > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column227_88b2ee-3d > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column227_88b2ee-3d{position:relative;}@media all and (max-width: 1024px){.kadence-column227_88b2ee-3d > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column227_88b2ee-3d > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column227_88b2ee-3d\"><div class=\"kt-inside-inner-col\">\n<p class=\"wp-block-paragraph\">Learning to compress images for web pages is the single highest-leverage speed fix most sites have available, and the numbers back that up bluntly: images make up 48% of the weight of a median page, and they&#8217;re the largest element (the thing Google&#8217;s speed metrics time) on roughly 85% of desktop pages. When a site fails Core Web Vitals, an oversized image is usually the reason.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What most guides won&#8217;t tell you is the part you actually need: how many kilobytes to aim for. &#8220;Compress your images&#8221; without a target is like &#8220;drive slower&#8221; without a speed limit. This guide gives you the targets, the three-step order that gets you there, and the way to verify it worked.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images are why your page is slow (the math)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google&#8217;s headline speed metric, Largest Contentful Paint, times how long the biggest visible element takes to appear, and wants it under 2.5 seconds. On most pages, that element is an image. The arithmetic is unforgiving on mobile: a 500 KB hero image takes about 1.2 seconds just to download on a typical 4G connection. A 100 KB version of the same image: around a quarter second. That one file is often the whole difference between passing and failing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And failing matters beyond pride: Core Web Vitals feed Google&#8217;s ranking systems, and slow pages leak visitors before the content ever renders. The good news hiding in that 48% statistic is that no other optimization on your site has this much slack to reclaim.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The three levers (compression is only one of them)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">File size is the product of three decisions, and pulling one lever while ignoring the others wastes most of the win:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dimensions.<\/strong>&nbsp;An image displayed at 800 px wide but uploaded at 4000 px sends sixteen times the pixels anyone sees. Resize to display size first; our&nbsp;<a href=\"https:\/\/artsflick.com\/blog\/resize-an-image-without-losing-quality\/\">resizing guide<\/a>&nbsp;covers doing it without quality loss.<\/li>\n\n\n\n<li><strong>Format.<\/strong>&nbsp;The same photo as WebP is typically 25\u201335% smaller than as JPG at equal visual quality; AVIF pushes further where your pipeline supports it. The&nbsp;<a href=\"https:\/\/artsflick.com\/blog\/png-vs-jpg-vs-webp\/\">format comparison<\/a>&nbsp;covers when each wins, and&nbsp;<a href=\"https:\/\/artsflick.com\/blog\/convert-png-to-jpg\/\">converting<\/a>&nbsp;takes seconds.<\/li>\n\n\n\n<li><strong>Compression.<\/strong>&nbsp;The quality slider. For photos, quality around 75\u201385 is where files shrink dramatically before differences become visible: a typical 800 KB hero re-encoded at quality 75 lands near 320\u2013450 KB on its own.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Real-world testing shows the pattern clearly: compression alone barely scrapes a passing grade, while resize plus format plus compression together move a page from &#8220;needs improvement&#8221; to solidly good. All three, always, in that order.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How small is small enough: the KB targets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aim your exports at these numbers, current best practice for image-heavy pages in 2026:<\/p>\n\n\n<style>.kb-table-container227_87ce1e-cb{overflow-x:auto;}.kb-table-container .kb-table227_87ce1e-cb th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:center;}.kb-table-container .kb-table227_87ce1e-cb caption{text-align:center;}.kb-table-container .kb-table227_87ce1e-cb td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}<\/style><div class=\"kb-table-container kb-table-container227_87ce1e-cb wp-block-kadence-table\"><table class=\"kb-table kb-table227_87ce1e-cb\">\n<tr class=\"kb-table-row kb-table-row227_4ce0c6-c7\">\n<td  class=\"kb-table-data kb-table-data227_28bf49-39\">\n\n<p class=\"wp-block-paragraph\"><strong>Image role<\/strong><\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_0a6d53-36\">\n\n<p class=\"wp-block-paragraph\"><strong>Target size<\/strong><\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_1f4c16-37\">\n\n<p class=\"wp-block-paragraph\"><strong>Notes<\/strong><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row227_c89e7e-b8\">\n<td  class=\"kb-table-data kb-table-data227_b97a5f-84\">\n\n<p class=\"wp-block-paragraph\">Hero \/ banner (the LCP image)<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_e268ee-0b\">\n\n<p class=\"wp-block-paragraph\">50\u2013150 KB<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_517866-44\">\n\n<p class=\"wp-block-paragraph\">The one that decides your score; WebP or AVIF<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row227_710f6f-32\">\n<td  class=\"kb-table-data kb-table-data227_cbfb26-69\">\n\n<p class=\"wp-block-paragraph\">In-content images<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_c99951-96\">\n\n<p class=\"wp-block-paragraph\">20\u201380 KB<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_fac3d7-a6\">\n\n<p class=\"wp-block-paragraph\">Lazy-load them; set width\/height in markup<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row227_ab6421-bc\">\n<td  class=\"kb-table-data kb-table-data227_7cd6a3-fd\">\n\n<p class=\"wp-block-paragraph\">Thumbnails \/ cards<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_b7af5c-86\">\n\n<p class=\"wp-block-paragraph\">10\u201330 KB<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_7445a6-bf\">\n\n<p class=\"wp-block-paragraph\">Small display size forgives strong compression<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row227_0b9483-d0\">\n<td  class=\"kb-table-data kb-table-data227_cbf2a2-3e\">\n\n<p class=\"wp-block-paragraph\">Logos \/ icons<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_0b5d44-ec\">\n\n<p class=\"wp-block-paragraph\">Under 10 KB<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data227_cf9d6d-6d\">\n\n<p class=\"wp-block-paragraph\">SVG when possible; it&#8217;s usually smaller AND sharper<\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<style data-wp-block-html=\"css\">\n.callout {\n    background: #eef3ff;\n    border: 1px solid #d8e3ff;\n    border-radius: 14px;\n    padding: 18px 20px;\n    margin: 24px 0;\n}\n\n.callout strong {\n    color: #3b6cf6;\n    font-weight: bolder;\n}\n\nbody {\n    margin: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: var(--text);\n    background: #ffffff;\n    line-height: 1.7;\n    font-size: 18px;\n}\n<\/style>\n\n<div class=\"callout\"><strong>The honest rule:<\/strong> if any single content image on your page is over 200 KB, it&#8217;s not done. There&#8217;s almost always a resize, a format switch, or ten quality points that get it under without a visible difference.<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1672\" height=\"941\" src=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/image-kb-targets-infographic.webp\" alt=\"Infographic showing target file sizes for hero images, content images, thumbnails and logos\" class=\"wp-image-231\" srcset=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/image-kb-targets-infographic.webp 1672w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/image-kb-targets-infographic-300x169.webp 300w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/image-kb-targets-infographic-1024x576.webp 1024w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/image-kb-targets-infographic-768x432.webp 768w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/image-kb-targets-infographic-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to compress images for web: the right order<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Resize to display size.<\/strong>&nbsp;Check the largest width the image actually renders at (inspect it in your browser), and resize to that, or double it for retina screens. This is where the biggest savings hide.<\/li>\n\n\n\n<li><strong>Pick the right format.<\/strong>&nbsp;Photos to WebP (or quality JPG where compatibility demands); graphics with sharp edges to PNG or SVG. Wrong format makes every later step fight uphill.<\/li>\n\n\n\n<li><strong>Compress to target.<\/strong>&nbsp;Drop the quality slider until you approach the table above, checking at 100% zoom as you go. In the&nbsp;<a href=\"https:\/\/artsflick.com\/compress-image\">ArtsFlick compressor<\/a>&nbsp;you see the output size before downloading, so you&#8217;re steering toward a number instead of guessing.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Then keep the original. Compress a copy, publish the copy, archive the master, the same non-negotiable rule as every lossy workflow.<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n.cta-box {\n    background: linear-gradient(135deg, #3b6cf6, #6a4cf0);\n    color: #fff;\n    border-radius: 18px;\n    padding: 28px;\n    margin: 34px 0;\n    text-align: center;\n}\n\n.cta-box a {\n    background: #fff;\n    color: #3b6cf6;\n    font-weight: 700;\n    padding: 12px 22px;\n    border-radius: 999px;\n    display: inline-block;\n}\n\na:-webkit-any-link\nSpecificity: (0,1,1)\n {\n    cursor: pointer;\n}\n\na {\n    color: #3b6cf6;\n    text-decoration: none;\n}\n\n.cta-box h3 {\n    margin: 0 0 8px;\n    color: #fff;\n    font-size: 22px;\n}\n\nbody {\n    margin: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    background: #ffffff;\n    line-height: 1.7;\n    font-size: 18px;\n}\n<\/style>\n\n<div class=\"cta-box\">\n        <h3>Compress to a number, not a guess\n\n<\/h3>\n        <p>Drop an image in, watch the size fall, download when it hits target. Free, in your browser.\n<\/p>\n        <a href=\"https:\/\/artsflick.com\/photo-editor\">Try the ArtsFlick Image Compressor<\/a>\n      <\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The markup half: four attributes that cost nothing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Perfectly compressed files can still load slowly if the HTML around them fights the browser. Four attributes finish the job, and none of them touch the image itself:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>loading=&#8221;lazy&#8221;<\/strong>&nbsp;on every image below the first screen. The browser skips downloading them until the visitor scrolls near, which is free bandwidth on every page view. Never lazy-load the hero, though; that delays the exact image your score times.<\/li>\n\n\n\n<li><strong>width and height attributes<\/strong>&nbsp;on every image. The browser reserves the space before the file arrives, which prevents the page from jumping as images pop in (that jumping is the CLS metric, and images are its main cause).<\/li>\n\n\n\n<li><strong>srcset<\/strong>&nbsp;with two or three sizes lets phones download the small version and desktops the large one, instead of everyone paying for the biggest.<\/li>\n\n\n\n<li><strong>fetchpriority=&#8221;high&#8221;<\/strong>&nbsp;on the hero image tells the browser to fetch it first rather than discovering its importance late.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you publish through WordPress, it handles lazy-loading and srcset automatically for images inserted normally, which is one more reason to upload files at sane sizes and let the platform do the plumbing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Check your work (two minutes)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Compression without measurement is faith. Run your page through&nbsp;<a href=\"https:\/\/pagespeed.web.dev\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>: it names your LCP element directly, so you know exactly which image is the one that matters, and flags any others still oversized under &#8220;Improve image delivery&#8221;. Fix what it names, re-run, watch the LCP number move. On an image-heavy page, going from unoptimized to the targets above routinely takes seconds off mobile load time, and you&#8217;ll see it in the report the same day. One reading note: the report&#8217;s &#8220;field data&#8221; section reflects real visitors over the past month, so it lags your fixes; the lab score at the top updates immediately and is the one to watch while iterating.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mistakes to avoid<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compressing without resizing first.<\/strong>&nbsp;A 4000 px image at quality 60 is still enormous, and now it&#8217;s ugly too. Dimensions first, always.<\/li>\n\n\n\n<li><strong>One quality setting for everything.<\/strong>&nbsp;A hero image deserves more bits than a card thumbnail. Match effort to role, per the table.<\/li>\n\n\n\n<li><strong>Re-compressing already-compressed files.<\/strong>&nbsp;Second passes stack artifacts for minor savings. One deliberate pass from the original beats three panicked ones.<\/li>\n\n\n\n<li><strong>Forgetting the featured\/social image.<\/strong>&nbsp;It renders on every card and share preview; an oversized one slows every page that lists the post.<\/li>\n\n\n\n<li><strong>Uploading at &#8220;maximum quality to be safe&#8221;.<\/strong>&nbsp;Quality 100 is roughly double the file of quality 85 with no visible difference at web sizes. Safety is a myth here; weight is real.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n<style>.kt-accordion-id227_cd6ce7-e6 .kt-accordion-inner-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:10px;}.kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;background:#ffffff;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #e7eaf0;border-right:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;border-left:1px solid #e7eaf0;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-bottom-left-radius:12px;background:#f2f2f2;font-size:17px;color:#1f2430;padding-top:14px;padding-right:15px;padding-bottom:14px;padding-left:15px;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before{background:#1f2430;}.kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner, .kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner h1, .kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner h2, .kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner h3, .kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner h4, .kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner h5, .kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner h6{color:#3a4150;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger{background:#1f2430;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:before{background:#f2f2f2;}.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6 .kt-blocks-accordion-header:focus-visible{color:#1f2430;background:#eeeeee;border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#1f2430;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger{background:#1f2430;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#eeeeee;}.kt-accordion-id227_cd6ce7-e6 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{color:#1f2430;background:#f2f2f2;border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#1f2430;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger{background:#1f2430;}.kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id227_cd6ce7-e6:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#f2f2f2;}@media all and (max-width: 1024px){.kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}}@media all and (max-width: 1024px){.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #e7eaf0;border-right:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;border-left:1px solid #e7eaf0;}}@media all and (max-width: 1024px){.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6 .kt-blocks-accordion-header:focus-visible{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}@media all and (max-width: 1024px){.kt-accordion-id227_cd6ce7-e6 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}@media all and (max-width: 767px){.kt-accordion-id227_cd6ce7-e6 .kt-accordion-inner-wrap{display:block;}.kt-accordion-id227_cd6ce7-e6 .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child){margin-top:10px;}.kt-accordion-id227_cd6ce7-e6 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #e7eaf0;border-right:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;border-left:1px solid #e7eaf0;}.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id227_cd6ce7-e6 .kt-blocks-accordion-header:focus-visible{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id227_cd6ce7-e6 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id227_cd6ce7-e6 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}<\/style>\n<div class=\"wp-block-kadence-accordion alignnone\"><div class=\"kt-accordion-wrap kt-accordion-id227_cd6ce7-e6 kt-accordion-has-9-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right\" style=\"max-width:none\"><div class=\"kt-accordion-inner-wrap\" data-allow-multiple-open=\"true\" data-start-open=\"none\">\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane227_5d3d1d-62\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">How much should I compress images for a website?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Work to targets: hero images at 50\u2013150 KB, in-content images at 20\u201380 KB, thumbnails under 30 KB. For photos that usually means WebP or JPG at quality 75\u201385 after resizing to display size. If a content image is over 200 KB, keep going.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane227_8a0f92-c8\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Does compressing images reduce quality?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Lossy compression discards data, but at sensible settings (quality 75\u201385 for photos) the difference is invisible at normal viewing sizes. Visible damage comes from over-compression or from compressing repeatedly; compress once, from the original, to a target.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane227_573dd3-ae\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What&#8217;s the best image format for a fast website?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">WebP for most photos and graphics: typically 25\u201335% smaller than equivalent JPG with universal browser support. AVIF compresses further where your tools support it, and SVG beats everything for logos and icons.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-4 kt-pane227_7ffaa3-0c\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What is a good LCP score and how do images affect it?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Google considers LCP good at 2.5 seconds or under. The LCP element is an image on roughly 85% of desktop pages, so image weight usually decides the score: a 500 KB hero costs about 1.2 seconds of download on 4G before anything else happens.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-9 kt-pane227_6420fb-d9\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Should I compress images before or after uploading to WordPress?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Before. WordPress generates resized copies but doesn&#8217;t meaningfully optimize your original, and plugins that compress after upload still store the heavy master. Arriving at the right size and format keeps your media library lean and every generated copy smaller.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Images are half your page weight and usually why Core Web Vitals fail. The exact KB targets, the three-step order, and the markup that finishes the job.<\/p>\n","protected":false},"author":1,"featured_media":230,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-editing"],"_links":{"self":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":2,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":232,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions\/232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}