![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-4.png\" "\\"\\"")
<\/p>\n<\/p>\n
Welcome to another installment of WordPress Wednesday<\/a>!<\/p>\n Disclaimer<\/strong>: The information contained in this post is accurate for LSCWP v1.6.2.1 [release log<\/a>]. If you are using a newer version of the plugin, some details may have changed. Please refer to our wiki<\/a> for the latest!<\/em><\/p>\n Have you ever wished that your site\u2019s images didn\u2019t take so long to transfer? Well, there may be something you can do about it. Many images can be optimized to take up less space, which in turn takes less time to transfer. Two and a half weeks ago, we introduced an Image Optimization feature, and in that time, we\u2019ve already optimized around 640,000\u00a0images. That\u2019s a lot of saved bytes!<\/p>\n Intrigued? Today we\u2019re going to talk a little bit about Image Optimization<\/strong>: what it is, and how to use it.<\/p>\n One effective way to deal with the cost of transmitting images over the Internet is to reduce the size of those images.<\/p>\n Smaller images = faster transmissions.<\/strong><\/p>\n The LiteSpeed Cache plugin provides access to image optimization services on a central web server. Here\u2019s how it works:<\/p>\n You may be wondering about step 5. What is actually happening when the child server processes your images?<\/p>\n Well, there are libraries for this sort of thing, so we don’t need to reinvent the wheel. We use Imagick<\/a> functions to adjust your images to 85%-90% quality of the original. (This optimization is lossy.)<\/p>\n During the process, three versions of each image file are generated:<\/p>\n If Before we go any further, it\u2019s important to point out that you should not use more than one Image Optimization plugin at the same time<\/strong>! Doing so can cause quirky behavior, and it often leads to errors in processing: errors that can only be cleared by creating a ticket and having us deal with it on our end.<\/p>\n It\u2019s extra hassle for everyone involved, so please just don\u2019t do it 🙂<\/p>\n Generally speaking, it\u2019s never a good idea to have two plugins performing the same optimization functions anyway. To be clear, you can still use multiple optimization plugins, as long as you don\u2019t duplicate any of the individual functions. I go into more detail on that here<\/a>, if you want to know more.<\/p>\n From the WordPress Dashboard, navigate to LiteSpeed Cache > Settings > Media<\/strong>. Scroll down, and you will see two settings related to optimization.<\/p>\n Disable Optimization Pull<\/strong>, when ‘ON’, will disable the cron job that is used to pull optimized images from the central server into your WordPress media library. If you turn this on, you will be unable to retrieve your optimized images.<\/p>\n Under normal circumstances, you will not need to touch this setting.<\/p>\n Remember the Not all browsers support WebP, so there will be two versions of your pages in cache: one with the WebP images and one with the other image formats, and the appropriate version will be served to your visitors. And since your other optimized image formats are still there, you can turn WebP off at any time, if you change your mind.<\/p>\n Navigate to LiteSpeed Cache > Image Optimization<\/strong>.<\/p>\n The first time you visit this page, you will see a button that reads Request Key<\/strong>. Press the button to obtain a key from the central server that it will use to process all of your future image optimization requests. Once the key is obtained, your screen should look like the one shown below, and your API key will be listed (although most of it will be blocked out for security purposes).<\/p>\n Below the key is Total Reduction<\/strong>. It shows you how much space the server has saved with image optimization to date. This number isn’t updated automatically, so to get the most recent status you will need to press the Update Reduction Status<\/strong> button.<\/p>\n Below Optimization Summary<\/strong>, you\u2019ll see Image Information<\/strong>.<\/p>\n The top section of Image Information<\/strong> is where you submit your request.<\/p>\n The bottom area of this section shows you what’s happening with your current request.<\/p>\n All of this happens behind the scenes after you’ve pressed the Send Optimization Request<\/strong> button. You can refresh the page to update these numbers, and you can leave the page while optimization is running, if you’ve got other things to do.<\/p>\n If you are unhappy with the way an image was optimized, you have the ability to restore it back to the original version. From the WordPress Dashboard, navigate to Media > Library<\/strong>, choose the list view, and hover over the image you\u2019d like to revert.<\/p>\n Click If you have enabled WebP images globally, you can disable it for individual images using the I created a few image-heavy blog posts, using differently-sized images for each.<\/p>\n With no optimization whatsoever, my post with the largest images in it had to transfer 14,070,859 bytes of imagery. After optimization, it was 9,467,154 bytes. Nice! And when I enabled WebPs, it was even better at 7,249,465 bytes! Image optimization cut the image size nearly in half.<\/strong><\/p>\n Your mileage will vary based on how optimized your images already are when they\u2019re uploaded. If you\u2019re a photographer, and you take pains to export your images from Lightroom or Photoshop already nicely-optimized, you will see much less of an improvement (if any) than someone who doesn\u2019t pay too much attention to their imagery before upload.<\/p>\n I saw this in action on a post where the imagery transfer took 353,370 bytes before and after<\/em> optimization. My images were clearly already optimized. However, when I enabled WebP, it went down to 250,520 bytes. So at the very least, you should be able to see some<\/em> improvement by enabling WebP.<\/p>\n Image Optimization<\/strong> has been a popular topic on our WordPress forum lately, and there have been a lot of questions about what, exactly, it is doing to your photos. I hope that this has lifted some of the mystery. And if you still have questions, please do ask!<\/p>\n — Don\u2019t forget to meet us back here next week for the next installment. In the meantime, here are a few other things you can do:<\/p>\n Have you ever wished that your site\u2019s images didn\u2019t take so long to transfer? Well, here is something you can do about it!<\/p>\n","protected":false},"author":1,"featured_media":8552,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[144,316,317],"class_list":["post-8550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cache","tag-image-optimization","tag-wordpress","tag-wordpress-wednesday"],"jetpack_featured_media_url":"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-4.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts\/8550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/comments?post=8550"}],"version-history":[{"count":0,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts\/8550\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/media\/8552"}],"wp:attachment":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/media?parent=8550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/categories?post=8550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/tags?post=8550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Image Optimization<\/h2>\n
\n
![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-1.jpeg\" "\\"\\"")
<\/p>\n\n
yourimage.bk.jpg<\/code>: the original version of your image.<\/li>\nyourimage.jpg<\/code>: the optimized version of your image, which is what will be shown on your site from now on.<\/li>\nyourimage.jpg.webp<\/code>: is a version of your image saved in a format that is about 25%-34% smaller than JPG (learn more<\/a>).<\/li>\n<\/ul>\nyourimage.jpg<\/code> was unable to be optimized for any reason (maybe it was already optimal) there will be no new version generated, and therefore no yourimage.bk.jpg<\/code>. There will<\/em> be a WebP format saved, though.<\/p>\nUsing multiple plugins<\/h3>\n
How do I use Image Optimization on my WordPress Site?<\/h2>\n
Settings<\/h3>\n
![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-5.png\" "\\"\\"")
<\/p>\n![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-6.png\" "\\"\\"")
<\/p>\n.webp<\/code> file format we mentioned earlier? If you would like to use WebP images in place of all of your JPGs and PNGs, turn the Image WebP Replacement<\/strong> option on.<\/p>\nOptimize<\/h3>\n
![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-7.png\" "\\"\\"")
<\/p>\n![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-8.png\" "\\"\\"")
<\/p>\n\n
\n
Restore<\/h3>\n
![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-9.png\" "\\"\\"")
<\/p>\nRestore Original File<\/code> and everything goes back to normal.<\/p>\nDisable WebP<\/code> link.<\/p>\nComparing Pages With and Without Optimization<\/h2>\n
![\"\"](\"https:\/\/lswp.store\/wp-content\/uploads\/2017\/11\/null-10-404x1024.png\")
<\/a><\/p>\n
\nHave some of your own ideas for future WordPress Wednesday<\/a> topics? Leave us a comment!<\/p>\n\n