Cloudinary Blog

4 Image Management Best Practices

Image Management Best Practices
 
There’s no debating the fact that including images on your website or mobile app draws the interest of users and leads to stronger engagement. For example, posts that include images produce 650 percent higher engagement than text-only posts, according to a WebDAM infographic. Use of attention-grabbing images is only going to grow. Consider that by 2018, 84 percent of communication will be visual, the infographic noted. 
 
But delivering a consistent experience – and the optimal image – across a variety of desktop and mobile devices still remains a huge challenge for developers. They need to consider the size of images – since larger files take longer to download, eat up bandwidth and have a negative impact on website performance and user experience – as well as the type of device on which its being viewed and the graphic design in which the image is placed.  
 
Efficient image management is the key when you want to improve engagement with visually appealing images, offer faster loading pages with appropriate image formats, and deliver a consistent experience across a wide range of devices that require different graphic layouts, resolutions and viewports. The goals: to improve development productivity, speed your website to market, and find a way to avoid creating multiple versions of each image to support responsive design. 
 
To help you meet these goals, there are four best practices you should employ:

page load speed
 

1. Optimize Images for Better Performance 

Image optimization involves delivering images with the smallest possible file size while maintaining visual quality. Doing this will save bytes and speed the performance of your website. 
 
To select the optimal image, you must understand all the various factors that influence the image's file size and quality, as well as consider what actions may result in unnecessary bandwidth use, such as wasteful browser-side resizing, delivering static icons one by one and using a single image size across all delivery mediums.  
 
One of the major aspects of image optimization involves selecting the correct format to deliver to your users, and avoiding use of unnecessarily high image quality images. You should look for a solution that dynamically selects the most efficient format – either traditional JPEG, PNG and GIF, or modern formats, such as WebP developed by Google and JPEG-XR developed by Microsoft – and automatically adjusts the compression quality appropriately for every scenario. 
 
With growing use of responsive design, you’ll need to make sure that you also are able to scale and crop images to fit any page layout, on any device.
 
In this blog, you can learn more about how Cloudinary supports content- and context-aware cropping, dynamic format selection and automated creation of responsive images, all from a single image.
 
2. Simplify Workflow

There’s no doubt you have a specific workflow associated with adding images to your site or app.  In many cases, a designer will create artwork, then the developer requests multiple sizes for display on various devices and multiple formats for different browsers. Then they have to store multiple versions and write the logic that enables the right version to be selected and delivered to every user. If you’ve ever done this, you know it takes a significant amount of time, and can slow your time to market. 
 
Ideally, you should automate the process as much as possible. Any solution you use should enable you to create one high-quality version of an image, which can then be dynamically transformed and delivered in the proper version to suit the viewing requirements of every user and every device. By doing so, you will save time and resources by not requiring your designer to designer to create multiple versions of every image, or do additional work if you need the images transformed in any way. 
 
3. Move to HTTP2

Even though websites have changed dramatically in looks and style over the years – from simple text-based pages to advanced in-browser apps full of images and videos – the underlying HTTP protocol really hasn’t changed - until recently, with the approval of the HTTP2 protocol by the IETF. Use of HTTP2 can help you optimize the user experience on your app or website even more.
 
Generally this new HTTP protocol will improve  website performance; reduce the amount of bandwidth required by supporting header compression; improve latency and make it easier for developers to use optimized connections, by eliminating the need for domain sharding and other subtle performance tricks.
 
The biggest difference you’ll see when moving to HTTP2 is with image-heavy pages. And the more images on a single page, the more improvement that will be seen. The reason: With HTTP2, instead of requesting images sequentially or creating many parallel connections, the browser makes a single connection to the server and optimizes the requests to all images over a single connection. 
 
4. Leverage CDNs for Globally Distributed Caching

Content distribution networks (CDNs) are large, geographically distributed network of specialized servers that accelerate the delivery of web content and rich media to internet-connected devices.  
 
CDNs provide many benefits to various parties, including web users, content and application owners and service providers. These networks support faster page loads, improving the user experience, which ultimately lowers abandonment rates, increases impression, improves conversion rates and strengthens customer loyalty. 
 
These best practices will enable you to create a seamless, end-to-end process for dealing with images, including uploading, organizing, viewing, storing, delivering and managing all of the images. With the Cloudinary solution, you can do all of this quickly and effectively from a single platform, which will further help reduce the integration hassle and chaos, while improving team collaboration. 
 
To see for yourself how Cloudinary can help your company establish best practices, sign up today for FREE
 

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more