Responsive Images

There is one thing that I have noticed with websites that lately that really irks me, and piggy-backs on what we've been talking about. These days, any successful website needs to be responsive; Not only in content, but also in rendering to window/device size. Many sites (not enough) do make good use of media queries in their CSS to allow the browser to re-size with the correct device. However, what most sites do forget to do is have the image's properties correctly written to be responsive.

As chapter 8 discusses, images on a responsive site should have their max width set to 100%, and then be size constrained by x + y with a container. Most sites do not utilize such a simple, yet effective solution to the issues that most eventually run into or get complaints about. However, the sites you do see using it are often some of the most successful.

As our company is a jewelry retailer, I naturally keep my out on other top jewelry sites for good techniques specific to maximizing the quality of our product images. Of course, the model for most is Tiffany's. The first thing that I noticed when looking at their product images is that they always looked clear and crisp, not matter on what device or window size. They use a great combination of alternating image size and container size with media queries, and having the images set to max-width of 100%. This allows the load times to be the same on mobile devices while also getting the best image quality possible. At 100%, their images aren't the clearest images you've ever seen, but the way they are displayed on the page is well done to the point where you cannot tell the difference.

It's little techniques like this that are often overlooked, that can make a big difference in defining your brand/company over time; You may not see the result immediately, but there is definitely a big payoff for making sure the little details are perfect over time.