Handling Retina Requests

I presently use this code to provide for various screen resolutions:

<picture>
    <img srcset="/assets/images/photos/somepic-500.png 500w,
                /assets/images/photos/somepic-750.png 1.5x,
                /assets/images/photos/somepic-1000.png 2x,

                /assets/images/photos/somepic-352.png 352w,
                /assets/images/photos/somepic-528.png 1.5x,
                /assets/images/photos/somepic-704.png 2x,

                /assets/images/photos/somepic-304.png 304w,
                /assets/images/photos/somepic-456.png 1.5x,
                /assets/images/photos/somepic-608.png 2x"

            sizes="(min-width: 1160px) 500px,
                (min-width: 800px) 352px,
                (min-width: 320px) 304px"

            alt="My Test Pic"
            src="/assets/images/photos/somepic-288.png" 
    >
</picture>

Does CF Images auto sense and deliver the image at the resolution of the user’s screen so that I can eliminate the 1.5x and 2x parameters?

Am I also correct that that CF images will deliver the correct image extension, such as webp, if the browser supports it?

Does CF Images auto sense and deliver the image at the resolution of the user’s screen so that I can eliminate the 1.5x and 2x parameters?

you might be interested in Cloudflare Image Resizing, this is an addon and not enabled by default on Cloudflare.

Am I also correct that that CF images will deliver the correct image extension, such as webp, if the browser supports it?

I believe this is part of polish, which is available in the Pro+ plans.

This topic was automatically closed after 15 days. New replies are no longer allowed.