6

This question is actually not about coding but choosing the right method for a task. I don't know if it is against the rules of SO but here you go..

I once built a small CMS for a local newspaper which gave them the functionality of adding their posts along with a photo. Regarding the photo, they used to upload one single photo and I saved various versions of that photo to serve according to different templates they might choose (templates and not screen sizes!)

Now, I'm asked to renew this old system and I am faced with the dilemma of responsiveness / adaptiveness.

As far as my findings online, the next big thing is the <picture> element. I have found many resources and just when I decided to go for it, I came accross this website. If you look at the source of any image, you will realize it has a querystring such as width=940&height=320&mode=crop&scale=both&meta=panoramic When I resize the window it becomes something like width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter I believe this website is using Image Resizer and that depending on the screen size, one single photo is being processed on the fly by the server to output the new image.

What I don't understand is, which of these methods is actually better since the picture element still needs multiple images uploaded to the server whereas imageresizer needs only one and it crops-resizes the one suitable for the screen size. But on the other hand, with the picture element the server does not get bombarded with requests to resize images but serves existing photos saving from processing and time?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Subliminal Hash
  • 13,614
  • 20
  • 73
  • 104
  • picture is not yet supported by all browsers http://caniuse.com/#search=picture but it's clearly the best if you can use it in your context and it satisfies your need. Also note servers like image resizer can cache content to avoid heavy image computations of course. – Simon Mourier Jan 04 '16 at 17:24

2 Answers2

0

The Image Resizer library sounds like your best bet - save yourself the hassle of uploading and managing many different image sizes!

If you are concerned about the overhead of image resizing (which is small anyway), you could always try their DiskCache plugin which resizes an image once then saves it to disk - subsequent requests for the same image of the same size will return that.

Andrew Stephens
  • 9,413
  • 6
  • 76
  • 152
0

On the site you link to, image src is changed with JavaScript when the browser viewport (and the site design) changes.

It means the browsers needs to wait for this JavaScript to execute to know which image it needs to load.

With a set of pre defined images stored on the server and modern markup with <img srcset="…"> or <picture>, the browser gets everything it needs directly when downloading the HTML, which means it can start downloading the best image even before any CSS or JavaScript is downloaded and/or executed. This is really much better for performance, and so for the user.

Also, because these standards are now supported by most browsers, it works even if JavaScript is blocked or breaks for any reason.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24