Implementing Adaptive Images

Images on websites can be adapted to both the screen resolution of the device for correct display on mobile devices and for high DPI screens for more detailed display. There are several options for implementing adaptive images, which are used by experts web agency WebiProg, to create websites on various platforms.

The easiest way to implement adaptive images.
In the simplest case, it is sufficient to use images that are either of the same size as the area they will occupy, or several times larger than this area, if adaptation to high DPI screens is required. The images in this case are proportionally scaled by means of CSS.
The disadvantage of this method is the high volume of traffic necessary to load a page with a lot of full-color images (images with a small number of colors are usually compact enough even in high resolution).

A flexible way to implement adaptive images with processing on the frontend.
Using JS, we can find out the size of the viewport and the DPI of the device, and based on this, request images from the server that correspond to these parameters. Thus, devices with small screens and / or standard DPI will not get excessively large photos: so traffic is saved, and the website is loaded faster.
The method is usually implemented using a JavaScript event that is triggered when the page loads and that "substitutes" for the src attribute of images with a link obtained from the source link (usually stored in the data attribute of the tag "img") by adding to the parameters for loading the necessary screen data.
This method somewhat increases the amount of stored versions of photos, it is more difficult to implement (both the backend and the frontend), and also requires the mandatory presence of JS on the client side. Also, in some cases, in addition to the screen resolution, it is also worth considering the speed of connection to the Internet.

A flexible way to use adaptive images with processing on the backend.

At the first request of the client it is possible to "remember" the parameters of its screen and when generating pages immediately substitute "correct" links to images. For initialization, JS is often required here, although you can use the request headers to define the device. The implementation, built on the request headers, is completely independent of JS and works correctly in all browsers, although in the configuration it is somewhat more complicated.

Comments

Post a Comment

Popular posts from this blog

How to find a developer for online project on Magento?

Choosing Magento, as in other and any other platform, as a CMS for your online store, you, sooner or later, but inevitably, run into the question: "How to find a developer?". And, if you are not technically skilled in choosing a professional, this will not be an easy task. We want to share some tips that will help you choose the right Magento developer that will meet your requirements and be able to manage the technical development of your project. Despite its popularity, Magento is a complex platform and you will need a highly qualified specialist who will cope with building an effective system, which in turn will avoid further corrections and corrections in the backend of your online store. When choosing a developer, you should follow some rules that will help you choose the specialist that you really need. The quality of the final product. The quality assurance of your project is the foundation for building an effective e-commerce project . It is necessary t
Read more

The Future of E-commerce

Image
E-commerce is a new, rapidly developing sphere in the economy. As a rule, interest in this business area is shown by people who use online services more often than others. In recent years, online business has changed significantly. Today everyone has an opportunity to earn money, practically without leaving at the same time from home. The stories of American businessmen, who 10-20 years ago opened their first business projects on the network, nowadays serve as a handbook for beginners in these matters. Every day more and more people all over the world want to use the Internet to make money. In some cases, such a decision could lead to unprecedented success. How can you earn money on the World Wide Web? The main options for online earnings are: online advertising, sales, as well as promotion of goods, provision of various services, etc. The number of online stores is increasing, more and more buyers prefer them. The popularity of large transactions on the Internet is also gro
Read more

Functional Online Store

Image
Functionality is the most important part in the development of an online store , which must be paid special attention. The more optimal the set of functions of the online store - the more comfortable the customers feel. What functional should be considered optimal ? This question does not have an unambiguous answer. Depending on the subject of trade, the requirements for a set of functions may also change. However, this set for 95% of all online stores is the same. Consider the general functions of the online store, which are needed in most cases. All of them can be divided into several groups: Search functionality or simply search and selection of goods; Demonstration - for presenting goods to customers; Information functional, responsible for informing customers; Communication functional, responsible for communication with customers; SEO - functional, which facilitates the promotion of the online store in the search engines; Social functionality, for
Read more