We will build a responsive image solution of our own, based on one of the samples created in Chapter 4, Sample RESS Page. The solution has the following aims:
It should be able to serve images for any defined screen range.
It should work with any image file format including transparent PNG.
It allows for automated resizing with the possibility of manual override. The automated creation of images for smaller screen widths is a great feature, and indispensable in some workflows—like galleries with many images. On the other hand, in RWD layouts, it is better to optimize images for each resolution manually sometimes. This allows us to change proportions and focus our attention on an important part of the image, when we have limited screen real estate. Sometimes there should be different images for small screens, especially when there is text—banners and ads may be a good example.
Each of those aims has its advantages and disadvantages. We are now...