Cloudinary and Jamstacks
The awesome part about hosting on Cloudinary is that it provides a very extensive API for developers. However for content creators they often don’t care that much about the technical aspects that are required to show images on the Web. We have been told repeatedly that storage is cheap and it doesn’t matter if we just throw these images on an unmanaged server, or a CMS like Adobe AEM or WordPress. However as we start moving more items to the "Cloud" pricing and functionality do start to matter, for both the producer and consumer of this content.
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. Webp is a format created by Google in 2010, and has been implemented in many of todays browsers.https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp Webp Call 49.7 KB – 63% reductionURL: https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp Webp Call @ width of 800px 49.7 KB – 92.5% reductionURL: https://res.cloudinary.com/ajonp/image/upload/w_800/v1564600835/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp Without doing anything more than changing png to webp, you can automatically reduce the call by 63%. Now most software can take this a step further and authomatically consider the screen size that your browser should request so an example above would be to request the picture width is 800px (‘w_800). https://caniuse.com/#feat=webpAs you can see on Android using Chrome there is no issue with looking up the image using Webp. When we attempt this on Safari the browser treats this as a file and downloads it.
<picture>element is in for the rescue! When the
As you can see below Safari will use the
<picture> <source srcset="https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp" type="image/webp" /> <img src="https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/blog/Cloudinary_-_Webp.webp" alt="Cloudinary Webp" /> </picture>
<img>tag and not refer back to the
<source>tag, and it will show the image correctly. In Chrome the
<source>tag is used so it will automatically pickup the webp extension and work correctly. DEV. Because of this I don’t prefer to use shortcodes and instead stick with supported markdown syntax. I also tend to move on the the next “cool” technology platform often.For instance I can easily load all Markdown to: markdown file images and replace them for
<picture>tags (yes I am lazy). Hugo provides amazing things called shortcodes that will allow you to execute a great deal of code in a short one line example of markdown. xabeng created an awesome set of shortcodes my hugo shortcode for including image from cloudinary. markdown image paste is a fantastic plugin that allows you to take screenshots easily and loads them directly to cloudinary. By default once the upload completes it will place the new image URL into a markdown image tag.I did open an issue to allow for
htmlcode instead of the generic markdown syntax.