{"id":9143,"date":"2009-08-10T19:15:13","date_gmt":"2009-08-10T13:45:13","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=9143"},"modified":"2026-10-12T09:37:42","modified_gmt":"2026-10-12T04:07:42","slug":"optimizing-images","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/","title":{"rendered":"Optimizing Images for the Web: Best Practices and Tools (2026)"},"content":{"rendered":"<p>What are the best tools and practices for optimizing images? Images are usually the heaviest part of a web page, so they decide how fast it loads and how well it scores on Core Web Vitals. They can also bring visitors from Google Images. This guide covers <strong>optimizing images<\/strong> for speed and for search in 2026, from formats and compression to alt text, updated from Akmal Wardak&#8217;s original guest post.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-64142\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/optimizing-images-web-1024x538.webp\" alt=\"Optimizing images for web speed and SEO\" width=\"1024\" height=\"538\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/optimizing-images-web-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/optimizing-images-web-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/optimizing-images-web-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/optimizing-images-web-768x403.webp 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/optimizing-images-web.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Resize images to the size they are shown, convert them to WebP or AVIF, compress them with a tool such as Squoosh or a plugin such as ShortPixel or EWWW, serve responsive sizes with srcset, lazy load images below the fold (not the main hero image), always set width and height, and give each image a descriptive file name and alt text.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae33d039d03b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae33d039d03b\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#Optimizing_images_for_faster_pages\" >Optimizing images for faster pages<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#1_Resize_before_you_upload\" >1. Resize before you upload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#2_Use_modern_formats\" >2. Use modern formats<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#3_Compress_images\" >3. Compress images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#4_Serve_responsive_images\" >4. Serve responsive images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#5_Lazy_load_but_not_the_first_image\" >5. Lazy load, but not the first image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#6_Always_set_width_and_height\" >6. Always set width and height<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#7_Use_a_CDN_and_caching\" >7. Use a CDN and caching<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#Optimizing_images_for_search_image_SEO\" >Optimizing images for search (image SEO)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#Check_your_results\" >Check your results<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#What_is_the_best_image_format_for_websites\" >What is the best image format for websites?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#What_size_should_blog_images_be\" >What size should blog images be?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/08\/optimizing-images\/#Does_image_optimization_help_SEO\" >Does image optimization help SEO?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Optimizing_images_for_faster_pages\"><\/span>Optimizing images for faster pages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Resize_before_you_upload\"><\/span>1. Resize before you upload<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Don&#8217;t upload a 4000-pixel photo to show it at 800 pixels. Resize to about the largest size your theme displays (often 1200 to 1600 px wide). WordPress then creates smaller sizes automatically.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Use_modern_formats\"><\/span>2. Use modern formats<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>WebP:<\/strong> supported by all modern browsers, usually 25 to 35% smaller than JPEG at similar quality.<\/li>\n<li><strong>AVIF:<\/strong> even smaller, now supported by all major browsers; WordPress accepts AVIF uploads since version 6.5.<\/li>\n<li><strong>SVG:<\/strong> best for logos and icons.<\/li>\n<li><strong>PNG:<\/strong> only for screenshots or graphics that need sharp edges; convert old GIFs to PNG, WebP or a short video.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"3_Compress_images\"><\/span>3. Compress images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener\">Squoosh<\/a><\/strong>: free browser tool from Google to compare formats and quality side by side.<\/li>\n<li><strong><a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a><\/strong>: quick online compression for PNG, JPEG and WebP.<\/li>\n<li><strong><a href=\"https:\/\/shortpixel.com\/\" target=\"_blank\" rel=\"noopener\">ShortPixel<\/a><\/strong>, <strong><a href=\"https:\/\/ewww.io\/\" target=\"_blank\" rel=\"noopener\">EWWW Image Optimizer<\/a><\/strong> and <strong><a href=\"https:\/\/wpmudev.com\/project\/wp-smush-pro\/\" target=\"_blank\" rel=\"noopener\">Smush<\/a><\/strong>: WordPress plugins that compress and convert on upload.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"4_Serve_responsive_images\"><\/span>4. Serve responsive images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use <code>srcset<\/code> and <code>sizes<\/code> so phones download small versions and big screens get large ones. WordPress adds these automatically to images inserted from the media library.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Lazy_load_but_not_the_first_image\"><\/span>5. Lazy load, but not the first image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add <code>loading=\"lazy\"<\/code> to images further down the page; WordPress does this by default. Don&#8217;t lazy load the main image at the top, because it is often the Largest Contentful Paint element. See our guide to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/\">lazy load images<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Always_set_width_and_height\"><\/span>6. Always set width and height<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Width and height attributes let the browser reserve space, so the layout doesn&#8217;t jump as images load (Cumulative Layout Shift).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Use_a_CDN_and_caching\"><\/span>7. Use a CDN and caching<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A CDN serves images from servers near the visitor; long cache headers stop repeat downloads. Many caching plugins and hosts include image CDNs.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Optimizing_images_for_search_image_SEO\"><\/span>Optimizing images for search (image SEO)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Descriptive file names:<\/strong> <code>widescreen-wallpaper.webp<\/code> beats <code>IMG_0042.webp<\/code>. Rename before uploading; Windows File Explorer and Mac Finder can batch rename.<\/li>\n<li><strong>Alt text:<\/strong> describe the image for screen readers and search engines in a short sentence. Don&#8217;t stuff keywords.<\/li>\n<li><strong>Relevant placement:<\/strong> put images near the text they illustrate, with a caption where useful.<\/li>\n<li><strong>Unique images:<\/strong> original screenshots and photos rank better than stock images found on thousands of sites.<\/li>\n<li><strong>Image sitemap and structured data:<\/strong> SEO plugins such as Rank Math or Yoast include images in the XML sitemap.<\/li>\n<li><strong>Open Graph image:<\/strong> set a 1200 x 630 social image so shares look good.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Check_your_results\"><\/span>Check your results<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Run your page through <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>. It flags oversized images, missing dimensions and images that should use modern formats. For more speed tips, see how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/02\/increase-site-speed\/\">increase site speed<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_best_image_format_for_websites\"><\/span>What is the best image format for websites?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WebP is the safe default; AVIF is smaller still. Use SVG for logos and icons.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_size_should_blog_images_be\"><\/span>What size should blog images be?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Match your content width, often 1200 px wide, and keep most images under about 150 KB after compression.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_image_optimization_help_SEO\"><\/span>Does image optimization help SEO?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Faster pages help Core Web Vitals, and good file names and alt text help images appear in Google Images.<\/p>\n<p><em>Originally written by guest author Akmal Wardak, who blogged about social media, software and WordPress tips at AkmalWardak.com. Updated for 2026 by QuickOnlineTips.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What are the best tools and practices for optimizing images? Images are usually the heaviest part of a web page,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":64142,"comment_status":"open","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":[6],"tags":[44,49],"class_list":["post-9143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-guest-posts","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/9143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=9143"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/9143\/revisions"}],"predecessor-version":[{"id":64143,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/9143\/revisions\/64143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/64142"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=9143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=9143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=9143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}