Responsive images

Responsive website design assumes using images that can adapt to different user devices and browsers. Uploadcare allows you to get the most appropriate image size and resolution to improve users' accessibility and enhance your website's performance.

Uploadcare's on-the-fly CDN provides a comprehensive suite of image processing operations for crafting an optimal responsive image experience on your website. It automatically identifies the maximum compression level that maintains visual quality without noticeable artefacts. Additionally, it offers a robust set of image processing tools to resize, crop, and scale images to suit your requirements.

When saving images to the Uploadcare CDN, you can access automatic intelligent conversion and compression through URL operations.

Auto format is automatically applied to this image.

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

For retina screens add -/quality/lightest/:

https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/quality/lightest/

Adaptive quality is also automatically applied to this image if you enable this option in the Dashboard.

Automatically

You can use the adaptive image component tool to adjust responsive images automatically.

You can implement a script to deliver optimized images automatically to users. Image optimization occurs in real-time during user requests, with results cached on our CDN.

Connect the Adaptive Delivery JS script (ensure you use your own public API key instead of YOUR_PUBLIC_KEY):

<script src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-img.min.js" type="module"></script>

<style>
  lr-img {
    --lr-img-pubkey: 'YOUR_PUBLIC_KEY';
  }
</style>

If your images are hosted outside Uploadcare CDN, whitelist the image sources. Go to "Settings" → "Delivery" → "Allowed domains for Proxy" in the Dashboard, click "Add domain" and add the domains you intend to use.
Replace your img tags with lr-img tag:

<lr-img
src="https://somestorage.example.com/somepicture.png"
alt=""
></lr-img>

<!-- you can use file UUID for images stored on Uploadcare CDN -->

<lr-img
uuid="36f90908-afb9-4e0a-b254-1b769faf8f3a"
alt=""
></lr-img>

Note: lr-img is not self closing tag, so you need to close it with </lr-img>.

You can further enhance your responsive, optimized, and lazy-loaded images by adding various filters and effects and selecting different delivery options. Check out adaptive image component for more details.

Next.js

You can optimize images by using the Next.js image loader and component.

Nuxt

You can optimize images by using the Nuxt.

Manually

You can configure responsiveness manually.

Make a single image responsive

To make a single image responsive without using JS:

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:

<!-- replace 36f90908-afb9-4e0a-b254-1b769faf8f3a with your image UUID -->

<img
    src="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/"
    alt=""
>
<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

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

See the Pen Responsive Images Example #1: <img> & css by @uploadcare on CodePen.

However, this 2400px wide image is hardly necessary for an iPhone version of the website, which needs only 320px width by a 2x pixel ratio, which gives us 640px. If you want to smartly adapt your images to various screen widths, continue to the next section.

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.

<!-- replace 36f90908-afb9-4e0a-b254-1b769faf8f3a with your image UUID -->

<img
 src="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/1.jpg"
 srcset="https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/1200x/1.jpg 1x,
         https://ucarecdn.com/36f90908-afb9-4e0a-b254-1b769faf8f3a/-/resize/2400x/-/quality/lightest/2.jpg 2x"
 alt="">

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

See the Pen Responsive Images Example #2: <img> with srcset & css by @uploadcare on CodePen.

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:

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

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.

See the Pen Responsive Images Example #3: <img> with srcset & sizes by @uploadcare on CodePen.