> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # 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 {table:class=no-borders overview accessibility-considerations} Consideration | Cloudinary Image and Video Techniques | WCAG Reference ---|---|--- **Consider how users who have devices mounted in a fixed orientation will view your images and videos.** They may miss important information if the content doesn't maximize the use of the viewport. | 🔧 [Automatic image cropping](accessible_media_adaptability#automatic_image_cropping) 🔧 [Automatic video cropping](accessible_media_adaptability#automatic_video_cropping) | [1.3.4](https://www.w3.org/TR/WCAG22/#orientation) Orientation ## 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](https://www.w3.org/WAI/WCAG22/Understanding/orientation.html), 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,w_600/f_auto/q_auto/docs/hiking-man.jpg > **READING**: > > * Docs: [Automatic gravity for image crops](resizing_and_cropping#automatic_cropping_g_auto) > * Video tutorial: [Content-aware image cropping](content_aware_image_cropping_tutorial) ### 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 `` element: ```html Man hiking ``` You can [try it out](https://cloudinary-devs.github.io/cld-docs-assets/demos/orientation-demo.html) for yourself with a demo built from [this code](https://github.com/cloudinary-devs/cld-docs-assets/blob/main/demos/orientation-demo.html). 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: > **READING**: > > * Docs: [Responsive images](responsive_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](https://www.w3.org/WAI/WCAG22/Understanding/orientation.html), 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. 🎥 Responsive Video Cropping Demo Current orientation: 16:9 (Landscape) - Click the buttons below to see how the video adapts to different orientations with intelligent cropping. 🖥️ Landscape (16:9) 📱 Portrait (9:16) Your browser does not support the video tag. Current transformation URL: https://res.cloudinary.com/demo/video/upload/ar_16:9,c_fill,g_auto,w_600/f_auto/q_auto/docs/surfer-vid.mp4 > **READING**: > > * Docs: [Automatic gravity for video crops](video_resizing_and_cropping#automatic_gravity_for_crops_g_auto) > * Video tutorial: [Content-aware video cropping](content_aware_video_cropping_tutorial) > * Demo: [Content-aware video cropping](https://demo.cloudinary.com/video-compare) ### Responsive video implementation The following example shows how to implement videos that support multiple orientations using the `