#CLOUDINARY OPTIMIZE IMAGES SOFTWARE#
#CLOUDINARY OPTIMIZE IMAGES DOWNLOAD#

It doubles the size of the image but it is necessary to have a sharp image on a smartphone or a computer with a Retina screen. Some improvements can be done on devicePixelRatio (DPR), whatever the quality of the screen, we always ask Cloudinary to give us a DPR of 2. Cloudinary detects through the browser User-Agent that the request is made from Firefox which supports WebP.

f_auto outputs the image as WebP if possible.

To explain how it works, you can see parameters in the image URL: q_auto:eco, f_auto, dpr_2/ w_40, h_40,c_fill, g_face/ykjk4zogkkrjqywvsxl6 Change the image format to WebP because the browser of the user was compatible ( like Chrome, Edge, or Firefox).Compress the image to a visual quality acceptable for humans.Scale down to 40x40 pixels with a pixel density of 2, so the final image dimensions are 80x80 pixels.How was it reduced so much? Because we asked Cloudinary through an URL to: After optimization, this image becomes two images that weigh 1.17 KB and 2.22 KB respectively on recent browsers. The original image as you can see above is a 220x300 JPG image which weighs almost 19.59 KB and is used to display the small thumbnail in the search bar and the medium thumbnail in the profile page. We can crop, focus on the face of the doctor, scale to a resolution at specific pixel density, compress, change the format, etc. In this case, to optimize image size we use Cloudinary to make on-the-fly image transformations with a dynamic URL. They can be found in the search results for doctors as a thumbnail, on the doctor’s profile in a medium size or in its original size without transformation in a slideshow as shown in the following captures with Dr Manhattan, one of our doctors in the development environment. In addition, these profile pictures are displayed on several screens in very different sizes. We do not have control over the quality, resolution and weight of these images.

Some images are uploaded by doctors, such as their profile picture. To avoid adding unoptimized SVG files to our codebase, we use SVGO which checks and lets developers optimize them with a command we’ve reduced to a simple `yarn optimize:svg`.

ImageOptim can do these optimizations but I prefer using JPEG mini, I found their compression algorithm impressive.

So in addition to the metadata, the weight gain can be substantial. JPEGs can contain some visual details that are not visible to the human eye. More than 31% gain in average per image without loss Clearly this metadata is useless for your users and can be removed from the file.

#CLOUDINARY OPTIMIZE IMAGES SOFTWARE#

PNG and SVG are lossless data compression image formats but both can contain metadata like information about the software which produces the image, color profiles, element identifiers, comments, etc. These images are part of our codebase, so they can easily be optimized. Most of our static images are PNG illustrations and SVG icons, but we also have a few JPEG photos. Because two thirds of our patient website users are on a mobile device, image optimization is important for us.

#CLOUDINARY OPTIMIZE IMAGES DOWNLOAD#

Images are a big part of what browsers need to download to display web pages.Įven though internet connections have become faster and faster, you do not always have a fast connection, especially when you are on a mobile device in a subway or in some other part of the globe.Īnd after all, even if your connection is fast, why download 2 MB for an image if you can have the same image by only downloading 100 KB? Be nice to polar bears, save bandwidth.Īt Doctolib, we have static illustrations and a huge amount of photos uploaded by doctors to present their profile and their practice.

Cloudinary optimize images