Big and small versions of images?

support
1

I would like to have blog posts with lots of images that look good on big screens but aren’t too slow to load on small screens (i.e. a phone).

If I have a really large image and someone views my blog on a phone, then I imagine that the phone downloads the full (and large) image and then resizes it for the phone’s screen … is that correct? I vaguely remember reading that some webservers will automatically resize images, but this may not be right.

Should I make two or more version of each image? Does anyone else do this? If so, is there an easy way to do this?

2

A decent jumping off point for responsive images is at Responsive images - Learn web development | MDN. It uses srcset among other attributes, you’ll need to read up on it.

To create the various sizes in Hugo, there are the options for image resizing: Image processing | Hugo

You should make as many as your use-case requires, so read up and decide.

Yes, many. It is considered a best practice.

Ganbatte! :slight_smile:

2 Likes
3

If you are using Netlify, it will do this for you I think? Doubtless other services do as well. Cloudflare? Can’t remember.

1 Like
4

Thanks. If this is a common practice then I will have a look at any standard ways to achieve it – I don’t want to reinvent the wheel, I’m not sure that I would do a good job.

5

Thanks. I wonder if github pages does this, I’ll look into it (that’s what I’m using now)

1 Like
6

I don’t think so - GitHub pages are very basic. I did use them when I first swapped from WordPress, along with Jekyll :shudder: but I switched to Netlify when I realised how much more you get - and still for free.

1 Like
7

@jeppo

Once you read the links that @maiki posted above, there is also a pretty good example with responsive images at the repository of the theme for the Hugo website over here:

2 Likes
8

I am doing it using a shortcode with predefined image sizes: IMG shortcode (Bootstrap 4)

And no, @TotallyInformation, Netlify does not help with image sizes, they just optimize the images you already have in place. So let Hugo create various images and Netlify will remove metadata and optimize them losslessly.

3 Likes