Responsive images

Uploadcare helps you deliver the optimal image size and resolution for any device and bandwidth, improving page loading times and user experience.

You can automate image responsiveness in several ways:

Additionally, you can enhance the display of responsive images by leveraging art direction techniques to create custom layouts for different devices.

Creating a responsive image manually

To make a single image responsive:

  • Resize the image to fit the widest container, ideally preserving its aspect ratio.
  • Set width: 100%; declaration to the image block so that the image adapts to the container width automatically.
  • For instance, if your original image resolution is 4928x3280px with a file size of 1.85 MB:
    https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/

If the container width is limited to 1200 px on the widest screens, use the resize operator in the image URL to reduce its resolution and file size:

https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/

Insert the updated image URL into the src attribute of the <img> tag:

1<!-- replace 36f90908-afb9-4e0a-b254-1b769faf8f3a with your image UUID -->
2
3<img
4 src="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/"
5 alt=""
6>
7<style>
8 img {
9 width: 100%;
10 height: auto;
11 }
12</style>

The original image width has been reduced to 1200px, and the file size has been reduced to just 125 KB.

Optimize the image for high pixel ratios

Set an additional version of the image for HiDPI screens with the <img> element and the x descriptor.

Retina screens have a pixel ratio of 2. To optimize for them:

  • Multiply the resize value by 2.
  • Reduce the image quality using the quality operation.
  • Add the alternative image link to the srcset attribute followed by the 2x descriptor that ties the image to devices with a 2x pixel ratio.
1<!-- replace 36f90908-afb9-4e0a-b254-1b769faf8f3a with your image UUID -->
2
3<img
4 src="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/1.jpg"
5 srcset="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/1.jpg 1x,
6 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/2400x/-/quality/lightest/2.jpg 2x"
7 alt="">

Example with the same image on Uploadcare Image CDN to produce an alternative retina version of it:

Optimize an image for different screen widths and breakpoints

Use URL API to:

  • Create various resized versions of the image for different screen widths.
  • Add them to the srcset attribute followed by a w descriptor with screen width in pixels
  • Add the sizes attribute to the <img> element to set primitive media conditions. It should contain information on how much of the viewport will be occupied by the image

Example from the previous section that now contains various versions of an image optimized for many different widths in w descriptors. Replace 36f90908-afb9-4e0a-b254-1b769faf8f3a with your image UUID:

1<img src="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/fallback.jpg"
2 srcset="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/320x/320.jpg 320w,
3 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/450x/450.jpg 450w,
4 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/640x/640.jpg 640w,
5 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/750x/750.jpg 750w,
6 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/800x/800.jpg 800w,
7 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/900x/900.jpg 900w,
8 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1000x/-/quality/lighter/1000.jpg 1000w,
9 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/-/quality/lighter/1200.jpg 1200w,
10 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1500x/-/quality/lighter/1500.jpg 1500w,
11 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1600x/-/quality/lighter/1600.jpg 1600w,
12 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/2000x/-/quality/lightest/2000.jpg 2000w"
13 sizes="(min-width: 1200px) 50vw, 90vw"
14 alt="">`
15/>

In this example, this value of sizes tells the browser to set the image width to 50vw if the viewport width is 1000px or more; otherwise, occupy most of the screen width: sizes="(min-width: 1200px) 50vw, 90vw"

Take a look at this to see our pal Greenpaws adapt to various screen sizes, and make sure to try some of your own pictures in it.

Art direction

The art direction issue involves wanting to change the image displayed to suit different image display sizes. For example, in a broader sense, apply filters, control colors, and so on, or a web page includes a large landscape shot with an object in the middle when viewed in a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the object in the image tiny and hard to see. It would probably be better to show an image on mobile, which zooms in on the object.

Usually, your image looks the same in portrait versions of devices, on desktops, and in landscape versions. That may be fine for square images, but the subjects of the wide images will probably end up looking too small on mobiles:

Landscape-oriented image resized on a smartphone

Portrait-oriented resize works better for the smartphone screen

Use automatic cropping of an image to an object using the scale_crop operation instead of resizing images and combining them with media queries.

To use the same image for different layouts — for example, a landscape image showing the entire scene for a desktop layout and a portrait image showing an enlarged main subject for a mobile layout — use the <picture> element.

Use srcset/sizes to create a resolution switcher example, serving the same-size image at different resolutions depending on the device resolution or different image sizes depending on the viewport widths.

1<!-- replace 36f90908-afb9-4e0a-b254-1b769faf8f3a with your image UUID -->
2
3<picture>
4 <source
5 srcset="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/scale_crop/320x569/center/320-569.jpg 320w,
6 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/scale_crop/640x1138/center/-/quality/lightest/640-1138.jpg 640w,
7 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/scale_crop/450x800/center/450-800.jpg 450w,
8 https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/scale_crop/900x1600/center/-/quality/lightest/900-1600.jpg 900w"
9 sizes="90vw"
10 media="(max-width: 450px) and (orientation: portrait)">
11
12 <img src="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/fallback.jpg"
13 alt="Greenpaws the Chameleon">
14</picture>

Note: We recommend using the media attribute only in art direction scenarios. If you use media, don’t also offer media conditions within the sizes attribute.

Built with