The above optimizations reduced the video’s file size from 3.6 MB to 1.4 MB.īe sure that your video player supports the new video codecs, as Cloudinary’s Video Player does. The above optimizations reduced the video’s file size from 3.6 MB to 1.7 MB.įor Android 4.4 and above, serve the highly-optimized VP9 video codec in WebM, q_auto, and resize your videos with the f_webm,vc_vp9,q_auto,w_1280,c_limit parameter, setting the 1280 value to the known maximum width for your videos. Post-optimization, the image shrank from 445 KB to 25 KB.Īs a bonus, if you accept user-generated content, preprocess your images to reduce upload and delivery times.įor native apps, explicitly target the new video codecs described in the (# Optimizations for the Mobile Web) in your URLs.įor iOS 11 and above, take advantage of H.265’s MP4 support, q_auto, and resize your videos with the f_mp4,vc_h265,q_auto,w_1280,c_limit parameter, setting the 1280 value to the known maximum width for your videos. That is, add the q_auto,f_jp2 parameter to your image URLs or apply the transformations through the SDK. Īpplying the above parameter reduced the file size from 445 KB to 21 KB.įor iOS, optimize the quality and apply JPEG2000 formatting to achieve similar results. Just add the q_auto,f_webp parameter to your image URLs or apply transformations through the SDK for image impression on Android. Cloudinary’s responsive solutions for native apps simplify the many complexities in the creation of multiple variants of media assets.įor Android, adopt Cloudinary’s quality-compression algorithm and Google’s optimized image format, WebP, to serve light images to your users. Resizing your images or adopting a responsive app design is important on both iOS and Android. For videos that run for longer than 20 seconds, consider adaptive bitrate streaming to adjust the quality of your video on the fly to accommodate your users’ network conditions.With that one-URL approach, the video size went from 9.1 MB to 520 KB with H.265/MP4 in Safari, 394 KB with VP9/WebP in Chrome, and 821 KB with H.264/MP4 in Firefox. Similar to images, you can also specify f_auto to videos to automatically apply the highly-optimized video codecs, assuming that the browser supports that parameter. With q_auto, the file size shrank from 9.1 MB to 821 KB without impacting the visual quality of the video. To serve the original video with no additional parameters for a quick win, just add q_auto to your URL. Instead of setting a quality value for a video, you can specify q_auto to take advantage of Cloudinary’s intelligent quality and encoding algorithm for videos. vc_auto applies quality 70 ( q_70) and the universally-accepted video and audio settings for the type of file in question. That resize parameter reduced the video size from 9.1 MB to 669 KB.īy default, any transformation implicitly applied with Cloudinary to a video (e.g., resizing, as described above) also includes the video-codec auto ( vc_auto) settings when the transformed video is delivered. Just change the 800 value to the known maximum width for your videos. For example, adding the w_800,c_limit parameter to a video’s URL resizes that video to 800 pixels wide unless the original is smaller. Optimize videos with Cloudinary also by focusing on size, format, and quality, as follows: Impressively, those simple URL parameters reduced the image’s file size from 1.23 MB to 126 KB. To explicitly resize and adjust for resolution, your final image URL would look like this: Cloudinary can generate the URLs required for your tag or srcset. Alternatively, use responsive breakpoints instead.Also, import Cloudinary’s library and include the cld-responsive class in your image tags. Leverage Cloudinary’s JavaScript responsive solution for image resizing by adding the w_auto,dpr_auto,c_limit parameter to your URLs.Implement responsive design, that is, adjust the content’s size, resolution, and layout to fit the application environment.Resize your images if you have specific layout dimensions and know the exact width or height required.Resize or adopt responsive solutions for your images by doing the following:.Add the f_auto,q_auto parameter to all your image URLs to serve the most optimized format and quality to users with no visual degradation whatsoever.Here are the ways to optimize images for mobile with Cloudinary:
0 Comments
Leave a Reply. |