Considering how many screen sizes for Android, I am thinking should I put an image for toolbar or responsive background css image.

I am developing a mobile web-site.


  1. Good for multiple screens, so it can be responsive
  2. Hard to develop especially if a Photoshop guy can do that within 10-15 mins :)


  1. Hard to create a responsive image? Correct me if I'm wrong
  2. Fast development.
  • 1
    This is a site for ux related questions, not development-related questions. However, even if you ask on stackoverflow.com, your question should probably be more focused. Commented Sep 2, 2013 at 9:25
  • @nimrod it's not really a development question, it is asking for why to implement one option against another rather than how to implement it.
    – JonW
    Commented Sep 2, 2013 at 9:30
  • 1
    @JonW I'm not sure what sort of question it is tbh, or what the question is. 'Hard to create a responsive image?', 'Fast development', ' Hard to develop...'. I don't see you mention the word 'user' in here one single time... Commented Sep 2, 2013 at 9:47
  • Can you focus the question a bit more? Technically you can use an image or use CSS, it's possible to do either, but why do you ask which is better? Are you concerned with how it will display to the user? Are you concerned with how long it will take to implement? Are you concerned with how it will be supported?
    – JonW
    Commented Sep 2, 2013 at 10:07

3 Answers 3


Use CSS if at all possible.

Setting an image to a fluid width (that is, a percentage) makes it react to its container. However, if you're using one image across multiple viewports, you may run into some challenges.

For example, if you are designing for a full width layout and using a 1600px width image, that same 1600px image loads on the mobile view. Considering the latency on mobile devices, this can be a problem, especially across multiple images. You can use some JS trickery, but I'd recommend avoiding it by addressing this issue early in the design phase.

There are a lot of suggestions to W3C about a solution to this issue, but nothing has been sponsored for the spec at the time of writing.


In effects the matter is not strictly related to ux but with the web design in general. As stated by W3C in regards the <img> tag:

"The img element must not be used as a layout tool"

Images mustn't be used to make structural things like menus. You can use media queries in the css files to define a single class for different screen widths.

For example:

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)

CSS media queries exemples

  • 1
    Can you explain why images shouldn't be used for structural things? As this is a UX site the questions and answers relate to UX concepts and reasoning, not for actual implementation guidance. It's fine to provide the usage guidance but you need to detail the User Experience reasoning as to why a solution is the way to go as the primary aspect of an answer.
    – JonW
    Commented Sep 2, 2013 at 9:29
  • In effects the matter is not strictly related to ux but with the web design in general. W3C rule: "The img element must not be used as a layout tool".
    – WalterV
    Commented Sep 2, 2013 at 9:47
  • Great, I've added that info into your answer. you can edit the post yourself if what I've added isn't really what you were meaning. It's better to get the useful information into the answer text itself rather than just keeping it in comments, which don't stay around forever.
    – JonW
    Commented Sep 2, 2013 at 9:55

I wouldn't use images for a toolbar because:

  • All the different screen sizes of the devices. You will need to export images for the different dpi so not really efficient if you can use CSS.
  • The more images you use the heavier will be to load and more difficult to maintain. Imagine that you need to modify the toolbar, so you need to export several different images for the different resolutions.
  • With CSS you will be sure that it always looks sharper in all retina/high resolution or just new devices.

So basically: CSS is easier to maintain, more efficient and faster and it's vector base, so it will look sharper everywhere giving the best experience to the user.

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