{"id":59481,"date":"2021-06-16T09:00:00","date_gmt":"2021-06-16T13:00:00","guid":{"rendered":"https:\/\/crazyeggblog.wpengine.com\/?p=59481"},"modified":"2026-01-06T15:14:33","modified_gmt":"2026-01-06T23:14:33","slug":"how-to-optimize-images-for-a-website","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/","title":{"rendered":"5 Steps to Optimize Images for a Website &#8211; Easiest Method"},"content":{"rendered":"\n<p>Image optimization is the process of reducing the file size of an image without sacrificing its quality. If your website is having performance issues, including slow page loading times, image optimization can help resolve your problems.\u00a0<\/p>\n\n\n\n<p>Here\u2019s an in-depth tutorial of the step-by-step process required to optimize website images. The process described below assumes that you\u2019re not using a WordPress plugin for assistance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">#1 &#8211; Prepare The Image and Make Sure It\u2019s Saved Properly<\/h2>\n\n\n\n<p>Even if you\u2019re using an image optimizer or compression tool, there are a few things you need to do before running that image through compression.<\/p>\n\n\n\n<p>First, make any necessary edits or enhancements to the image. Things like filters, cropping, contrast adjustments, exposure, saturation, and other edits should be handled before you proceed. You can continue using whatever image editing software you\u2019re comfortable with for this step.<\/p>\n\n\n\n<p>From here, it\u2019s important that you save the image properly. For most website images, you\u2019ll have two main options to consider\u2014PNG and JPEG.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>PNG Image Files<\/strong> \u2014 PNG files are larger, but they support a wide range of colors. PNGs are also the only image file format that works with transparent backgrounds on a website. If you\u2019re editing a photo multiple times, it\u2019s in your best interest to export it as a PNG before uploading it to your website.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JPEG Image Files<\/strong> \u2014 JPEGs provide a good balance between quality and file size. This is the most common file format of digital cameras. JPEGs should work for the vast majority of images on your site, especially since the file format is smaller than a PNG.<\/li>\n<\/ul>\n\n\n\n<p>Overall, PNGs work well for images that don\u2019t have a ton of color. If an image has lots of lines, icons, or sharpness, PNG will be a better option as well. JPEG compression could create some contrast issues in this scenario.<\/p>\n\n\n\n<p>A top benefit of using JPEG files is that you\u2019ll be able to choose the quality of the image before running it through a compression tool.<\/p>\n\n\n\n<p>Here\u2019s an example using Preview, the default image viewer on a Mac:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104042\/image1-5-1024x608.png\" alt=\"\" class=\"wp-image-59486\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104042\/image1-5-1024x608.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104042\/image1-5-300x178.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104042\/image1-5-768x456.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104042\/image1-5.png 1314w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you export images as a JPEG file, you can adjust the quality by simply sliding the bar. By reducing the image quality, you\u2019ll simultaneously reduce the file size.&nbsp;<\/p>\n\n\n\n<p>Unless you\u2019re a professional photographer, JPEG quality around 40% to 50% should be fine for most of you. For example, if you\u2019re uploading photographs to your portfolio of a client\u2019s wedding, it\u2019s probably in your best interest to sacrifice file size for image quality.<\/p>\n\n\n\n<p>In addition to the edits and choosing the right file format, you\u2019ll also need to prepare the correct image dimensions before proceeding to the next step.<\/p>\n\n\n\n<p>Think about where and how the image will be used on your website. For example, the dimensions of an image used within a blog post will likely be different from an image icon on a product page.&nbsp;<\/p>\n\n\n\n<p>If the content area on your blog is 700 pixels wide, the dimensions for an image here should never be larger than 700 pixels.&nbsp;<\/p>\n\n\n\n<p>Any time you\u2019re resizing an image, make sure you enable the option to scale the height and width proportionately. Otherwise, the image will get distorted.<\/p>\n\n\n\n<p>Here\u2019s an example of a JPEG that was 2634 x 2718 pixels and 1.8 MB:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"824\" height=\"758\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104016\/image5-3.png\" alt=\"\" class=\"wp-image-59482\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104016\/image5-3.png 824w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104016\/image5-3-300x276.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104016\/image5-3-768x706.png 768w\" sizes=\"(max-width: 824px) 100vw, 824px\" \/><\/figure>\n\n\n\n<p>By changing the width to 700 pixels, the height automatically scaled to 722 pixels. This also reduces the file size.<\/p>\n\n\n\n<p>Once you\u2019ve saved the image with the right file format and dimensions, you can continue to the next step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">#2 &#8211; Run the Image Through a Compression Tool<\/h2>\n\n\n\n<p>Now it\u2019s time for the image to get compressed. The easiest way to compress images is by using an online tool.&nbsp;<\/p>\n\n\n\n<p>There are countless options to choose from. But for our purposes here today, we\u2019re going to use TinyPNG.<\/p>\n\n\n\n<p>Thousands of companies worldwide rely on TinyPNG for image compression. This includes big brands like Samsung, Walmart, Sony, Lego, and Bank of America. As previously mentioned, you can use this TinyPNG for free to optimize images for your website.<\/p>\n\n\n\n<p>Start by navigating to the TinyPNG homepage. From here, you can simply drag and drop your image file into the box at the top of the screen.<\/p>\n\n\n\n<p>The tool will automatically compress any image files that you upload without any extra steps or actions required on your end. Once the process is complete, just click the <strong>download<\/strong> button to retrieve your newly compressed image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"556\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104048\/image6-3-1024x556.png\" alt=\"\" class=\"wp-image-59487\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104048\/image6-3-1024x556.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104048\/image6-3-300x163.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104048\/image6-3-768x417.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104048\/image6-3-1536x834.png 1536w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104048\/image6-3.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the example above, TinyPNG took a JPEG file that was 534 KB and compressed it by 86%, reducing the file size to just 76 KB.<\/p>\n\n\n\n<p>The original image that we started with prior to step one was a whopping 6 MB! This is a file that would be too large to compress using TinyPNG\u2019s free service.&nbsp;<\/p>\n\n\n\n<p>But after taking the time to save it as JPEG, adjust the quality, and change the dimensions, it set us up for success with the compression.<\/p>\n\n\n\n<p>Now, let\u2019s pretend we just changed the quality of the initial JPEG without adjusting the dimensions. If you refer back to step one, you\u2019ll see this reduced the file size to 1.8 MB (still significantly less than 6 MB).<\/p>\n\n\n\n<p>If we run that file through TinyPNG, it gets compressed to 446 KB\u2014nearly six times larger than our 76 KB file that we changed the dimensions for.&nbsp;&nbsp;<\/p>\n\n\n\n<p>That\u2019s why the preparation in the first step is so important. If you jump straight to the compression tool, you\u2019re still leaving a lot on the table in terms of how much you can optimize the image.<\/p>\n\n\n\n<p>The reason why we recommend TinyPNG so highly is because the difference in image quality is unnoticeable to the naked eye. Take a look at this example comparing two transparent PNGs before and after compression:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6-1024x460.png\" alt=\"\" class=\"wp-image-59485\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6-1024x460.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6-300x135.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6-768x345.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png 1490w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Do you notice any difference? Didn\u2019t think so.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">#3 &#8211; Upload the Image to Your Website<\/h2>\n\n\n\n<p>This step will look a little different for everyone. It all depends on the CMS that you\u2019re using to power your website.&nbsp;<\/p>\n\n\n\n<p>WordPress users will have a different interface than Magento, Shopify, Drupal, Joomla, BigCommerce, etc. Since WordPress is the world\u2019s most popular CMS, and that\u2019s what we use to run our site here at Crazy Egg, we\u2019ll use it as the example for this step.<\/p>\n\n\n\n<p>Navigate to <strong>Media<\/strong> on the left side of your WordPress dashboard. Then select <strong>Add New<\/strong> and either drag-and-drop the image or select a file from your computer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"320\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104022\/image4-6-1024x320.png\" alt=\"\" class=\"wp-image-59483\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104022\/image4-6-1024x320.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104022\/image4-6-300x94.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104022\/image4-6-768x240.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104022\/image4-6-1536x480.png 1536w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104022\/image4-6.png 1754w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once an image has been added to your WordPress media library, it\u2019s easy to insert it into blog posts or landing pages on your site. Alternatively, you can complete this process in real-time as you\u2019re creating new content on your site.<\/p>\n\n\n\n<p>For example, let\u2019s say you\u2019re writing a new blog post on WordPress. Writing the text then coming back and inserting images later may not work well for your process.<\/p>\n\n\n\n<p>Since the image optimization process just takes a minute or two, you can go through the first two steps any time you reach a point in your blog post that calls for an image.<\/p>\n\n\n\n<p>Then just click the <strong>Add Media<\/strong> button on the post and upload the image without leaving the blog.&nbsp;<\/p>\n\n\n\n<p>If you feel like navigating away from the post to take care of the image optimization distracts your writing workflow, that\u2019s ok. Just don\u2019t forget to add the images when you finish writing.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">#4 &#8211; Host Your Images on a CDN<\/h2>\n\n\n\n<p>Remember why we\u2019re optimizing images in the first place\u2014we\u2019re trying to improve page loading speed.&nbsp;<\/p>\n\n\n\n<p>In addition to the image optimization itself, you can take this concept one step further by hosting your optimized website images on a CDN (content delivery network).<\/p>\n\n\n\n<p>Rather than storing the images on your own servers, CDNs have networks strategically placed all over the world. So website visitors will get images delivered to their screen from a server that\u2019s closest to them, geographically speaking.&nbsp;<\/p>\n\n\n\n<p>For example, let\u2019s say your website servers are located in the United States. If a user in Europe lands on your site, the CDN can use a server that\u2019s located closer to that specific visitor, ultimately increasing the page loading speed.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/tinify.com\/cdn\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Tinify CDN<\/a> is TinyPNG\u2019s content delivery network. So if you\u2019re using TinyPNG to optimize your images, it\u2019s only natural to consider them as your CDN provider as well.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"552\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104033\/image3-5-1024x552.png\" alt=\"\" class=\"wp-image-59484\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104033\/image3-5-1024x552.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104033\/image3-5-300x162.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104033\/image3-5-768x414.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104033\/image3-5-1536x828.png 1536w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104033\/image3-5.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>While a CDN doesn\u2019t replace your web hosting service, it can take a significant load off of your servers.<\/p>\n\n\n\n<p>Tinify CDN starts at $15 per month. But that plan really only accommodates personal websites and small blogs.&nbsp;<\/p>\n\n\n\n<p>Most of you should be signing up for the Business package, at a minimum. This plan starts at $69 per month, and you can try it free for 14 days.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">#5 &#8211; Use a Lazy Load Plugin (BONUS)<\/h2>\n\n\n\n<p>By now, you\u2019ve already optimized the images for your website. And while there\u2019s nothing you can do to optimize the image any further, there are still steps you can take to ensure your pages load as fast as possible.<\/p>\n\n\n\n<p>Lazy loading plugins are your best option here.<\/p>\n\n\n\n<p>The concept behind lazy loading is simple. Images that aren\u2019t in the field of view aren\u2019t loaded until a visitor gets closer to that part of the page.<\/p>\n\n\n\n<p>So images at the bottom of your page won\u2019t load at the same time as an image above the fold. This tip will significantly increase your page loading speed, especially for pages with multiple images.&nbsp;<\/p>\n\n\n\n<p>Examples of popular lazy load plugins include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wp-rocket.me\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazy Load by WP Rocket<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Smush<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/lazy-loading-responsive-images\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazy Loader<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">a3 Lazy Load<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Image Optimization &amp; Lazy Load by Optimole<\/a><\/li>\n<\/ul>\n\n\n\n<p>For those of you who want to take your website image optimization strategy to the next level, these plugins will get the job done.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next Steps<\/h2>\n\n\n\n<p>Now that you\u2019ve mastered image optimization for your website, it\u2019s time to focus on other ways to improve your website performance.<\/p>\n\n\n\n<p>Check out our guide on the best ways to <a href=\"https:\/\/www.crazyegg.com\/blog\/speed-up-your-website\/\">speed up your website and improve conversions<\/a>. These tips go beyond basic image optimization.&nbsp;<\/p>\n\n\n\n<p>You should also learn <a href=\"https:\/\/www.crazyegg.com\/blog\/how-to-clear-your-cache-in-wordpress\/\">how to clear your cache in WordPress<\/a>. This five-step guide is extremely helpful for WordPress beginners looking for ways to improve their site performance. It\u2019s especially useful for websites with lots of images.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image optimization is the process of reducing the file size of an image without sacrificing its quality. If your website is having performance issues, including&#8230;<\/p>\n","protected":false},"author":279,"featured_media":59485,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[876],"tags":[],"class_list":["post-59481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>5 Steps to Optimize Images for a Website - Easiest Method<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Steps to Optimize Images for a Website - Easiest Method\" \/>\n<meta property=\"og:description\" content=\"Image optimization is the process of reducing the file size of an image without sacrificing its quality. If your website is having performance issues, including...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-16T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-06T23:14:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1490\" \/>\n\t<meta property=\"og:image:height\" content=\"670\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hiten Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hnshah\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiten Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/\"},\"author\":{\"name\":\"Hiten Shah\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\"},\"headline\":\"5 Steps to Optimize Images for a Website &#8211; Easiest Method\",\"datePublished\":\"2021-06-16T13:00:00+00:00\",\"dateModified\":\"2026-01-06T23:14:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/\"},\"wordCount\":1753,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/13104039\\\/image2-6.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/\",\"name\":\"5 Steps to Optimize Images for a Website - Easiest Method\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/13104039\\\/image2-6.png\",\"datePublished\":\"2021-06-16T13:00:00+00:00\",\"dateModified\":\"2026-01-06T23:14:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/13104039\\\/image2-6.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/13104039\\\/image2-6.png\",\"width\":1490,\"height\":670},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/how-to-optimize-images-for-a-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/website\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"5 Steps to Optimize Images for a Website &#8211; Easiest Method\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\",\"name\":\"Hiten Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"caption\":\"Hiten Shah\"},\"description\":\"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\\\/Twitter.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/hnshah\\\/\",\"https:\\\/\\\/x.com\\\/hnshah\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/hiten\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Steps to Optimize Images for a Website - Easiest Method","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/","og_locale":"en_US","og_type":"article","og_title":"5 Steps to Optimize Images for a Website - Easiest Method","og_description":"Image optimization is the process of reducing the file size of an image without sacrificing its quality. If your website is having performance issues, including...","og_url":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2021-06-16T13:00:00+00:00","article_modified_time":"2026-01-06T23:14:33+00:00","og_image":[{"width":1490,"height":670,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png","type":"image\/png"}],"author":"Hiten Shah","twitter_card":"summary_large_image","twitter_creator":"@hnshah","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Hiten Shah","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/"},"author":{"name":"Hiten Shah","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6"},"headline":"5 Steps to Optimize Images for a Website &#8211; Easiest Method","datePublished":"2021-06-16T13:00:00+00:00","dateModified":"2026-01-06T23:14:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/"},"wordCount":1753,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png","articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/","url":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/","name":"5 Steps to Optimize Images for a Website - Easiest Method","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png","datePublished":"2021-06-16T13:00:00+00:00","dateModified":"2026-01-06T23:14:33+00:00","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2021\/06\/13104039\/image2-6.png","width":1490,"height":670},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/how-to-optimize-images-for-a-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website","item":"https:\/\/www.crazyegg.com\/blog\/category\/website\/"},{"@type":"ListItem","position":3,"name":"5 Steps to Optimize Images for a Website &#8211; Easiest Method"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6","name":"Hiten Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","caption":"Hiten Shah"},"description":"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\/Twitter.","sameAs":["https:\/\/www.linkedin.com\/in\/hnshah\/","https:\/\/x.com\/hnshah"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/hiten\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/59481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=59481"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/59481\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/59485"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=59481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=59481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=59481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}