Cloudinary Sandbox
Docs
These are just some examples. (Very little effort went into styles.) Try opening this in responsive design mode in your browser.
Some notes:
- Gravity auto is the setting to focus on the interesting bit of the image.
- Quality auto reduces the file size by about half and looks about the same.
- You can send Client Hints to help load the correct images. See
Accept-CH
.
- There are Rails helpers for the above. See
cl_image_tag
. Example: cl_image_tag(the_image, width: :auto, height: 50, gravity: :auto, quality: :auto, client_hints: true, crop: "fill")
.
- DPR auto seems to need styles for width and height on high-DPI devices
- Changing the viewport size only loads images if it became bigger. If it becomes smaller, it will use the big images that were already loaded. (Needs styling that this page doesn't have.) This means you'll have to refresh to see the smaller images if you make the window smaller.
- You can set automatic "breakpoints" (image size increments, not related to a debugger breakpoint), but the default is every 100px.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.