We are using the image renditions to display the images for different devices in Adobe Experience Manager(AEM).
The HTML5 Adaptive image is used as shown below to display the images for different devices.
<img src="/content/dam/Albin/Untitled.jpg" srcset="/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,/content/dam/Albin/Untitled.jpg" alt="Sample Image">
/content/dam/Albin/Untitled.jpg - Original image
/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png - Rendition for 1x devices.
If the image is first accessed from the mobile devices then Untitled.jpg folder is created to cache the renditions image(rendition images will be matched for mobile devices) - /content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png
While the image is getting accessed from desktop browsers then dispatcher will try to return the folder Untitled.jpg as image(/content/dam/Albin/Untitled.jpg - original image will be matched for desktop browsers) so the image link will be broken in browser.
In other hand, if the image is first accessed from desktop browser then dispatcher caches Untitled.jpg as image. The subsequent request to the renditions image will not find the images in dispatcher cache so the image will be retrieved from publisher for rendering(rendition images will not be cached in this scenario as untitled.jpg is created as a image).
Refer the following post To resolve the issue
https://www.albinsblog.com/2015/04/how-to-use-html5-adaptive-image-in-AdobeCQ5.html
The HTML5 Adaptive image is used as shown below to display the images for different devices.
<img src="/content/dam/Albin/Untitled.jpg" srcset="/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,/content/dam/Albin/Untitled.jpg" alt="Sample Image">
/content/dam/Albin/Untitled.jpg - Original image
/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png - Rendition for 1x devices.
If the image is first accessed from the mobile devices then Untitled.jpg folder is created to cache the renditions image(rendition images will be matched for mobile devices) - /content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png
While the image is getting accessed from desktop browsers then dispatcher will try to return the folder Untitled.jpg as image(/content/dam/Albin/Untitled.jpg - original image will be matched for desktop browsers) so the image link will be broken in browser.
In other hand, if the image is first accessed from desktop browser then dispatcher caches Untitled.jpg as image. The subsequent request to the renditions image will not find the images in dispatcher cache so the image will be retrieved from publisher for rendering(rendition images will not be cached in this scenario as untitled.jpg is created as a image).
Refer the following post To resolve the issue
https://www.albinsblog.com/2015/04/how-to-use-html5-adaptive-image-in-AdobeCQ5.html