![]() Image optimization is performed on the fly at the time of user requests and the results get cached on our CDN nodes. It also lets you either store images with Uploadcare or keep them on your hosting. There are three steps:Ĭonnect the Adaptive Delivery JS script (remember to use your own public API key instead of YOUR_PUBLIC_KEY). Set automatic image format and quality on delivery You can also add various filters and effects and select various delivery options that make images responsive, optimized, and lazy-loaded. When you store your images on Uploadcare’s CDN, you get access to automatic smart conversion and compression that are available via URL operations. These features are handled by our own highly efficient compression algorithms.Īdding -/format/auto/ to this URL will ensure that the image format is selected automatically for each user, based on client's device, browser, and the presence of the alpha channel. You can also trust our CDN to select the image quality for user devices and browsers. ![]() quality/smart/ and -/quality/smart_retina/ will get maximum image compression without any noticeable visual artifacts. We recommend you set -/quality/smart_retina/ for screens with high DPI: Note that -/quality/smart/ is applied by default to every picture that has any processing operation applied to it. Take a look at a more traditional approach that doesn’t require any JS. Resize your picture to fit the widest container.We recommend using resizing using one dimension to preserve the aspect ratio. Set width: 100% declaration to the image block, so that the image adapts to the container width automatically.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. See the Pen Responsive Images Example #2: with srcset & css by on CodePen.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |