Cloudinary Blog

Blog posts of 'Responsive-images' tag
An interview with Jason Grigsby about Responsive Images

In part 1 of this interview, Jason Grigsby and I discussed how the industry came to understand the responsive image problem. Here, in part 2, we discuss today’s solutions — taking a particularly deep dive into the puzzle of “responsive image breakpoints.”

EP: So, where are we, today, with responsive images? We have a number of new markup features that let us send different image resources to different users, depending on their context. Depending on which feature you use, you can either tell the browser which resource to load, or leave it up to the browser to pick. Each feature has been developed for a different use case, but all of them require you, the developer, to generate many images, whereas before you only had to generate one. And you have to decide — what underlying resources do I actually need? What should their dimensions be? Which is a surprisingly hard problem. You were one of the big, early thinkers about this, and coined the term “responsive image breakpoints.” What are responsive image breakpoints? 

Read more
What to consider when developing media rich websites and apps
Websites have evolved greatly over the past few years. Once text-heavy websites have become more eye-catching with prominent images and video. But the addition of richer media isn’t the only change impacting websites. Consumer behavior also factors into this evolution, as web access has moved from the desktop realm to a variety of different devices – smartphones, tablets, laptops, smartwatches and TVs – with different dimensions and resolutions. And consumers want to be able to access web content anytime and from any location.
 
To ensure that website performance is optimized, bandwidth usage is minimized and users have a top-notch experience, we will need to address many challenges.

High resolution images and videos

If a picture is worth 1,000 words, it’s no surprise that website owners are using images and videos as powerful tools on their websites to engage visitors. High-resolution images look best, but these files are so big that they cause websites to load slowly and use excessive bandwidth. These problems frustrate visitors, and potentially decrease their incentive to  engage further on the website.
Read more
Plugin for automatic responsive images in Jekyll-generated sites

This is a guest post by Nicolas Hoizey, co-founder of Clever Age and creator of the Jekyll Cloudinary plugin. Nicolas’ plugin leverages Cloudinary’s image storage, optimization, resizing, and delivery infrastructures to automate responsive images in Jekyll-generated static sites. We think it’s the bee’s knees, and invited Nicolas to write a bit about the process and motivation behind it. Without further ado, here’s Nicolas.

Read more
Introducing responsive image breakpoints solutions

The number of different devices available and their potential screen resolutions keep increasing, and to support this wide range of resolutions and devices, responsive website design is now the standard. A website's markup must adapt itself to look perfect on all the different devices and in various resolutions, pixel densities and mobile device orientations. Managing, manipulating and delivering images, is one of the main challenges of responsive design that web developers face.

Read more
Automatically create images for Responsive design

Responsive web design is a method of designing websites to provide an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution used to view the website. A site designed responsively adapts its layout to the viewing environment, resizing and moving elements dynamically and based on the properties of the browser or device the site is being displayed on.

Read more