Responsive Website Design Techniques
These are some examples of how to use images in responsive website design.
Fluid Images
Before fluid images became common use, an image set to a particular size would only appear correctly on screens that were not much larger or smaller that the original screen size that it was designed for. This became obviously a problem as more people began to use smart phones and other devices to view the web. By using a max width of 100%, images will display on the page with the correct proportions adjusted to the full width of the screen.
Context-Aware Image Sizing
One of the major issues when using images across multiple devices is the file size conflict of using the same image for small devices as you require for large screens. An image which has been formatted to look good on a mobile device will scale up badly to larger screens and using a high resolution image to fulfill all obligations will be slow work uploading to mobile devices.
The solution requires gaining information about the screen size being used and only loading the appropriately designed image.
Responsive Images Right Now
A quick way to easily employ a set of two images, one large for desktop and one small for mobile is to assign each to a different CSS element. The small image gets added as a <img> and the large image is assigned as a background. You simply hide the inappropriate image element according to screen size.
CSS3 Responsive Images
The content property in recent versions of CSS you can store a range of images as attributes in the HTML, assign each to a screen size and call media queries to establish which image is required.
Using Cookies for Responsive Images
By sending a cookie response with a request to the server for data, a website is able to get a maximum screen size returned before the website loads. This avoids having to use lots of bandwidth uploading all image sizes by knowing which image size is required before the server begins returning data for the page.
User Agent Strings and Responsive Images
To avoid the problem of using the same large image for use on wide screen displays and mobile phones, setting up a method to detect the users screen size using the device’s user agent string ensures that you don’t download unnecessarily large files to your device. Once the device size has been established the server can determine which size image is required and only one image is sent from the server side to the browser .
References: