Cloudinary
Handling website images, videos and audio files through a digital asset management solution, like Cloudinary, offers the huge advantage of being able to optimise download speed by delivering good quality for the smallest sized files.
Not all of your visitors will be on high-speed network connections; some will be reading your pages on mobile phones perhaps on mobile networks, perhaps using older devices with reduced CPU capacity. With the majority (and an increasing amount) of web content now consumed on mobile devices, the aim should always be to deliver the best quality media at the lowest bandwidth cost possible.
Moreover, it's an ecological imperative to minimise the amount of computing and network resources involved in media delivery. Cloudinary set an excellent example in this regard, and that, coupled with their outstanding support and product make the company an obvious media delivery choice for the ideal website building platform.
Life Cycle of an Image
The owner uploads an image to the platform's Cloudinary account.
Each image is automatically converted to the modern AVIF format at 80% quality.
Image metadata is uploaded to the database which asks Cloudinary to calculate all 5K breakpoints of the image up to a maximum of 1200 pixels.
When a page including the image is deployed its HTML is rewritten as follows:
If it's the first image in the page we give it a loading="eager" attribute. Otherwise it gets loading="lazy"
The breakpoints are retrieved and used to create a srcset attribute comprising all of the urls along with their corresponding widths.
A sizes attribute is added to the image HTML based on the following criteria:
- Images are inserted into the main container which has a known maximum pixel width
- CKEditor will either include the resized percentage of the main container or its width will default to its intrinsic size as denoted by the
widthattribute. - The full width of the visitor's viewport is 100vw
- The image only changes its width when the main container's width is less than the device's viewport width
What we want is the width of the image as a percentage of the device's viewport width.