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.
ImageResizerWith 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.
Static URL: https://d2developer.com/blog/adaptive-images/