4

I have a website and try to optimize it regarding device size. Due to a large image slider on the front page I could halve the size by serving smaller images for mobile devices (via simple user-agent detection combined with browser properties (width/height) in session). The mechanism works by replacing the URLs from ../image.png to ../image-small.png, everything else on the page stays the same. My questions are:

  • Should I use "Vary: User Agent HTTP header" because I serve different HTML?
  • Might this affect the ranking due to Google preferring responsive over dynamic serving?
  • Should I rework my cropping mechanism?

EDIT: The content is delivered via a CMS and I can change URLs in the templating pipeline but I cannot parse them in a CSS file. The main question is if this affects my ranking and does the header "Vary" fix this?

Improve this question
3
  • 1
    User agent sniffing is NOT responsive design. I'll write an answer with the responsive methodology.
    – Stephen Ostermiller ♦
    Nov 19, 2014 at 11:43
  • You are right, but I get the content from a CMS and I can only change it in the templating pipeline (jsp) where I have the browser properties (ua, width, height, ..) stored. Do you know any responsive approach that works here? Thanks in advance!
    – Johannes Stadler
    Nov 19, 2014 at 12:33
  • 1
    I edited your question and added another answer that is more in line with what you are looking for.
    – Stephen Ostermiller ♦
    Nov 19, 2014 at 15:34

2 Answers 2

Reset to default
3

Before your question was clarified, you had said that you had a responsive site. Here is how you would use responsive CSS to change the image based on browser size:

@media screen and (max-width:480px) {
    #myimage {
        background:url('/smaller-image.png');
    }
}
@media screen and (min-width:481px) {
    #myimage {
        background:url('/bigger-image.png');
    }
}

Using user agent sniffing is not actually considered to be responsive. User agent sniffing is a fine technique for creating a mobile site from Google's ranking perspective.

Improve this answer
3
  • 1
    To expand: One should not focus on device. That will be outdated the moment you publish it. Make the device decide. I might have a mobile phone, but with fullHD resolution, PLEASE dont serve me low quality ;)
    – Martijn
    Nov 19, 2014 at 11:46
  • @StephenOstermiller: Thank you for your answer, but the problem is the content is edited via a CMS by our client. So I can change the image URLs in the templating pipeline but I can't parse them into CSS files. Sorry for not being clear on this in my question.
    – Johannes Stadler
    Nov 19, 2014 at 12:17
  • @Martijn You are right, that would be bad. But I store the detected browser properties in the session. If the window width and height aren't there, I ping a service via Javascript that contains these values and they are then stored as long as the session exists and the images are cropped according to these values. I hope it is understandable what I mean.
    – Johannes Stadler
    Nov 19, 2014 at 12:26
2

The only SEO that might change by dynamically serving an appropriate sized image for the device would be the ranking of that image itself in Google image search.

Google is fine with serving different content to different devices as long as you treat Googlebot mobile user agents the same way that you would treat the corresponding mobile device. They have said that there is no ranking preference for responsive, vs user agent sniffing vs separate mobile site.

Using a "Vary: User Agent" HTTP header would be a good idea because proxies that cache your page wouldn't serve the wrong image to the wrong device for you.

Improve this answer
1
  • Thank you very much, this is exactly the answer I was looking for! :)
    – Johannes Stadler
    Nov 26, 2014 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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