How To Change Header Image on Mobile Devices?

Report · May 02, 2022

I have a detailed header image on my site, but when viewed on a smartphone, it is too small to see. I have a simpler image that I would like to display when viewed on a mobile device. Is it possible to automatically switch images?

www.winvoices.com

Report · May 02, 2022

That is a perfect use situation for the <picture> element: https://www.w3schools.com/tags/tag_picture.asp

Report · May 02, 2022

I tried it, but once I include the <picture> code, the 2nd flag jumps to the next line!

https://www.winvoices.com/index-test.php

Report · May 02, 2022

I tried it, but once I include the <picture> code, the 2nd flag jumps to the next line!
https://www.winvoices.com/index-test.php

By @sneedbreedley

Your <div class="gridContainer"> is not closed - its missing the closing </div>

Try adding that and see what happens.

Report · May 02, 2022

It already has the closing </div> but I fixed the jump by changing the size of the image from 80% to 79%. Weird.

Report · May 02, 2022

This is majorly messed up. The idea is to REPLACE <img> tags you have now with the <picture> tag and srcset variables. One each for desktop, tablet and a tiny mobile <img> for the default.

<div id="logo">
<img src="images/flag-waving-no-usa3.gif" alt="flag" width="10%">
<picture><source media="(min-width:650px)" srcset="images/logo-03b-template.jpg">
<source media="(min-width:465px)" srcset="images/logo-03-mobile.jpg">

<img src="images/logo-03-mobile.jpg" alt="Chevrolet Chevy Chevelle Impala Corvair Nova Corvette Camaro Reproduction window stickers and invoices" width="79%">
</picture><img src="images/flag-waving-no-usa3.gif" alt="flag" width="10%"></div>

Working example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images.</p>

<picture>
  <source media="(min-width:650px)" srcset="desktop-image.jpg">
  <source media="(min-width:465px)" srcset="tablet-image.jpg">
  <img src="tiny-mobile-image.jpg" alt="flag" style="width:auto;">
</picture>

</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 02, 2022

It already has the closing </div> but I fixed the jump by changing the size of the image from 80% to 79%. Weird.

By @sneedbreedley

oh, ok - I guess that 'gridContainer' wraps the whole page. I thought it just wrapped the logo div.

Report · May 02, 2022

As Jon said, use the <picture> tag with SRCSET. This serves the right size image to targetted devices without forcing them to absorb unecessary bandwidth.

The less preferred option is to serve both images to all devices and use display:hidden in a media query.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 02, 2022

The less preferred option is to serve both images to all devices and use display:hidden in a media query.
By @Nancy OShea

I'm not at all in favor of such a solution, just because that do mean that the enduser will download all the images which some how bandwith consuming... if PICTURE can't be set (I don't know why) MQ are a better solution to go

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Report · May 02, 2022

You're using contractory statements.

I said MQ is less preferred for the bandwidth reasons.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 02, 2022

so please, as I wasn't clear enough, let me rephrase my comment... using display:hidden is kind of really forbidden... MQs allow so many other things than just displaying or hiding contents.

https://www.linkedin.com/pulse/why-responsive-websites-just-simple-step-website-birnou-s%C3%A9barte

Report · May 02, 2022

so please, as I wasn't clear enough, let me rephrase my comment... using display:hidden is kind of really forbidden...

By @B i r n o u

No display: hidden; is NOT forbidden, we need it for modals, navigation items etc. It might be considered poor practice to swap out images though.

Report · May 02, 2022

It might be considered poor practice to swap out images though.

By @osgood_

it is in this sense precisely that I was commenting, because it was the origin of the OP question... how to display different image on differents devices

Report · May 04, 2022

Bit suprised with the comments here.

Picture is a really good implementation. This works for static sites and some use cases if your using a CMS but not an otpion in other CMS's lets say you have a shopify site as easily in solutions.

Sever multiple images and CSS changing is an otpion but as Nancy pointed out not great.

But you also need to consider DPI as well as screen size and image quality.

Picture is really there not just to server smaller images but more over different aspect ratio images to suit the different devices. A long landscape image on a mobile you can only scale down and it looses itself or your crop and you loose parts of the image. Serving up a portait image variation helps with the design. That is the true use.

On a more basic level you serve a high quality image that when scaled will look sharp still on a mobile device and you do that changes to that image/elements around it or change a background images values such as background size and position through media queries.

Adobe Community

How To Change Header Image on Mobile Devices?