My site performance improved after I moved my Hugo image content to the cloud. But there was one thing left to do - I still needed to serve dynamic and responsive images for a variety of screen sizes and pixel density.
This post will focus on changes to your site, by serving responsive image from the cloud / content delivery network (CDN) using Cloudinary [referral].
I’ll show you:
- How to change to your theme to serve responsive images
- How to change to the source of images on the list post layout (using a worked example)
- Considerations with responsive Bootstrap themes
- What to do if there are any issues
If you haven’t already started using Cloudinary - then read my moving Hugo images to the cloud article first.
Change your theme to serve Cloudinary responsive code
Add Cloudinary to your header
Open your Themes Folder and the file
Copy / Paste in the
<head>section, with the other
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
This is a bit of magic - which means a device’s browser will tell Cloudinary the screen size and pixel density. Client Hints (Accept-CH) allows web browsers to inform servers (or CDN layers) of the required dimensions and pixel densities of each specific image download request.
Add Cloudinary to your footer
Open your Themes Folder -
Copy / Paste in with the other scripts:
- Copy / Paste just before the closing
Make sure you replace ‘demo’ with your Cloudinary username.
This little bit of script looks for any img with
class="cld-responsive" attribute and then passes it to Cloudinary to process the right file for you
Worked Example - Update your image source in your single.post
Most themes will feature an image on the single post (like at the top of this page). If you’ve already moved your images to the cloud and using Cloudinary … you’ve done the hard work.
In my moving Hugo images to the cloud article, we changed the
<img html tag,
This is where we left it … mastering the images and serving the best quality, format, etc ..
To make it cloud-responsive (nice term). We make 2 changes:
srcis changed to
So the final result looks like:
This must be done for every image - but hopefully there are not too many places (think single and list layout) to make this change. Start by the modifying your most used layouts.
Note: If you are using Bootstrap, or a theme that is responsive, and doesn’t have fixed width div or containers - you’ll probably have to do one more thing (see Test and Go below)
Test and Go …
So now …
- Save the file
- Commit your changes to Git
Hugo server -Dand browse to http://Localhost to check every thing is working fine
If you find a problem:
- Check the config.toml params - did you add the URL in the default [params] section?
Bootstrap / Responsive Theme issue:
If you find your images are breaking out of the
So I found adding in a style / width attribute fixed the issue and also serves and image at the correct width for the browser
Finally - heres an example of the problem - showing the image incorrectly sized for the page width
This is the cld-responsive image with the size fix:
How did this work for you? Let me know