Responsive Web Design After Twenty-Plus Years Of Refining

by 10 Best Design

We are now approaching two decades of responsive web design, and it is safe to say that we have nailed layouts, forms, blocks of text, CSS, and quite a few JavaScript elements. When it comes to perfecting how images are displayed, however, we are still running into challenges. There are many ways to place and resize images, but switching resolutions according to screen widths and browsers is a bit complicated no matter how you approach it. This is not a problem with scalable vector graphics or pure CSS art, but not all images will have such properties.

With proper data compression into JPEG format, you can get images down to 200 KB or so, thus making things easier for both developers and visitors, but this will not cover all websites. E-commerce shops, for example, will strongly rely on displaying the best resolution for all visitors; in this case, we can use the src, sizes, and srcset attributes to create an argument with the following logic:

  • The media and screen size is detected.

  • The minimum width will be established so that an adequate display size will be determined.

  • The srcset attribute is a list of images at various resolutions and widths.

  • The best image is selected and displayed.

The method above will call for creating about six copies of each image so that various screen sizes are covered; this should take care of all desktop, laptop, tablet, and smartphone displays. Naturally, when we are talking about an e-commerce website with hundreds of products, this will take a lot of work even if you use a fast image editing program.

An even better way to serve images at various resolutions is to use a content delivery network plus an image resizing service such as Cloudinary. A fast and reliable CDN does cost too much these days, and it will even provide a search engine optimization advantage because the Google search ranking algorithm will take into account the speed at which images are served across various devices. Needless to say, content management systems such as WordPress feature plugins that will provide the markup you need for the srcset attribute, but the CDN and Cloudinary method is still better. For more information click here https://cloudfour.com/thinks/responsive-images-the-simple-way/.