Delivering optimized images for a responsive site

Last update: May 3, 2023

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

Use the Responsive code feature when you want to share the code for responsive serving with your web developer. You copy the responsive (RESS) code to the clipboard so you can share it with the web developer.

This feature makes sense to use if your website is on a third-party WCM. However, if your website is on AEM instead, an offsite image server renders the image and supplies it to the web page.

See also Embedding the Video Viewer on a Web Page.

See also Linking URLs to your Web Application.

To deliver optimized images for a responsive site:

  1. Navigate to the image you want supply responsive code for and in the drop-down menu, tap Renditions.

    chlimage_1-408

  2. Select a responsive image preset. The URL and RESS buttons appear.

    chlimage_1-409

    NOTE
    The selected asset and the selected image preset or viewer preset must be published to make the URL or RESS buttons available.
    Dynamic Media - Hybrid mode requires you to publish image presets; Dynamic Media - Scene7 mode automatically publishes image presets.

  3. Tap RESS.

    chlimage_1-410

  4. In the Embed Responsive Image dialog box, select and copy the responsive code text and paste it in your web site to access the responsive asset.

  5. Edit the default breakpoints in the embed code to match those of the responsive web site directly in the code. In addition, test the different image resolutions being served at different page breakpoints.

Using HTTP/2 to delivery your Dynamic Media assets

HTTP/2 is the new, updated web protocol that improves the way browsers and servers communicate. It provides faster transfer of information and reduces the amount of processing power that is needed. Delivery of Dynamic Media assets is supported using HTTP/2 which provides better response and load times.

See HTTP2 Delivery of Content for complete details on getting started using HTTP/2 with your Dynamic Media account.

More help on this topic

Previous page
Next page

Experience Manager


The Perfect Blend: A New Era of Collaboration with AEM and Workfront

Adobe Customer Success Webinars

Wednesday, Apr 2, 5:00 PM UTC

Explore how Adobe Experience Manager and Workfront integrate to help teams move from ideation to delivery without the usual bottlenecks, ensuring content is organized, on-brand, and ready to go live faster.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now