{"id":21941,"date":"2019-08-19T16:33:15","date_gmt":"2019-08-19T16:33:15","guid":{"rendered":"http:\/\/vue_js_tutorial_image_optimization_for_web_apps"},"modified":"2024-06-01T14:41:45","modified_gmt":"2024-06-01T21:41:45","slug":"vue_js_tutorial_image_optimization_for_web_apps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/vue_js_tutorial_image_optimization_for_web_apps","title":{"rendered":"Vue.js Tutorial: Image Optimization for Web Apps"},"content":{"rendered":"

Launched in 2014 as an open-source JavaScript framework for building user interfaces for web apps, Vue.js has become a tool of choice for many developers. Currently, Vue.js is the most starred front-end JavaScript framework on GitHub<\/a> with over 145,000 stars.<\/p>\n

Optimizing images<\/a> that reside in Vue.js apps with the Cloudinary Vue SDK<\/a> is a cinch. This article explains why and describes the steps.<\/p>\n

Background<\/h2>\n

The smaller an image, the faster the browser can download it for display. Optimizing images means delivering them in the smallest-possible size without<\/strong> losing visual quality, leading to bandwidth savings and faster loading of websites.<\/p>\n

That image optimization is mandatory for all websites is a case that can easily be made. That\u2019s because faster image loading on websites invariably lifts audience conversion rates. In fact, studies have shown that half the online visitors expect a website to load within two seconds.<\/p>\n

Cloudinary the Media Full-Stack Platform<\/h2>\n

With Cloudinary, you can effectively and efficiently optimize digital media\u2014regardless of the programming language in which you code\u2014because Cloudinary automatically performs most of the related tasks by default. Besides, the platform\u2019s delivery process through integrated content delivery networks (CDNs) ensures prompt transmission to both desktop and mobile audiences.<\/p>\n

After uploading images to Cloudinary, you can leverage its major capabilities, as described in the subsections below. For details on other Cloudinary options for optimizing images, read the documentation section Image Transformations<\/em><\/a>.<\/p>\n

Automatic Quality Adjustment and Encoding<\/h3>\n

Adding the q_auto<\/code> parameter to an image\u2019s URL enables Cloudinary to select the optimal quality-compression level and encoding settings according to the image content, format, and viewing browser. The result is, gratifyingly, a smaller image that still retains its original visual quality. See this example:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"woman\"<\/a><\/p>\n

To further adjust the visual quality, edit q_auto<\/code> to read q_auto:best<\/code>, q_auto:low<\/code>, q_auto:good<\/code>, or q_auto:eco<\/code>.<\/p>\n

Automatic Formatting<\/h3>\n

Adding the f_auto<\/code> parameter to an image\u2019s URL enables Cloudinary to analyze the image content and select the best format for delivery, such as WebP<\/a> for Chrome browsers or JPEG-XR for Internet Explorer browsers. For all other browsers, Cloudinary delivers images in their original format.<\/p>\n

Note:<\/strong>

With f_auto<\/strong> and q_auto<\/strong> set, Cloudinary would, as a rule, pick WebP or JPEG-XR for display on Chrome or IE, respectively. However, if the quality algorithm determines that PNG-8 or PNG-24 is optimal, Cloudinary might pick either of those formats for certain images.<\/p><\/div>\n

Resizing and Cropping<\/h3>\n

To resize an image, add either or both of these two parameters to the URL: width (w<\/code>) and height (h<\/code>). Cloudinary leaves the aspect ratio as is while performing resizing tasks.<\/p>\n

Here are three examples:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"sample\"<\/a>\n\n Loading code examples<\/span>\n <\/cld-code-widget>\"sample\"<\/a>\n\n Loading code examples<\/span>\n <\/cld-code-widget>\"sample\"<\/a><\/p>\n

To have Cloudinary crop an image, add the crop (c<\/code>) parameter to the URL and specify one of these modes: scale<\/code><\/a>, fit<\/code><\/a>, mfit<\/code><\/a>, fill<\/code><\/a>, lfill<\/code><\/a>, limit<\/code><\/a>, pad<\/code><\/a>, lpad<\/code><\/a>, mpad<\/code><\/a>, crop<\/code><\/a>, thumb<\/code><\/a>, imagga_crop<\/code><\/a>, or imagga_scale<\/code><\/a>.<\/p>\n

Vue.js Tutorial: Image Optimization in Web Apps<\/h2>\n

This section describes how to optimize images in Vue.js apps with the Cloudinary SDK.<\/p>\n

Automatic Quality and Encoding<\/h3>\n

You can edit the quality level of images in Vue.js apps with JavaScript code, for example:<\/p>\n

<cld-image<\/span> publicId<\/span>=\"cave.jpg\"<\/span> ><\/span><cld-transformation<\/span> quality<\/span>=\"50\"<\/span> \/><\/span><\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here, under quality<\/code>, 50<\/code> is your choice of quality level on a 0-100 scale. The lower the level, the smaller the image size. The higher the level, the larger the size and the better the quality.<\/p>\n
But why do it manually like that? Instead, automate that compression task by taking advantage of Cloudinary with this code:<\/p>\n
<cld-image<\/span> publicId<\/span>=\"prosper.jpg\"<\/span> ><\/span>\n  <cld-transformation<\/span> quality<\/span>=\"auto\"<\/span> \/><\/span>\n<\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Adding the quality=\u201dauto\u201d<\/code> parameter is the best way to significantly reduce image size through automation.<\/p>\n
To further narrow the size or to ensure higher-than-average quality, replace auto<\/code> with auto:best<\/code> , auto:good<\/code>, auto:eco<\/code>, or auto:low<\/code>, for example:<\/p>\n
<cld-image<\/span> publicId<\/span>=\"prosper.jpg\"<\/span> ><\/span>\n  <cld-transformation<\/span> quality<\/span>=\"auto:low\"<\/span> \/><\/span>\n<\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Automatic Formatting<\/h3>\n
Adding the fetchFormat=\u201dauto\u201d<\/code> parameter is the best way to ensure that Cloudinary delivers your images in the optimum format to the viewing browser in question. See this code example:<\/p>\n
<cld-image<\/span> publicId<\/span>=\"prosper.jpg\"<\/span> ><\/span>\n  <cld-transformation<\/span> width<\/span>=\"500\"<\/span> fetchFormat<\/span>=\"auto\"<\/span> crop<\/span>=\"scale\"<\/span> \/><\/span>\n<\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Vue.js<\/em><\/p>\n
Image Resizing and Cropping<\/h2>\n
By adding the relevant parameters to the <cld-image><\/code> and <cld-transformation><\/code> Vue.js components, you can resize and crop images, for example:<\/p>\n
<cld-image<\/span> publicId<\/span>=\"family_bench.jpg\"<\/span> ><\/span>\n  <cld-transformation<\/span> width<\/span>=\"150\"<\/span> height<\/span>=\"150\"<\/span> gravity<\/span>=\"faces\"<\/span> crop<\/span>=\"fill\"<\/span> \/><\/span>\n<\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The fill<\/code> cropping method generates an image size of 150 x 150 pixels while retaining the original aspect ratio.<\/p>\n
To change the size, assign new values to the width<\/code> and height<\/code> parameters. Note this neat Cloudinary capability: if you set only width<\/code> or height<\/code>, Cloudinary automatically updates the other parameter to maintain the aspect ratio. An example:<\/p>\n
<cld-image<\/span> publicId<\/span>=\"prosper.jpg\"<\/span> ><\/span>\n  <cld-transformation<\/span> width<\/span>=\"0.5\"<\/span> crop<\/span>=\"scale\"<\/span> \/><\/span>\n<\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here, despite the width adjustment with the 0.5<\/code> value, the aspect ratio remains intact.<\/p>\n
Another example:<\/p>\n
<cld-image<\/span> publicId<\/span>=\"prosper.jpg\"<\/span> ><\/span>\n  <cld-transformation<\/span> width<\/span>=\"200\"<\/span> height<\/span>=\"100\"<\/span> crop<\/span>=\"scale\"<\/span> \/><\/span>\n<\/cld-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here, too, the aspect ratio stays the same notwithstanding the resizing to a width of 200 and a height of 100 pixels.<\/p>\n
Conclusion<\/h2>\n
This Vue.js tutorial for Image optimization<\/a> is paramount for the performance of web apps. Do mount the effort to properly optimize and cache their images. For an excellent insight and suggestions on how to optimize JPEG images without compromising quality, read this Cloudinary article<\/a>.<\/p>\n
\n
Further Reading on Image Optimization<\/h2>\n