1

I have 2 columns next to each other with equal height, one column with text and the other columns with a background image that is set to cover the column.

I worry that my image is not SEO friendly if I am using it as a background image but this solution is required to keep the design of the page clean.

The reason of having a background image instead of an actual img element was because I wouldn't be able to cover the whole columns while maintaining the correct image ratio.

I had a thought of adding the same image in an img element with an alt tag within the same column that has the background image but only display it on mobiles so the columns stack under each other and hide the img element on desktop.

The main question how will Google translate this content? and how will it affect my SEO? as I heard that you could get penalised for hiding content!

Can some one clarify this for me please and advise if what I am trying to do is good or bad practice?

  • Are you trying to get the images ranked in Google image search? If so hiding them on desktop could be problematic. But for normal text search, Richard's answer looks correct. – Stephen Ostermiller Mar 9 at 1:00
2

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..

  • the img element I am trying to use is to display the same image as in the background image, but I am trying to get the image ranked too via the alt tag but hence I cant use the img element on desktop as it wouldnt fill the div, that is why I thought I would display it on mobile and hide it on desktop. I have many pages that has the same scenario as it is part of the design. I am building a website for a client and therefore I wouldnt want them to upload many different size images as you can expect they may not have the skills to do so. I am trying to keep my cms as simple as possible. – Ahmed Al-Samarrai Mar 9 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.