Image Optimization in WordPress - 6 Tips to Speed Up Your Site

No matter how optimized your website is, images will always be one of the slowest-loading elements on the page. If you want to speed up WordPress to the max, you need to implement a strategy that targets images specifically – otherwise known as image optimization in WordPress.Todays post shares six quick tips for optimizing image by reducing file size – all in the name of speed. If you want a lightning quick WordPress website, read on!Image optimization in WordPress tip #1: choose the right file typeWhen using Photoshop and other image editing software, you can specify the file type you want to save as. The overwhelming majority of online images fall under two file formats – JPEG and PNG.So which one should you use? Well, that depends. Both options have advantages and disadvantages, and the choice largely depends on the scenario.JPEG – JPEG is the best option for photographs and other images displaying a huge variety of colors. They can also be compressed, sacrificing quality for a reduction in file size.PNG – PNGs win for graphics, drawings, text, and some screenshots. They also support transparency, unlike JPEGs. This format uses lossless compression, which results in higher quality but also bigger files.Usually, the file format is determined by the type of image we are working with, as outlined above. However, what is the consequence of choosing the wrong file format, in terms of file size?Well, lets take a look at a few scenarios to test this.This full-size screenshot of my WordPress dashboard was 150kb in PNG format, but 259kb as a JPEG. Remember, screenshots are usually the domain of the PNG – the JPEG is around 75% more bulky.(Editors note. PNGs do a great job for most screenshots, but just not all of them. If you have a screenshot of something that uses more than a handful of colors i.e. when your screenshot contains a photograph somewhere in it youre still better off with JPG.)However, the full-size version o f this photo I took on holiday returns the opposite results. The photo in JPEG format is 1.26mb; the PNG a whopping 7.23mb. That means the PNG is over 550% bigger (yikes!).This demonstrates how important the right file format is to the size of your images. If pressed, stick to the following rule: Photos and stuff with multiple colors, JPEG; everything else, PNG.2. Resize imagesWhen you shrink the dimensions of an image, you reduce its file size. Without exception.To keep your site light and nimble, make sure you reduce the images physical size as much as you can – typically, to the dimensions you want to display your images at. If the maximum width of your website is, say, 1000 pixels, theres no excuse for uploading an image thats wider than 1000 pixels. Larger-than-necessary dimensions guarantee that the image is carrying unnecessary bulk, and thus making it harder for you to properly do image optimization in WordPress.Even though the WordPress thumbnail feature can display images at smaller sizes, that doesnt change the underlying file size of the image in question. Obviously, an exception can be made for photographers and other artists, who may want to display a thumbnail linking to their full-size, high-res work.Again, allow me to demonstrate the sort of savings you can make.The full-size version of my previous photograph has dimensions of 2592 x 1456 pixels and is 1.26mb. However, lets see how much the file size shrinks when resizing the image to several popular widths.An example of image optimization in WordPress:1200 pixels wide: 394kb1000 pixels wide: 298kb800 pixels wide: 219kb600 pixels wide: 154kbAs you can see, the size savings are truly staggering!To resize the images in a time-saving manner, you can install Optimole on your WordPress site and it will do everything on autopilot. Moreover, it comes with image resizing for optimal display, which means that the images are not loaded in full size, but they get adapted to each users viewport. In other words, Optimole loads the perfect image size no matter what device or screen size youre using.3. Crop imagesResizing images is the quick-and-easy way to reduce file size. It creates an exact replica of your image, but one where everything is smaller.Shrinking an image beyond a certain point means some elements are barely visible. This is especially problematic when the focal point of an image is no longer clear.Cropping is the alternative to resizing. Rather than shrinking the entire image, you are essentially trimming around the edges – like using a pair of scissors on a photograph. The part of the image you are trying to show becomes more prominent, and you cut away all the distractions from the background.Heres a demonstration of how cropping an image can be better than simply resizing it, using a trusty WordPress screenshot.The resized image:The cropped image:Of course, the benefit of cropping is that, just like resizing, it reduces image dimensions, cuts file size , and is therefore a great way of doing image optimization in WordPress.4. Lower image quality (lossy compression)When youve finished cropping and resizing your images, you can enjoy further file size reductions by compressing them. This technique is particularly effective and popular for JPEGs, although PNGs can also be compressed.Now, JPEG supports a type of compression called lossy compression. This means that some of the image data is stripped away to reduce file size.For example, if two adjacent pixels show the tiniest color difference, we can get away with making them the same. The change is barely detectable to the naked eye, but having fewer colors keeps file size low.When saving a JPEG file using an image editing software, youll be asked to select a quality score from 0-100. This is essentially a trade-off between image quality and file size.Higher score: lower compression; higher quality; bigger file size.Lower score: higher compression; lower quality; smaller file size.Ge nerally speaking, small changes in quality score make little difference to the overall quality of your image. In fact, its unlikely that your visitors can tell the difference.To illustrate this, see the two photos below. One has a quality score of 100, one of 80. Which is which?Image optimization in WordPress photograph A:Photograph B:Click here to revealPhotograph B has the quality score of 100.Its hard to tell the difference, right? However, when it comes to file sizes, the difference is night and day: 418kb versus 90kb.You cant keep lowering quality forever, though, as at some point, the drop in quality will show. The image below has a quality score of 20:Sure, it might only be 28kb, but I wouldnt want this on my website, would you?Now, there is no golden rule for the perfect compression level. However, counterintuitively, the more complex the image, the more you can get away with lowering the quality on your way to ultimate image optimization in WordPress.5. Serve images on a CD NEverything online happens in an instant, right? Well no, actually. Geographical distances between a visitors location and your websites server have an impact on site speed – the larger the distance, the longer the wait.To solve this latency problem, consider installing a CDN. CDNs store your website on multiple servers spread across the globe, then connect your visitors to the one geographically closest to them. Latency problems solved, your website is served more quickly.If you want to speed up WordPress, youll be pleased to learn that Optimole plugin ships with its own free CDN – just for images.All you need to do is install and activate Optimole. Voilà   – your images will be displayed in record time.For some more complex and also better CDN solutions please check out our other post.6. Get lazy loadingBy default, the WordPress software treats all images equally. However, this is quite clearly an inefficient use of resources, and especially if you want to do any image optimization in WordPress.After all, an image at the bottom of the page wont be seen until much later than the image at the top of the page – doesnt the first image deserve priority?Prioritizing images is exactly what lazy loading achieves. Images at the top of the page are prioritized, while images below the fold are loaded only when the visitor scrolls down the page. This makes lazy loading the just in time equivalent of web page loading.If you want to use lazy loading to speed up WordPress, Optimole will give you a helping hand again. The cool thing about this plugin is that it offers low-quality image placeholder feature aka the lazy loading of an intermediate low-quality image until the full-size image is displayed entirely.Its completely free, too.Over to youAnd that concludes our rundown of six quick tips that will help you with image optimization in WordPress. As you can see, by combining several of these strategies, you can make big savings to your image s file sizes. Your visitors will love you for this – and your website will load significantly faster!Optimizing your images is actually very simple if youre using a plugin like Optimole, that will do all the work for you automatically (and mostly for free).If you have any image optimization questions, share them in the comments section below!Want to make your website even quicker? Dont forget about our free email course on how to speed up WordPress:Free guide5 Essential Tips to Speed Up Your WordPress SiteReduce your loading time by even 50-80% just by following simple tips.