Image and video adaptability

Digital accessibility ensures that everyone, regardless of ability, can access, understand, and engage with online content. When it comes to media content, this includes ensuring that images and videos can be viewed effectively across different device orientations and screen sizes.

Making images and videos adaptable means that content isn't restricted to a single display orientation. This is particularly important for users who may need to view content in different orientations for various reasons:

• Fixed device mounting: Users with mobility impairments may have devices mounted in a fixed orientation (e.g., on wheelchair arms)
• Visual preferences: Users with low vision may prefer landscape orientation for larger text display
• Situational constraints: Users may be in environments where device rotation isn't practical
• Accessibility needs: Some users may find certain orientations more comfortable for extended viewing

Cloudinary's intelligent cropping features use AI to automatically identify and preserve the most important parts of images and videos when adapting to different aspect ratios and screen sizes. This ensures that users can view content in their preferred orientation without losing key visual information.

Image and video adaptability considerations

Automatic image cropping

Automatic image cropping helps ensure that images remain accessible and visually appealing across different screen sizes and orientations. This is particularly important for WCAG Success Criterion 1.3.4 Orientation, which requires that content does not restrict its view and operation to a single display orientation.

Automatic image cropping with intelligent object detection

Cloudinary's automatic image cropping uses intelligent object detection to identify and preserve the most important parts of an image when adapting to different aspect ratios. This ensures that key visual elements remain visible regardless of orientation, which is crucial for maintaining accessibility.

In the following demo, notice how the hiking man is always kept in the frame, regardless of the aspect ratio that you select. Auto-cropping (c_auto) together with auto-gravity (g_auto) can achieve this outcome for any image. This means that you can use the same automatic cropping on all your images at scale.

🖼️ Responsive Image Cropping Demo

Current aspect ratio: 16:9 (Landscape) - Click the buttons below to see how the image adapts to different orientations and screen sizes.

🖥️ Landscape (16:9) 📱 Portrait (9:16) ⬜ Square (1:1) 🖥️ Wide (21:9)

Current transformation URL:
https://res.cloudinary.com/demo/image/upload/ar_16:9,c_auto,g_auto/f_auto/q_auto/c_scale,w_600/docs/hiking-man.jpg

Responsive image implementation

The demo above shows how Cloudinary's automatic cropping works with different aspect ratios. Here's how to implement responsive images that support multiple orientations using the <picture> element:

You can try it out for yourself with a demo built from this code.

Here it is in action. Using dev tools, you can simulate a mobile in different orientations, or simply resize the browser window to request the different images:

Automatic video cropping

Automatic video cropping helps ensure that videos remain accessible and visually appealing across different screen sizes and orientations. This is particularly important for WCAG Success Criterion 1.3.4 Orientation, which requires that content does not restrict its view and operation to a single display orientation.

Automatic video cropping with intelligent object detection

Cloudinary's automatic video cropping uses intelligent object detection to identify and preserve the most important parts of a video when adapting to different aspect ratios. This ensures that key visual elements remain visible regardless of orientation, which is crucial for maintaining accessibility.

In the following demo, notice how the important elements are kept in the frame when the video is cropped for a portrait orientation. Auto-gravity (g_auto) is used to achieve this outcome, regardless of the content of the video.

This code is also available in GitHub.

Responsive video implementation

The following example shows how to implement videos that support multiple orientations using the <video> element with different sources:

You can try it out for yourself with a demo built from this code.

Here it is in action. Using dev tools, you can simulate a mobile in different orientations, or simply resize and refresh the browser window to request the different images: