How Reference Smaller Images In Media Queries

[Jennnnn]

My site has one main image with a border (located at the top of my index page) that resizes for smaller viewports. I want to add smaller versions of this image in my media queries so an appropriately sized image is used for each viewport size. How can I achieve this?

I was thinking that the reference to the image must be moved from the index html to my css file but from what I’ve read it sounds like that’s only for background images. I tried doing that and the image appeared with the correct width but only a smaller section of the height was visible. Also, since I didn't use the img tag I couldn't add an alt attribute.


My original code is:

html:

<div id="photoblock">
<img class="imagemain-border" alt="example" src="javascripts/images/catalog/mainimage-5.jpg" title="example">
</div>

css

#photoblock{width:90%;padding:20px 5%;text-align:center;margin:0;}

.imagemain-border{display:block;margin-left:auto;margin-right:auto;border:10px #ffffff solid;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}

What code do I need so I can reference smaller versions of this mainimage-border in the media queries so smaller images will be served for smaller viewports?

Thanks for your help!

[justa]

CSS Media queried will help you change the style rules applied to the image, and if you were using a background image within your CSS you could update the type/size of image used via CSS Media Queries.

For this you want to take advantage of responsive images, either through using the srcset attribute or the <picture> element.

<div id="photoblock">
<img class="imagemain-border" alt="example" 
 src="javascripts/images/catalog/mainimage-0.jpg" 
 srcset="javascripts/images/catalog/mainimage-1.jpg 300w, 
 javascripts/images/catalog/mainimage-2.jpg 500w,
 javascripts/images/catalog/mainimage-3.jpg 700w,
 javascripts/images/catalog/mainimage-4.jpg 900w,
 javascripts/images/catalog/mainimage-5.jpg 1600w" />
</div> 

The first SRC should be the smallest image which will load by default on browsers that don't support responsive images.
The SRCSET includes all of the different image sizes you have comma separated. The number and w at the end tells the browser how wide the image is, 300w = 300px, 1600w = 1600px. Do this for as many image size you want.

With this in place the browser will assume that you're image occupies the full width and will choose the most appropriate image to load based on the size/density of the users screen.

If that seems too difficult you can upload your image to [responsivebreakpoints.com...] and it will provide you with the image code you need.

[edited by: justa at 7:34 am (utc) on Sep 20, 2018]

[topr8]

i use the picture element like this:

<picture>
 <source srcset="/a.jpg" media="(min-width: 1200px)">
 <source srcset="/b.jpg" media="(min-width: 900px)">
 <source srcset="/c.jpg" media="(min-width: 768px)">
 <source srcset="/d.jpg" media="(min-width: 500px)">
 <source srcset="/e.jpg" media="(max-width: 499px)">
 <img src="/default-image.jpg" alt="alt text" class="class1 class2">
</picture>

[Jennnnn]

I used the Responsive Image Breakpoints Generator to create the img tag html and responsive images:

<img
sizes="(max-width: 1080px) 100vw, 1080px"
srcset="
mainimage-5_sw5zpm_c_scale,w_200.jpg 200w,
mainimage-5_sw5zpm_c_scale,w_410.jpg 410w,
mainimage-5_sw5zpm_c_scale,w_563.jpg 563w,
mainimage-5_sw5zpm_c_scale,w_682.jpg 682w,
mainimage-5_sw5zpm_c_scale,w_798.jpg 798w,
mainimage-5_sw5zpm_c_scale,w_893.jpg 893w,
mainimage-5_sw5zpm_c_scale,w_1080.jpg 1080w"
src="mainimage-5_sw5zpm_c_scale,w_1080.jpg"
alt="">

I added my border class so it now looks like this: (and moved the generated responsive images to my site's image folder)

<img class="imagemain-border"
sizes="(max-width: 1080px) 100vw, 1080px"
srcset="
mainimage-5_sw5zpm_c_scale,w_200.jpg 200w,
mainimage-5_sw5zpm_c_scale,w_410.jpg 410w,
mainimage-5_sw5zpm_c_scale,w_563.jpg 563w,
mainimage-5_sw5zpm_c_scale,w_682.jpg 682w,
mainimage-5_sw5zpm_c_scale,w_798.jpg 798w,
mainimage-5_sw5zpm_c_scale,w_893.jpg 893w,
mainimage-5_sw5zpm_c_scale,w_1080.jpg 1080w"
src="mainimage-5_sw5zpm_c_scale,w_1080.jpg"
alt="">

I'm receiving an eror message from my editor (EW4) saying “In HTML5 the attribute 'sizes' is not permitted for the <image> tag.

I'm wondering what is wrong? I can try creating my own images and following your format.

The Breakpoint Generator site did say that the 'sizes' attribute should be adjusted to fit the actual dimensions in my page. I don't understand that statement. 1080px is the correct width for the full size version of that image. Do I need to make an adjustment?

Thanks for your help!

[Jennnnn]

I tried the <picture> method with my own images. It looks ok in design view. When I preview it in a browser I see just the text “alt text (no image)” within my border. In code view I see the following errors:

In html 5 the tag <picture> is not permitted
In html 5 the tag <div> cannot contain a tag <source>
In html 5 the attribute “srcset” is not permitted for the <source> tag

My html:

<picture>
<source srcset="javascripts/images/catalog/mainimage-5a.jpg" media="(min-width: 900px)">
<source srcset="javascripts/images/catalog/mainimage-5b.jpg" media="(min-width: 768px)">
<source srcset="javascripts/images/catalog/mainimage-5c.jpg" media="(min-width: 500px)">
<source srcset="javascripts/images/catalog/mainimage-5d.jpg" media="(max-width: 499px)">
<img src="javascripts/images/catalog/mainimage-5.jpg" alt="alt text" class="imagemain-border">
</picture>

The maximum width of the image within the border is 1080px.

Any Ideas about what I’m doing wrong? Thanks!

[justa]

I'm receiving an eror message from my editor (EW4) saying “In HTML5 the attribute 'sizes' is not permitted for the <image> tag.

I would ignore the error message you're getting from your editor, sizes is allowed.

The Breakpoint Generator site did say that the 'sizes' attribute should be adjusted to fit the actual dimensions in my page. I don't understand that statement. 1080px is the correct width for the full size version of that image. Do I need to make an adjustment?

The sizes attribute tells the browser how your design works. Essentially you're providing information to the browser so that it knows how much room the image occupies in your design for each of the different breakpoints.

[Jennnnn]

I fixed everything yesterday. The page validates and it passed Google’s Lighthouse requirements except one image is two KB’s too large. I didn’t post earlier because I wanted to check my i pad first and it took a day for it to update. Thanks for all your help!