Adaptive Images

lemminkainen_rwd We just launched new responsive web site www.lemminkainen.fi. It has lot of great features but one of them which you might not notice is the adaptive images. With the site like lemminkainen.fi there normally are lot of different kind of content and there are also many different size of images. Documentation had 18 different predefined image sizes and of course user has freedom to use any kind of images with the content. We made lot of research which would be the best way to implement adaptive images but none of the techniques were perfect for our needs. So, we selected adaptive-images.com as a way to implement adaptive images and used imageresizing.net for resizing images. To get these two products work together we needed also did some coding and modifications. We are really pleased of this combination although some other products could serve us as well.

Adaptive-images.com

Adaptive-images.com technique is based on browser cookie which contains the size of the device screen. All the images are then transformed into best size based on that cookie in server side. JavaScript for the cookie is really simple: We made small alternations to those scripts because we wanted to simplify solution and make it more testable. For example we changed the script to use browser window width and not the screen size.

ImageResizer

With ImageResizer we made easily different kind of presets (example: ?preset=header1) which transform the image to specific size and we could set that some images used adaptivity and others didn't. example preset: <preset name="header1" settings="mode=crop;width=680;height=392;adaptive=1"/> With predefined settings we could modify transformation settings and all in one place. Image caching is also done based on these values and it caches separately smaller adaptive images. So the image URLs look like this: http://www.lemminkainen.fi/Global/Front-pages/Large_1500x1427/Lauttasaari-sunset_bridge-and-hands.jpg?preset=header1 Here is how you can test it with your browser. It requires page refresh (F5) always after resizing window. adaptive-images    
We just launched new responsive web site www.lemminkainen.fi. It has lot of great features but o…