![]() ![]() I tend to optimize one or two images at a time, so this solution works great for me. ImageOptim is a program that lives in your Mac’s Dock and you can simply drag and drop images onto the program icon and it will compress them. Guetzli, on average, can reduce file sizes 20-30% more than other algorithms. It also can be configured to use Google’s relatively-new compression algorithm, Guetzli. ImageOptim is only available on OSX, but it supports lossy and lossless compression for both JPEG and PNG files. I started with, and still prefer, ImageOptim. Image Compression Tooling OptionsĪs I recently discovered, there is no shortage of options when it comes to tools and services for image compression. Although, if you’re using a dedicated image compression tool, it’s sometimes best to feed that software the best quality possible and let it’s compression algorithms work from there. Most image editing software allows you to export images at varying quality. This is as much of an art than a science and the level of “acceptable quality” will vary depending on the situation.Ī photography studio will likely want to highlight their work at the highest quality, whereas a real estate website might be willing to sacrifice quality in return for displaying more images on the page. The goal of image compression is to reduce the file size as much as possible without sacrificing too much of the quality. You can see this in action on our jobs page. Reducing the detail and/or normalizing the color is a nice aesthetic style choice that significantly reduces the file size. Protip: For large image backgrounds, I’ll often blur the image a bit or add an opaque color layer over the photo. Most lossy compression tools provide a percentage slider so you can choose the balance of quality over file size. You’ll get better compression results but you’ll sacrifice image quality. ![]() Lossy means the compression algorithm will reduce the quality of your image. This involves stripping metadata from the image or anything that isn’t affecting the quality. Lossless compress means your image won’t lose any quality. Lossless and Lossy – These are compression methods. PNGs can also be optimized significantly after they come out of Photoshop or your graphics editing tool of choice. PNGs are great for things like icons and logos or anything that needs transparency. JPEGs are usually better for high-fidelity images like photos and web graphics that don’t have any transparency. For this tutorial, we’re mainly going to focus on JPEGs and PNGs as they benefit most from compression and optimization. JPEG, PNG, SVG – These are the three most popular image file types on the web. Initial Terminologyīefore we get deeper, let’s establish some common terminology. In this article, we’re going to talk about some tips and tools for compressing images for the web. I had just filmed a video tutorial about enabling and using Google’s new Guetzli algorithm in ImageOptim and I was shocked by all the other options I was previously unfamiliar with. The inspiration for this post stemmed from a very popular post in the Beaver Builders Facebook group. Today, we’re going to talk about a subject near and dear to my heart, image compression! I’m half-kidding, but there is something oddly satisfying about shaving huge percentages off an image file size without diminishing any quality. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |