Jump to content

Responsive Images


Recommended Posts


 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?



Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...