![]() ![]() Check out the details in our Image transformation reference.Īlso, if a lossy compression as described above with the quality parameter degrades the image a bit too much for you, you can always opt for a lossless compression by converting your images to WebP format and adding a lossless parameter like so: fm=webp&lossless=1. If the WebP format isn't supported, the image will be converted to PNG instead. For example, by combining the auto parameter with the fm one: fm=png&auto=format. ![]() To make sure your app or web won't appear broken where WebP isn't yet fully supported, such as Safari browsers, it's good to have a fallback strategy in place. There is no native iOS support yet, but you can try using a 3rd party WebP plugin as a workaround.Lossy WebP images are supported in Android 4.0 (API level 14) and higher, and lossless WebP images are supported in Android 4.3 (API level 18) and higher.You can take advantage of the auto parameter that automatically delivers the image in a WebP format to the browsers that support it. Using the next-gen file format known as WebP comes with a lot of perks – images in this format are smaller without having to compromise on the resulting image quality. Let's see how much bandwidth you can save by converting your image to the right format for your use case. This method can save you a big chunk of the image size if lossy image compression is acceptable for your site or an app. You can set this parameter anywhere from 0 to 100 with lower values resulting in more compressed images. One thing to keep in mind is that the conversion for lossy formats, such as jpg, pjpg, and webp (which can also be lossless) can be controlled by using the quality ( q) parameter. Once you determine the best format for your use case, you can use the format ( fm) parameter to convert your image to a different format. But for any other regular images, JPG is a better choice because of its smaller size and thus faster loading time. ![]() For example, if you need to preserve fine detail with a high resolution, you'd use PNG. The file format you choose for your images should be carefully picked depending on how and where you plan to use it. Once you have your images resized, it's time to think about serving them in the right format. At the same time, setting dpr=3 for high-DPR devices ensures that the image is as sharp as possible for those screens. The rule of thumb is to develop graphics that are larger than what they would be represented on a standard screen and then scale accordingly.įor an image on a low-DPR device, setting dpr=1 saves 346 kB over dpr=3, resulting in a 5x faster load speed for that device. This parameter eliminates the need to maintain multiple copies of the image to support different screen densities, such as for Retina displays (dpr=2 or 3) or Android devices (anywhere from 1.5 to 3.75). There's one more parameter that can prove useful in combination with the width and height of an image – device pixel ratio ( dpr). ![]() For example, setting an image height to h=0.5 will result in an image decreased in its height by 50%.Įxample #4: Adapting to different screen densities This means having the parameters set to a value between 0 and 1. If you have a number of images that you need to scale down by the same amount, for example, to 50% of the original dimensions, it's best to use the percentage-based sizing of the width and height. Parameters used: w=360&h=740&fit=crop Example #3: Percentage-based resizing So let's look into a few techniques that you can try to improve your site or app performance by optimizing your images. Smaller image file sizes use less bandwidth and thus cost you less. What's more, search engine indexers might (and probably will) penalize your website if you use unoptimized images. For one, having a fast-loading website or an app creates a better user experience and visitors are more likely to stay and interact with it. There are many benefits to looking into image optimization. Combine asset renditions with image transformation to optimize the customized images by adjusting their size, format, or compression. Asset renditions use a subset of the image transformation URL parameters. Content creators use asset renditions to customize images they insert into their content and you use image transformation to optimize the images. Image transformation and asset renditionsīesides the image transformation options, there's also a thing called asset renditions. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |