2

I'm somewhat new to bootstrap, yet pretty proficient at site development and css... I'm having trouble wrapping my head around how Bootstrap deals with optimized images for different viewport sizes.

In my experience, you need to optimize images for the devices they're being viewed on and everything I see in Bootstrap leads me to believe that it doesn't do that. It seems like it simply uses one large image and uses css to scale it down (or even up). This seems counter intuitive when we want mobile devices to have a rich experience, and yet optimized for speed with smaller files.

For example, if I want an image to appear nicely on a Desktop with a layout of say 900px (~200k) wide, I'd have an image optimized for that size. For a mobile with a layout width, I'd have an optimized version at 400px (~50k) lets say.

In my own system, we pre-discover via user-agent and stuff the proper images in during compile, and I realize that I could simply put all that into bootstrap as well, but I expected there to be some form of mechanism for a similar feature, was I expecting too much?

I don't see how Bootstrap is able to defer loading of images in a pages content, until after a viewport size is discovered, so that the correct file optimized for that size will be utilized? Am I missing something here?

---- EDIT

I'm pretty sure you can define image paths in Bootstraps CSS based on viewport sizes, but it doens't answer the question of which it will load first?

---- EDIT NOV 2014

FYI, this question is quite out of date... @media queries will accomplish the distinct file requests, however you will still need either individual files at each size or some way of dynamically generating them. Either way, loading is deferred for any non-matches, so it's somewhat optimized. For mobile users, it's still beneficial to identify the user-agent at request time and optimize further since loading anything but mobile specific files/classes is useless and only serves to slow things down.

oucil
  • 4,211
  • 2
  • 37
  • 53

1 Answers1

5

You are correct that by default Bootstrap is only using CSS to scale the images, so it's not ideal from a file size point of view.

Adaptive Images is one good option, it will serve different sized images based on screen size. It's easy to add retroactively so simple to check if it will work for you.

Using background images is another possibility. Using media queries you could specify different background images at different viewports, though this get's a bit messy if you have a lot of images.

If you wanted to get fancy, http://responsejs.com should work well technically.

For sure there are other options as well.

Good luck!

Edit

If using another framework is an option, Zurb Foundation has a new interchange component which lets you specify different images at different viewports. It's very slick. e.g.

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
<!-- or your own queries -->
<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))],  [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • I've already built similar features to Adaptive Images into our system but thanks for the resource. I like responsejs.com as an alternative to Bootstrap as well for some ideas, although I think the flexible and logical style hierarchy (3.x) as well as the overall familiarity with Bootstrap by the average developer are it's greatest assets, so I'm not sure that I would shy away from it. That said I was afraid of my question and you've confirmed that optimization is an afterthought, like they say themselves, they're "Mobile First", I'll have to consider how to integrate "us" and "them". Cheers – oucil Nov 26 '13 at 13:20
  • Now that's a really interesting method of doing it, we're moving many of our own modules to use the data-* attributes already and theirs is a quite elegant way of doing the same, definitely food for thought, thanks very much for the edit! – oucil Nov 26 '13 at 17:35