{"id":2826,"date":"2018-01-08T13:12:12","date_gmt":"2018-01-08T13:12:12","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=2826"},"modified":"2018-08-22T06:36:46","modified_gmt":"2018-08-22T06:36:46","slug":"complete-guide-image-compression-reduce-image-sizes-faster-sites","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/complete-guide-image-compression-reduce-image-sizes-faster-sites\/","title":{"rendered":"The Complete Guide to Image Compression: How to Reduce Image Sizes for Faster Sites"},"content":{"rendered":"<p>Smooth. Sleek. Efficient. It\u2019s a great feeling to trim the fat, whether you\u2019re outlining your work schedule or simply cleaning your home. But when it comes to your site, removing excess isn\u2019t just for your benefit, it\u2019s best for your visitors and customers as well. Digital image compression, and data compression in general, makes your site run faster with less data to load. That means trimming the fat is better for business.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-2983\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2018\/01\/shortpixel2.png\" alt=\"shortpixel image optimization\" width=\"650\" height=\"455\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/shortpixel2.png 650w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/shortpixel2-300x210.png 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>We now know <a href=\"https:\/\/kinsta.com\/learn\/page-speed\/\" target=\"_blank\" rel=\"noopener noreferrer\">website speed directly affects both the site\u2019s quality and the user experience (UX)<\/a>, but did you know the <a href=\"https:\/\/www.hobo-web.co.uk\/your-website-design-should-load-in-4-seconds\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google algorithm also factors in speed when ranking search page results<\/a>? The significance of site speed only increases as modern users come to expect faster and faster sites, but luckily tech breakthroughs are keeping pace to meet those expectations, namely image compression.<\/p>\n<p><!--more--><\/p>\n<p>No matter what kind of site you have, you can always improve its speed through digital image compression. It\u2019s quick, easy, and painless; the only reason everyone isn\u2019t doing it already is because they just don\u2019t know how.<\/p>\n<p>And that\u2019s what this article is about. Below, we explain everything you need to know about digital image compression, no matter whether you\u2019re a beginner or expert. Take a look below and learn how to reduce image sizes and make your site as smooth, sleek, and efficient as possible!<\/p>\n<p>&nbsp;<\/p>\n<h4>Data Compression: Smaller Files Mean Faster Sites<\/h4>\n<p>Let\u2019s start by discussing <a href=\"http:\/\/searchstorage.techtarget.com\/definition\/compression\" target=\"_blank\" rel=\"noopener noreferrer\">data compression<\/a> in general. With regards to site management, data compression, or data compaction, refers to reducing the size of data files without affecting how the final result is loaded or viewed. Sometimes data compression has no effect on the final result (lossless), and sometimes it has a minimal or hardly perceivable effect (lossy). We\u2019ll explain lossy vs. lossless image compression in the next section.<\/p>\n<p>Data compression works by finding and removing the unnecessary elements of a file, usually through an algorithm, and by rewriting the code so that it\u2019s more efficient. To explain it better, let\u2019s use a simplified example. Take a look at this sentence, which only uses 4 letters:<\/p>\n<p style=\"text-align: center;\">A rat ate a treat at tea.<\/p>\n<p>Using basic binary, we could attribute two bits (binary digits) to each letter character.<\/p>\n<p>A = 00<br \/>\nT = 01<br \/>\nR = 10<br \/>\nE = 11<\/p>\n<p>Since the sentence uses 18 characters, our initial code would have 36 bits.<\/p>\n<p>But notice that the letter A occurs more frequently than the others, and the letter T occurs the second most. We can then create a new code adjusting for how frequently each character is used:<\/p>\n<p>A = 0<br \/>\nT = 10<br \/>\nR = 110<br \/>\nE = 1110<\/p>\n<p>Using this new code customized to this specific data file, the final result would be only 32 bits instead of the original 36. That\u2019s more than a 10% compression, without affecting the data at all.<\/p>\n<p>Now, imagine this on a larger scale, with pages and pages of text and codes for HD images. You can see how making your data files more efficient can greatly reduce their file size, therefore making your site load faster \u2014 and without affecting the end result.<\/p>\n<p>&nbsp;<\/p>\n<h4><\/h4>\n<h4>Lossy vs. Lossless Image Compression<\/h4>\n<p>A lot of people are confused about the difference between lossy and lossless image compression, so let\u2019s take a moment to clear that up.<\/p>\n<p>It\u2019s really quite simple. Lossy image compression means when the file loses some quality during the compression, even if imperceivable. Lossless image compression means that no quality whatsoever is lost.<\/p>\n<p>Lossy image compression is the preferred option to reduce image sizes; you can often cut the file size in half or more (<a href=\"https:\/\/shortpixel.com\/free-sign-up\" target=\"_blank\" rel=\"noopener noreferrer\">ShortPixel goes up to 98% in some cases<\/a>) without any noticeable effects on the final image.<\/p>\n<p>If you\u2019re more concerned with image integrity, lossless is the best choice. Lossless image compression doesn\u2019t reduce image sizes as much as lossy, but you can rest assured your image quality remains the same.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-2979\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_2_lossless-1.png\" alt=\"\" width=\"790\" height=\"330\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_2_lossless-1.png 790w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_2_lossless-1-300x125.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_2_lossless-1-768x321.png 768w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/p>\n<p>Or, you could use ShortPixel Glossy option &#8211;\u00a0a <a href=\"https:\/\/shortpixel.com/blog\/glossy-image-optimization-for-photographers\/\" target=\"_blank\" rel=\"noopener noreferrer\">lossy optimization algorithm calibrated for the photographer\u2019s needs<\/a>:<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-2980\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_1.png\" alt=\"\" width=\"604\" height=\"252\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_1.png 790w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_1-300x125.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/short_pixel_comparatie_1-768x321.png 768w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/p>\n<p>(Photo by <a href=\"https:\/\/unsplash.com\/photos\/5q5CAz_bOAg?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Dominik Scythe<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a>)<\/p>\n<h4><\/h4>\n<p>&nbsp;<\/p>\n<h4>PNG, GIF, and JPEG Image Compression<\/h4>\n<p>When you hear mention of digital image compression or graphics image compression, it refers to the variety of methods for reducing image file sizes. In digital platforms, these are usually methods to compress PNG, GIF, and JPEG files.<\/p>\n<p>To be clear, PNG, GIF, and JPEG formats are all forms of image compressions themselves \u2014 formats to both compress image files and standardize them so more programs can read them. But, you can further compress PNG, GIF, and JPEG files using an image compressor like ShortPixel to reduce the sizes even more.<\/p>\n<p>All three formats have their unique properties, with individual advantages and disadvantages:<\/p>\n<p>&nbsp;<\/p>\n<h5>JPEG Compression<\/h5>\n<p>Named after its founding committee the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Joint_Photographic_Experts_Group\" target=\"_blank\" rel=\"noopener noreferrer\">Joint Photographics Expert Group<\/a>, JPEG files were designed to reduce image sizes for better image optimization. JPEG compression can create millions of colors by mixing and combining 3 primary colors \u2014 red, blue, and green. This makes JPEGs ideal for photography and photorealism; however, they are lossy and not lossless, so it rarely creates perfect compressions.<\/p>\n<p>&nbsp;<\/p>\n<h5>GIF Compression<\/h5>\n<p>The Graphic Interchange Format relies on a fixed palette of 256 colors, restricting its range of colors but keeping file sizes small. GIFs are perfect for simple animations and icons, but a poor choice for detailed images due to their limited colors.<\/p>\n<p>&nbsp;<\/p>\n<h5>PNG Compression<\/h5>\n<p>Somewhere in the middle of JPEG and GIFs lies Portable Network Graphics, which has two variants: PNG-8 and PNG-24.<\/p>\n<p>Like GIFs, PNG-8 uses the same 256-color palette, but has better transparency options and usually exports slightly smaller files. However, PNG-8 does not have GIF\u2019s animation options.<\/p>\n<p>The lossless PNG-24 format is for more complex images, able to recreate millions of colors like JPEG compression. Unlike JPEGs, PNG-24 offers better transparency options, but is not as compatible with as many apps and platforms as JPEG. PNG-24 are also easier to edit without reducing quality.<\/p>\n<p>&nbsp;<\/p>\n<h4>Photography Blogs and WordPress Image Compression<\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-2982\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2018\/01\/annie-spratt-74027.jpg\" alt=\"Photographers Blogs\" width=\"650\" height=\"432\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/annie-spratt-74027.jpg 650w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2018\/01\/annie-spratt-74027-300x199.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>(Photo by <a href=\"https:\/\/unsplash.com\/photos\/68tR2jJskz0?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Annie Spratt<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a>)<\/p>\n<p>Every site has images and therefore every site can benefit from image compression. But the more images on a site, the greater the effects of an image compressor.<\/p>\n<p>WordPress sites can take advantage of WordPress image compression plugins to compress their image automatically. Take our <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener noreferrer\">ShortPixel WordPress plugin<\/a>, which batch-compresses automatically so all you do is install it and never worry about it again. (Our plugin also features a \u201cGlossy\u201d option for high-quality lossy compression, ideal for photographers and all-around image optimization.)<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-2829\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2017\/11\/pexels-photo-326097-1024x576.jpeg\" alt=\"\" width=\"604\" height=\"340\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2017\/11\/pexels-photo-326097-1024x576.jpeg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2017\/11\/pexels-photo-326097-300x169.jpeg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2017\/11\/pexels-photo-326097-768x432.jpeg 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2017\/11\/pexels-photo-326097.jpeg 1260w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><br \/>\nSource: <a href=\"https:\/\/pixabay.com\/en\/wolf-snow-cold-eye-green-piercing-2043464\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pixabay<\/a><\/p>\n<p>Photography blogs in particular need to choose the right image compressor not only because they have more images, but also place more emphasis on image quality. Especially if uploading in HD quality, all that image file data adds up fast. To keep page loading times down to an acceptable timeframe, image compressors are practically essential.<\/p>\n<p>&nbsp;<\/p>\n<h4><\/h4>\n<h4>Image Compression Techniques<\/h4>\n<p>In addition to choosing the appropriate image file format, you can go the extra mile and compress PNG, JPEG, GIF, and other image types a second time using an image compressor, or do it yourself in PHP.<\/p>\n<p>&nbsp;<\/p>\n<h5>Online Image Compressors<\/h5>\n<p><a href=\"https:\/\/shortpixel.com\/online-image-compression\" target=\"_blank\" rel=\"noopener noreferrer\">Image compressors<\/a> are software that run an algorithm for reducing file sizes for maximum image optimization. Often, image compressors let you chose between lossy or lossless (or \u201cglossy\u201d in our case).<\/p>\n<p>For small jobs or individual images, you can use a free online image compressor. These work well, however, they often have limitations since they\u2019re free; most of the time, you can\u2019t batch upload, and are limited to a certain number of pictures or file size. Some free online image compressors don\u2019t reduce image sizes as much as they can unless the user pays for the premium service.<\/p>\n<p>If you\u2019re serious about image compression and site optimization, you\u2019ll need to invest in a paid image compressor service. The advantages of premium image compressors are:<\/p>\n<p>&#8211; greater capacity of images<br \/>\n&#8211; bulk\/batch uploads<br \/>\n&#8211; no file size restrictions<br \/>\n&#8211; better support options<\/p>\n<p>The beauty of <a href=\"https:\/\/shortpixel.com\/online-image-compression\" target=\"_blank\" rel=\"noopener noreferrer\">image compressors<\/a> is how easy they are to use. Often, all you have to do is upload the image and the compressor handles the rest \u2014 sometimes, as with our WordPress plugin, you don\u2019t even have to do this because it\u2019s automatic.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h5>PHP Image Compression<\/h5>\n<p>If you\u2019re comfortable with coding and have some time to spare, you can also compress images yourself in PHP with its built-in function. With this snippet, you can alter the quality of the image by inputting your own variable between 0 &#8211; 100.<\/p>\n<p>&nbsp;<\/p>\n<pre>&lt;?php\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 function compress_image($source_url, $destination_url, $quality) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $info = getimagesize($source_url);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ($info['mime'] == 'image\/jpeg')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $image = imagecreatefromjpeg($source_url);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 elseif ($info['mime'] == 'image\/gif')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $image = imagecreatefromgif($source_url);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 elseif ($info['mime'] == 'image\/png')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $image = imagecreatefrompng($source_url);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 imagejpeg($image, $destination_url, $quality);\r\n\u00a0\u00a0\u00a0 return $destination_url;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>(Don\u2019t forget to make sure the GD library for PHP is installed.)<\/p>\n<p>If code goes over your head, or you simply don\u2019t want to waste time manually writing this for each image, it\u2019s best to use a image compression tool instead. For example, ShortPixel algorithm are pretty smart and don&#8217;t apply the same compression ratio for all images, being able to judge the picture quality of the original images.<\/p>\n<p>&nbsp;<\/p>\n<h4><\/h4>\n<h4>Takeaway<\/h4>\n<p>Easy, inexpensive, and effective \u2014 image compression is so useful, it\u2019s sure to become a site management necessity in the next few years. But you can get ahead of the curve today by implementing it in your posts now. See for yourself with our <a href=\"https:\/\/shortpixel.com\/online-image-compression\" target=\"_blank\" rel=\"noopener noreferrer\">quick image optimization test<\/a>, or download our <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener noreferrer\">free ShortPixel WordPress plugin here<\/a>.<\/p>\n<div class=\"_3bJ2H CHExY\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Smooth. Sleek. Efficient. It\u2019s a great feeling to trim the fat, whether you\u2019re outlining your work schedule or simply cleaning your home. But when it comes to your site, removing excess isn\u2019t just for your benefit, it\u2019s best for your visitors and customers as well. Digital image compression, and data compression in general, makes your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-2826","post","type-post","status-publish","format-standard","hentry","category-image-optimization"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/2826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=2826"}],"version-history":[{"count":13,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/2826\/revisions"}],"predecessor-version":[{"id":3546,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/2826\/revisions\/3546"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=2826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=2826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=2826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}