See the Pen Responsive Images Example #2: with srcset & css by on CodePen. Use the resize operator in the image URL in order to reduce the resolution of the image and its file size:Īdd the updated image URL to the src attribute of the tag: Say, your original image resolution is 4928 x 3280 px, and the file size is 1.85 MB:Īlso, your container width is limited to 1000 px on the widest screens.
We recommend using resizing using one dimension to preserve the aspect ratio.
Connect a script to deliver optimized images to users automatically We recommend using the element for all informative and functional images as it extends the element and provides a way to add media queries, select alternative media formats, and allow art direction. Either connect a ready-made library or take advantage of Uploadcare’s URL API and compression algorithms in order to make your pages lightweight and responsive. Select one or several solutions that suit your needs.
Crop to object and enable art direction.Set automatic quality and format on delivery.Make Images Responsive with HTML, CSS, or JSįollow this guide to get quick and convenient ways to use Image Transformations in your project.