How To Change Header Image on Mobile Devices?

Contributor ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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

Views

157

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

quote

 

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

quote

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

You're using contractory statements. 

 

I said MQ is less preferred for the bandwidth reasons. 

 

 

 

 

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

quoteIt 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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

LATEST

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines