Responsive Images and Performance Optimization using Cloudinary

Using images on contemporary websites correctly is not the easiest task. Different devices with different resolutions and pixel densities require much more than just a default image file. Even though high-resolution displays require large images, the files have to be kept as small as possible due to limited data plans, especially on mobile devices. This is not an easy undertaking. However, the cloud-based image management solution Cloudinary turns it into one. Today, you'll learn how simple image and performance optimization with Cloudinary can be.

Cloud-based Image Management Solution Cloudinary

Among the many cloud services, Cloudinary has specialized in image management and optimization. The service allows you to upload pictures, and integrate them in your website or blog in different resolutions, formats, and qualities. In addition to that, you can add plenty of effects like vignettes and blurs, and alter contrast, brightness, and saturation on the fly. You can edit images from the Cloudinary interface, and then tie them into your web project via a generated URL. Extensive Ways of Altering and Optimizing Images The URL contains all information like image resolution, format, as well as all effects that you applied. Thus, you can also make adjustments directly via the URL.

http://res.cloudinary.com/demo/image/upload/c_fill,e_sepia,q_80,h_425,r_30,w_640/demo.jpg

The example shows how image settings are transferred via URL. "c_fill" ("c" for "crop") makes sure that the picture is cropped to fill the entire image area and, if necessary, certain parts of the picture are cut out. "e_sepia" ("e" for "effect") creates a sepia effect on the picture. There are more than 30 filters that are similar to the ones available in Photoshop, and other image editing applications. "q_80" ("q" for "quality") defines the image quality and the values "h_425" and "w_640" ("h" for "height" and "w" for "width") determine width and height of the picture. Example of a Manipulated Image This way, you create suiting image versions without having to use the Cloudinary interface. However, using PHP or jQuery is also supported.

$.cloudinary.image("demo.jpg", {effect: "sepia", height: 425, quality: 10, radius: 30, width: 640, crop: "fill"})

The jQuery example generates the same image file as the URL example. For those that prefer working with PHP, there's a proper PHP class that works similarly to the jQuery example.

Cloudinary: Considering Pixel Density

Modern displays have a much larger pixel density and can display images at a much higher resolution than conventional monitors. High-resolution images can also be defined in modern web design. To do so, the "srcset" attribute was added, which you can use to load images for different pixel densities. Image for Different Pixel Densities As modern smartphones and tablets usually come with high-resolution displays, it makes a lot of sense to distribute the image files for high pixel densities. Cloudinary also helps you with that. It doesn't take much effort to have it give out files in different densities for each image. To do so, a pixel density is simply sent to the image URL via "dpr_x".

http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_2/demo.jpg

In the example, an image with doubled image density is returned. Thus, the actual image resolution is not 640 x 425 pixels, but 1280 x 850 pixels. The different image version should be implemented within the "<img>" element via "srcset".

<img src="http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425/demo.jpg"
  srcset="http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425/demo.jpg,
  http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_2/demo.jpg 2x,
  http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_3/demo.jpg 3x
" />

Image and Performance Optimization With Cloudinary: Unlimited Responsitivity

Those that use large format images when it comes to web design should use smaller image files on smaller displays, to avoid an unnecessary page load. Due to the "<picture>" element, different image files for different resolutions can be implemented rather quickly. With Cloudinary, you can create different resolutions for your pictures and then integrate them into your website. Often, however, images are not displayed in set widths but to adapt to the width of the viewport. I will use jQuery to show you how to reach that goal. To do that, first, access the image file via the data attribute in an "<img>" element. Assign the class "cld-respnsive". Here, you don't enter a width. Instead, set "w_auto", for an automatic width.

<img data-src="http://res.cloudinary.com/demo/image/upload/w_auto/demo.jpg" class="cld-responsive">

Subsequently, a plugin is loaded via jQuery.

$.cloudinary.responsive();

The plugin assures that there will always be a generated image file for the picture's current display size. This way, you can set up multi-column galleries, for example, which orientate themselves towards the browser window's entire width. Always Have Images in Galleries be Distributed Perfectly Fitting For example, when an image is supposed to display at a width of 200 pixels, the images are generated and distributed with this exact width - done in the background by Cloudinary. This allows you to avoid the integration of unnecessarily large files, and helps you make your website slim and fast. Those that also want to consider pixel density add "dpr_auto" in addition to "w_auto".

<img data-src="http://res.cloudinary.com/demo/image/upload/w_auto,dpr_auto/demo.jpg" class="cld-responsive">

Furthermore, Cloudinary also loads the appropriate images when enhancing or reducing the browser window. By default, changes to the browser size starting at 10 pixels are considered.

Image Quality and Format

Displaying entirely appropriate image files without having to scale down pictures in the browser is a major step for optimal image display that saves resources. However, there are two other important adjusting screws for small file sizes. For one, there's the image format. JPEG and PNG files are the most common formats alongside the still popular PNG. Each has its advantages. JPEGs are mainly useful for photos and large images while PNGs are used for graphics, as well as everything that requires an alpha channel. However, depending on the browser, there are other image formats available as well. For example, Google Chrome supports the WebP format, which creates significantly smaller files than JPEG and PNG. Microsoft also has its image format called JPEG-XR, which has a much better compression, but is only displayed in the Internet Explorer starting from version 9, and Edge. Using Cloudinary, you don't have to worry about the correct file format. Via "f_auto", you let the service decide which format is the best.

http://res.cloudinary.com/demo/image/upload/f_auto/demo.jpg

In the example, a different format is used if needed, ignoring the file extension "jpg". In Chrome, for example, the image is displayed as a WebP file, and in Internet Explorer, it is shown as a JPEG-XR. On top of being able to determine the format, you can also define the image quality. For that, use a value between 10 and 100 ("q_80", for example). Depending on the picture's content, sometimes a stronger, and sometimes a weaker compression makes more sense. "JPEGmini" to Always Have Optimal Results Using the plugin "JPEGmini", which is free for up to over 100 compressions, images are always optimally compressed. The plugin itself decides which compression is the best for each picture. You don't need to manually try which quality makes the most sense.

Image and Performance Optimization With Cloudinary: Conclusion and Prices

Cloudinary is an extensive cloud-based image management service that is more than helpful when it comes to optimizing images for the web. Especially those that work without a content management system will find a valuable assistant in Cloudinary. Cloudinary will flawlessly and automatically compress and crop images, and adjust their formats for you. Additional effects, text insertion, and other tools round up the service. Generating and loading of images are very fast as well. This is an important aspect that shouldn't be underestimated. Nowadays, different types of devices, resolutions, and pixel densities make it necessary to have one image prepared in a manually unmanageable amount of versions. Cloudinary does a good job here and is very easy to use. On top of that, the service is free to use for most websites. Anyone that hosts up to 75,000 images, and doesn't exceed the limit of 7,500 conversions a month, can use the service for free. 2 Gigabytes of storage and 5 Gigabyte of monthly bandwidth are included. If you need more than that, you can choose from four offers from 44 to 224 dollars a month. There are no restrictions on features for any of the plans. Disclaimer: This article is sponsored by Cloudinary. They took no influence on what we wrote, however. (dpe)