Adaptive Images

lemminkainen_rwd We just launched new responsive web site It has lot of great features but one of them which you might not notice is the adaptive images. With the site like 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 as a way to implement adaptive images and used 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. 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.


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: 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 It has lot of great features but o…