Is it possible to set different images for different view sizes

General
1

Per @Marius ’ notes in this thread:

I am thrilled to be able to use an image block as a background image instead of using a background image in a div - I agree that this is probably better for performance and the aforementioned webp image serving issue raised on the original thread.

I am wondering if there is a way to use one image block and set it to pull different images for different device breakpoints or if I have to duplicate the image block and set a different one for each breakpoint.

I tried just switching from desktop to mobile and changing the image but that changes it for desktop as well.

2

@smontreuil, your instincts are correct that you will need different images for each breakpoint using this approach.

One thing I will contribute that hasn’t already been mentioned explicitly is that there is a distinction between a content image and purely stylistic image.

It has long been recommended to keep purely stylistic or thematic images (i.e. ones that you could exchange for other ones if redesigning the website theme) in the realm of CSS and to have content images (i.e. ones that are directly part of the content of the page) in the realm of the page markup.

So, while interchanging between css backgrounds and img tags may have some short term benefits as a workaround to some technical limitations, using an img tag to load in stylistic images is something best avoided whenever possible.

An easy way to visualise which is which, is to look at the page with CSS turned off. The images you still want to be displayed in the plain unstyled markup are content images, anything else is purely presentational.

2 Likes
3

So, are you saying that any image I include in a template should be placed there via CSS code and not with the visual editor?

4

Not at all, because it is entirely possible to add content images within a template (e.g. having a front page template containing a featured posts grid with a featured image for each post - the featured image will likely be a content image).

I’m simply commenting on the fact that there are differences between purely presentational images and content images.

Once you have established which type of image you are adding, it becomes clearer which method you can use to add it.

5

I requested something like that: Background according to breakpoints
It seems that noone was interested by this request.

6

Hi @weedor,

I actually unknowingly created a duplicate feature request for this:

When I made it, I searched and didn’t find yours, otherwise I would have voted for that instead.

2 Likes
7

@Louis mentioned there were some considerations and wanting to make it full featured:

1 Like