The result weighs only 154KB, which means we saved 64% of file size, without affecting quality. The following URL generates the same 150×100 thumbnail, while converting to animated WebP with 80% quality. Now we can convert this image to animated WebP. The resulting image, in which Cloudinary has already applied certain animated GIF optimizations, weighs 429KB. The following transformation URL and resulting image generates a 150×100 north-filled rectangle of the same animated GIF. You can use Cloudinary’s image transformation URLs to crop and resize animated GIFs. Resizing and cropping animated GIFs and converting to animated WebP This saves 53% of size and bandwidth compared to the 80% quality animated WebP, and represents a size reduction of 87% compared to the original GIF. With quality set to 40%, the visual difference is almost unnoticeable, but the generated file weighs only 195KB. You can see the dynamic transformation URL and the resulting WebP animation below. We’ll set the quality parameter to 40 ( q_40 when providing the URL directly). Let’s try to generate the same animated WebP with a lower quality level. The default quality level, used for the animated WebP above, is 80%, but you can select a different quality level. This means we saved 72% of file size, bandwidth and load time, compared to the original 1.5MB animated GIF.īy default, Cloudinary generates animated WebP in lossy mode. It looks the same as the original image, but weighs only 419KB. The WebP animation above is generated on-the-fly by Cloudinary when the dynamic URL is accessed. If you see a broken image here, try opening this blog post in Chrome (v32 or higher). Note: Animated WebP is currently supported only by the Chrome browser. webp (this tells Cloudinary you want to convert the image to this file format). This URL enables the awebp flag (or fl_awebp if you’re providing the URL directly), and refers to the same image, bored_animation, changing its file extension to. The code samples below, in all popular frameworks, construct a dynamic URL that converts the animated GIF above to an animated WebP. And if you have 1000 daily visitors to your site, your monthly bandwidth for these images alone will be 1.3TB!Ĭloudinary’s media management service has support for uploading, transforming and managing all kinds of media files, including images, videos and audio to emerging media types. If you have 30 such images on your site, that’s a total of 45MB, which takes time to load. Although it is a relatively small image of 279×193, this short video weighs as much as 1.5MB. The following animated GIF of a bored person was uploaded to Cloudinary from Wikimedia. The end result is a full-color, high-quality animated images that weigh much less and are almost visually identical to the original animated GIF files.Ĭonversion from animated GIF to animated WebP In addition, we detail how we automatically deliver Animated WebP files only on supported browsers with graceful degradation to Animated GIFs otherwise. In this blog post we show how you can use Cloudinary’s cloud-based media management service to convert animated GIFs on-the-fly to a WebP Animation. For a single photo frame, JPEG is a much better format both in quality and file size, but JPEG does not support animation.Ī strong contender to replace the animated GIF is Google’s WebP format – with its new WebP animation support. It uses only 256 colors (with no semi-transparent alpha channel) and is better suited for drawings rather than photos or video frames. The GIF format was not meant to be used for full color video. Pages on photo sharing sites, blogs, or even news sites, can become very slow when the page includes even a few animated GIFs that often weigh more than all the images in the page combined. Playing them uses a lot of memory and CPU resources. While it’s a simple image format supported by all web browsers and smartphones, converting videos to animated GIFs creates very large files. The GIF format is far from optimal for this purpose. You now see short videos shared and played as animated GIFs in reputed sites such as Gawker and TechCrunch. Animated GIFs are everywhere, and not only on strange, cheesy web sites – they’ve become mainstream. But where animated GIFs are involved, it seems like the 90s are here again. Fashion isn’t something you’d expect to repeat itself in the technology world – technology advances quickly and hardly ever circles back.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |