If it's just for one image and it's not the most semantically important image on the page, then don't worry about it as you're not going to get panelized for swapping one image.
And Google understands the difference between hiding content for design necessity and hiding content for SEO manipulation. You're not hiding keywords or links etc, it's purely a design element and they know the difference.
In your scenario I would probably just opt for different background images to be served based on the screen size.
Some example markup:
@media (max-width: 768px) {
background-image: url('/img/some-image.jpg');
background-size: cover;
}
@media (max-width: 414px) {
background-image: url('/img/a-different-image.jpg');
background-size: cover;
}
If you wanted to ensure you show the "alt" tag, then using the 'picture' tag may be the best solution because it sounds like your image actually changes its layout and concept based on the screen size. (Meaning that it's not just the same image made smaller).
<picture>
<source srcset="img/size-425-pixels.jpg" media="(min-width: 425px)" />
<source srcset="img/size-414-pixels.jpg" media="(min-width: 414px)" />
<source srcset="img/size-375-pixels.jpg" media="(min-width: 375px)" />
<source srcset="img/size-360-pixels.jpg" media="(min-width: 360px)" />
<source srcset="img/size-320-pixels.jpg"" media="(min-width: 320px)" />
<img src="img/main-big-image" alt="semantic description" />
</picture>
Advantages:
- Let's you display a completely different image more suited to the different screen size
- The browser has no choice and will show the image you specify based on the media query
- You still have the alt="" tag present
Disadvantages:
- These images won't automatically stretch or shrink to fill the parent div. So you virtually have to list every screen size to ensure the image fills the parent div tag correctly.
Usually you can get away with using a responsive 'srcset' image to just completely fill up the parent tag. Like so:
<img style="width: 100%; text-align: center;" sizes="(min-width: 1920px) 1920px, 100vw"
srcset="img/size-320-pixels.jpg 320w.
srcset="img/size-360-pixels.jpg 360w,
srcset="img/size-414-pixels.jpg 414w,
srcset="img/size-736-pixels.jpg 736w," src="img/smallest-image.jpg" alt="semantic description" />
Advantages:
- The browser will automatically choose the most appropriate sized image and only load that image
- The image will always stretch proportionally to fill the parent div container
- You still get the advantage of having the alt="" tag present
Disadvantages:
- You're essentially loading the same image but it is just being resized.
- The browser decides which image to load in which scenario
Another option is a responsive sprite that will still allow you to have an alt tag. The advantages are that the image will automatically resize based on the parent div container and you also get to include an 'alt' tag.
Here's some example markup for you:
<div class="my-bg-img">
<img class="responsive-sprite" alt="Semantic Image Description" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZwAAAHyAQMAAADlcepQAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADBJREFUeNrtwTEBAAAAwqD1T20JT6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4GlnGgABfphj0gAAAABJRU5ErkJggg==">
</div>
.my-bg-img {
width: 50%;
}
.responsive-sprite {
max-width: 100%;
background-size: 100%;
background-image: url('/img/your-sprite-image.jpg');
background-position: 0 49.545136%;
background-size: 100.747065%;
}
Advantages:
- The markup is simpler than listing 10+ different image sizes and it's robust for all screen sizes
- It also reduces resource fetch requests if you have multiple images on the same sprite
- Still allows you have the 'alt' tag
Disadvantages:
- It's always loading the same image regardless of screen size. Though you could combat this by just declaring a different background image via a media query and that would load new responsive sprite image.
Just google 'responsive sprite generator' and that generator in 1st place gives you all the markup you need.
Hope that helps a bit..
