\n\n\n\n
What is image optimization?<\/h2>\n\n\n\n
Generally speaking, image optimization is the act of decreasing file size without losing quality. You can optimize your images in the creation phase (by using the right \u201cExport\u201d options<\/a> in Photoshop) or directly on your website (by using lazy load<\/a> to display media on your site). <\/p>\n\n\n\n The goal is to reduce the amount of data users have to download, so they can get the content they\u2019re looking for faster without sacrificing quality.<\/p>\n\n\n\n People have short attention spans when it comes to the web, which is why it\u2019s important to make your website load in two seconds or less<\/a>. <\/p>\n\n\n\n One of the most common factors slowing down your site is your images. Even if your website is running on the best servers, like you\u2019ll get with managed hosting for WordPress,<\/a> images can be the downfall of performance.<\/p>\n\n\n\n By taking advantage of image optimization best practices, you\u2019ll keep your file size small and your load time fast, creating a better experience for your site visitors.<\/p>\n\n\n\n There\u2019s another reason image optimization is important, however, which is directly tied to your business\u2019s bottom line. Beyond slowing down your website, images take up disk space on the server powering your site. Most hosting providers enforce a bandwidth limit per plan, meaning you don\u2019t have unlimited resources\u2014and your images will quickly take up that space.<\/p>\n\n\n\n While exceeding that limit isn\u2019t the end of the world, you may be charged an overage fee, or worse, have your website shut down if overages continue to occur.<\/p>\n\n\n\n By optimizing your images, you\u2019ll be able to get the most out of your site storage and avoid that bandwidth limit.<\/p>\n\n\n\n Now that you know how important image optimization is, let\u2019s talk about how to do it! This step-by-step guide will cover everything from Photoshop tips to development practices.<\/p>\n\n\n\n This step-by-step guide will cover everything you can do to optimize images, starting in Photoshop and ending on your site.<\/p>\n\n\n\n Follow these steps to optimize your images for better site performance:<\/p>\n\n\n\n Before you do all this work to optimize your images, start by running a speed test on your site! By the end, you\u2019ll be able to see the impact you\u2019ve made (plus you can share that with your team or boss, for extra kudos). Some popular speed testing tools are:<\/p>\n\n\n\n <\/p>\n\n\n\n These browser-based tools work similarlyr: Open the link, enter your URL, and submit it for a quick report about your site\u2019s speed and performance.<\/p>\n\n\n\n WP Engine\u2019s Website Tester<\/a> is specifically designed to analyze the performance of WordPress sites, providing accurate information about your site\u2019s current performance as well as actionable insights for improving it. <\/p>\n\n\n\n When you enter your site URL and email address into the Website Tester, it will produce a breakdown of your site performance in about a minute. In the screenshot above, for example, there is clearly room for improvement from a page speed and loading accuracy perspective. <\/p>\n\n\n\n From there, you can click the \u201cLearn how WP Engine can help\u201d button to see the specific ways our managed hosting for WordPress sites<\/a> can help you improve performance (including built-in image compression!).<\/p>\n\n\n\n When you\u2019re done creating images (either saving from your camera or exporting from a tool like Photoshop), you\u2019ll have the option to specify the file type. The most common file types for use on the web are JPEGs, PNGs, and GIFs. And as I\u2019m sure you can guess, they all have their own pros, cons, and best practices when being placed on your website.<\/p>\n\n\n\n JPEGs<\/strong><\/p>\n\n\n\n JPEG images work best for showing off complex color photographs on your site, as they allow for a higher-quality image with a smaller file size. This file type will probably work for the majority of images you want to use on your site, with one major exception: images with a transparent background. (For those, see the next section about PNGs!)<\/p>\n\n\n\n When using a JPEG image for your website, consider exporting it as \u201cProgressive.\u201d This allows the browser to instantly load a simple version of the image before fully loading the full resolution onto the site.<\/p>\n\n\n\n If you\u2019re working in Photoshop, you\u2019ll find this setting when you export as \u201cSave for Web.\u201d<\/p>\n\n\n\n PNGs<\/strong><\/p>\n\n\n\n If you don\u2019t have a ton of color in your image (like flat illustrations, logos, or icons), or want it to have a transparent background, I recommend exporting as a PNG. Make sure you have the right image dimensions, and look for the option to save as PNG-24<\/a> (or 8, if there\u2019s no quality loss).<\/p>\n\n\n\n GIFs<\/strong><\/p>\n\n\n\n GIFs are the third most common image format for the web. However, they only support 256 colors, so you\u2019ll have to be selective with this file type.<\/p>\n\n\n\n To optimize GIFs for your website, think critically about how long they last, if they need to loop, and how many you really need on a given page or site. <\/p>\n\n\n\n One of the easiest ways to optimize images for the web is to resize them before you upload them to your site. Especially if you\u2019re working with raw images from a DSLR camera, the dimensions are often much larger than you actually need.<\/p>\n\n\n\n For example, let\u2019s say you\u2019re adding images to a blog article on your site. If your WordPress theme displays images at 500 x 500 but you\u2019re uploading images with a resolution of 1024 x 1024, all those extra pixels just increase the file size and decrease site speed without providing a real benefit.<\/p>\n\n\n\n By cropping or resizing your images before uploading, you\u2019ll decrease the file size, which will help your site load just a little bit faster and save your disk space for even more images.<\/p>\n\n\n\n To resize your image, just open up the image-editing software of your choice. Photoshop works well, or you can also use simpler tools like Preview<\/a> (for Macs), Paint<\/a> (for Windows), or Canva<\/a> (a browser tool).<\/p>\n\n\n\n Once you have your final image, saved in the right format and cropped to an appropriate size, there\u2019s one more step you can take to optimize it before uploading to your site: compressing it.<\/p>\n\n\n\n This process will help you make the file size smaller without losing noticeable image quality. There are two main types of compression: lossy and lossless.<\/p>\n\n\n\n Lossless compression will maintain the same level of quality before and after the compression. Lossy compression will discard some elements of the photo, but typically in a way that the human eye won\u2019t notice. To learn more about these compression types, I recommend this guide from Imagify<\/a>.<\/p>\n\n\n\n If you see a specific image on your site load and slowly come into view, that may be a sign that it needs compression, resizing, or both.<\/p>\n\n\n\n To compress your images, all you need is an image compression tool. My favorites include:<\/p>\n\n\n\n Image Optimizer, a free Add-on for Local<\/a><\/strong><\/p>\n\n\n\n If you\u2019re using Local<\/a> as your local development environment, you can use the Image Optimizer Add-on to automatically compress images offline. It scans your site for all image files, saving you the time of individually compressing them and speeding up your site in the process.<\/p>\n\n\n\n TinyPNG<\/a><\/strong><\/p>\n\n\n\n This browser-based tool optimizes images using smart lossy compression, reducing your file size by decreasing the number of colors used. (But don\u2019t worry, you won\u2019t even notice!) It\u2019s free and quick to use for PNGs and JPEGs.<\/p>\n\n\n\n ImageOptim<\/a><\/strong><\/p>\n\n\n\n This is a free Mac app that compresses images by removing unnecessary bloat while preserving as much image quality as possible.<\/p>\n\n\n\n JPEGmini<\/a><\/strong><\/p>\n\n\n\n JPEGmini is a powerful paid option that helps you reduce file size while retaining both quality and format. It does have a free trial, so you can give it a test run before you purchase.<\/p>\n\n\n\n At this point, you might be starting to think that image optimization is a lot of work\u2014and it can be! But there\u2019s also an easy way to streamline a few of these steps, and that\u2019s by installing an image optimization plugin on your WordPress site.<\/p>\n\n\n\n I have a few recommendations, and they each have unique features. But generally, an image optimization plugin will compress and resize your images when you upload to your WordPress site. This means you can skip those steps instead of doing them manually\u2014a big time saver.<\/p>\n\n\n\n This method is also nice if you\u2019re building sites for clients. It\u2019s a lot of pressure for the end-user and content creators to try remembering every step of the image optimization process. By installing a plugin that\u2019ll do most of the work for them, you\u2019ll help ensure the speed and performance of the site you\u2019ve built once you hand it off.<\/p>\n\n\n\n To optimize images on a WordPress site, I recommend these plugins:<\/strong><\/p>\n\n\n\n EWWW Image Optimizer Cloud<\/a><\/strong><\/p>\n\n\n\n This WordPress plugin will automatically optimize your images when you upload them to your site, or optimize images that you\u2019ve uploaded in the past. This makes it incredibly beneficial if you\u2019re working with an existing site with unoptimized images.<\/p>\n\n\n\n TinyPNG<\/a><\/strong><\/p>\n\n\n\n This WordPress plugin by the TinyPNG team can optimize JPEG and PNG images on upload. If you\u2019re a fan of the browser-based tool, streamline the process with their free plugin!<\/p>\n\n\n\n Kracken.io<\/a><\/strong> The Kracken.io plugin can optimize both new and existing images on your WordPress site. It also supports both lossless and lossy compression modes, giving you lots of control over the end result.<\/p>\n\n\n\n Imagify<\/a><\/strong> This WordPress plugin will help optimize your images without losing quality. It\u2019s also compatible with WooCommerce and NextGen Gallery, if you\u2019re using those plugins.<\/p>\n\n\n\n Note: Before choosing a plugin, be sure to look at how they operate. Some use server-taxing operations that can cause issues on your site, while others use FTP options to lessen the load on your web server.<\/p>\n\n\n\n Even after all the previous optimization steps, there are cases where you still might be working with large file sizes or lots of images on a page, slowing down your site speed. In those cases, sometimes it\u2019s helpful to not only optimize images, but to optimize the load experience so site visitors think your media files are loading faster than they really are.<\/p>\n\n\n\n That\u2019s what these next two steps are all about\u2014giving the appearance of faster loading images, so users aren\u2019t just staring at a blank page while your files load.<\/p>\n\n\n\n One way to do this is to load a Lower Quality Image (LQI) first. By loading a smaller version of the image before loading the full size, it gives the user something to look at while they wait for all the details. This gives the perception of a faster load time even if, technically, everything is loading at the same rate.<\/p>\n\n\n\n A popular way to do this is the \u201cblur up\u201d technique, which you can learn how to implement with this tutorial on CSS-Tricks<\/a>.<\/p>\n\n\n\n Similar to the \u201cblur up\u201d technique, there\u2019s one more trick that will help you give the appearance of faster loading images: Lazy loading.<\/p>\n\n\n\n When someone lands on your site, they start at the top of the page. It\u2019s probably going to take them a moment to scroll the entire page, especially if they\u2019re engaged. Instead of trying to load all the images at once, lazy loading acts under the assumption that users care most about the content they can see. So, the images within their browser view fully load first, while the other images load a placeholder first, until the user scrolls to that section of the page.<\/p>\n\n\n\n Lazy loading is a great technique on its own, and even more powerful when paired with the rest of these image optimization tips! And, it\u2019s very easy to do on a WordPress site, thanks to the Smush plugin<\/a>.<\/p>\n\n\n\n This concludes our step-by-step guide for better site performance by optimizing images! To see the impact this has made on your site, run another speed test. How\u2019d you do?<\/p>\n\n\n\n With the right image optimization tools, you\u2019ll be able to see better site speed and performance in no time! For more help optimizing your site, check out WP Engine\u2019s industry-leading hosting for WordPress <\/a>websites or speak to a representative<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":" There\u2019s no doubt that images are an invaluable part of the web. From visualizing data to breaking up paragraphs of text to showing off your portfolio of work, photos and graphics play an important role in most website designs and help users enjoy better online experiences. Having great visuals, however, can take a toll on…<\/span><\/span><\/p>\n","protected":false},"author":321,"featured_media":139995,"template":"","resource-topic":[912],"resource-role":[896],"resource-type":[916],"class_list":["post-34054","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n
\n\n\n\nWhy optimize images for the web?<\/h2>\n\n\n\n
\n\n\n\nHow to optimize images for the web<\/h2>\n\n\n\n
\n
\n\n\n\n1. Benchmark your current site speed<\/h3>\n\n\n\n
\n
![\"The](\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/06\/wpengine-website-tester-443x1024.png\")
<\/figure>\n\n\n\n![\"Expanded](\"https:\/\/wpengine.com\/wp-content\/uploads\/2024\/06\/howwpehelps.png\")
<\/figure>\n\n\n\n
\n\n\n\n2. Know how to choose the best image file type<\/h3>\n\n\n\n
\n\n\n\n3. Resize your images before you upload<\/h3>\n\n\n\n
\n\n\n\n4. Compress images to reduce file size<\/h3>\n\n\n\n
\n
![\"Snapshot](\"https:\/\/wpengine.com\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-10-at-12.54.00-PM.png\")
<\/figure>\n\n\n\n![\"Screenshot](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/tinyPNG-784x315.png\")
<\/figure>\n\n\n\n![\"Optimize](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/ImageOptim-784x492.png\")
<\/figure>\n\n\n\n![\"A](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/JPEGmini-784x435.png\")
<\/figure>\n\n\n\n
\n\n\n\n5. Automate image optimization with a WordPress plugin<\/h3>\n\n\n\n
\n
![\"EWWW](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/EWWWImageOptimizer-784x252.png\")
<\/figure>\n\n\n\n![\"Optimize](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/CompressJPEGandPNGimages-784x253.png\")
<\/figure>\n\n\n\n
<\/p>\n\n\n\n![\"The](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/Kraken-784x251.png\")
<\/figure>\n\n\n\n
<\/p>\n\n\n\n![\"The](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/04\/Imagify-784x252.png\")
<\/figure>\n\n\n\n
\n\n\n\n6. Use the \u201cblur up\u201d technique to load a Lower Quality Image first<\/h3>\n\n\n\n
\n\n\n\n7. Lazy load your site images<\/h3>\n\n\n\n
\n\n\n\n