Responsive Images

[peterpp]

Hi,

 I am working on a site which contains lot of images. I am using processwire with foundation.

I am using sliders that contains images of width 1600px and height 605px. and size of image is between 600kb to 1mb. Below 480px resolution on mobile images looks pressed. Can i do something to show these images properly on mobile?

Regards,

Pravin

[Ivan Gretsky]

You should serve different images on smaller screens. It is even much more important performancewise.

This should be accomplished via html/css. Look here to compare options.

Processwire can help you prepare different sizes for an image. Look for "resizing images" here.

[Ivan Gretsky]

There are some new ways to do it. They may not be so good for old browsers though.

[Joss]

Because of the powerful API allowing you to create sized versions on the fly which are then cached ( http://processwire.com/api/fieldtypes/images/ ) you can take advantage of swapping media using JQuery and media queries.

Foundation 5 has a system built in for delivering dedicated content (including images and background images) based on media queries - http://foundation.zurb.com/docs/components/interchange.html

However there is also http://responsejs.com/ which does the same thing and is standalone.

[Ivan Gretsky]

Joss' advices can be easier to implement if you do not care about users with no javascript. If you do, you should try doing it with media queries alone as proposed in my posts above.

Though polyfills for those media queries are still js .

[Joss]

I have to admit that I don't really take into account those who have javascript disabled (around 0.2%)

I suspect that figure is misleading as it will include all those who disable for some ideological reason - from the marketing point of view, that grouping are not a very responsive target market for most clients

Still, it is not as bad as one site I visited a few years ago - the site would not deliver the page I wanted because "I was using an OS by the devil Gates"

I wonder how long that chaps face has been missing a nose.....

[peterpp]

Thanx for suggestions..