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