1

I use large images in most of my (Wordpress) posts. I'd like to optimize these for mobile users. I'm not sure what optimize means but I'm guessing CSS, jquery or JS switches out the larger image for a smaller one?

Are there any examples of how this should be done?

4thSpace
  • 43,672
  • 97
  • 296
  • 475

2 Answers2

1

Jquery Bires will do exactly what you want.

https://github.com/ahoward/jquery.bires

digidigo
  • 2,534
  • 20
  • 26
  • Isn't this slow? For desktop users, they will start with a smaller image, which will distort the page layout then the bigger image loads, changing the page. Would seem a little confusing. – 4thSpace Feb 15 '13 at 20:33
0

I would use CSS Media Queries to serve different CSS based on screen size

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

For example 

@media (max-width: 700px) { ... }

Would serve specific CSS to any device with screen below 700px

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
  • also have a look at this question http://stackoverflow.com/questions/3893342/do-iphone-android-browsers-support-css-media-handheld – Sam Feb 15 '13 at 20:19
  • How does that optimize every large image in every posts? Do I need to provide an #ID for each image and reference the image the two different versions of CSS that will be served? – 4thSpace Feb 15 '13 at 20:26