Automatic Responsive Images – Generally, the majority of developers love to add responsive images in their websites. It is good for users to obtain a clear picture. There are five different ways to do automatic responsive images. As a website developer we need client hints before loading our website.
Making a responsive image according to browser functionality is the best way to solve the doubt of automatic responsive images. Usually, chrome, mozilla, and opera browser compatibility cover more than 60% of users. Therefore, our methods are really helpful to give responsive image results.
Use of html to make automatic responsive images
Compared to others, it is very simple. But we have already heard about the fact that simple things are always more unsuitable than complex one. Doing html tag is easy to solve the problems of automatic responsive images, but it is also complex and server also takes numerous time. Therefore, it is an effective but not professional developer strategy.
For example
<img size=”100vw”
srcset=”tiny.jpg 320w
Small.jpg 512w
Medium.jpg 640w
Large.jpg 1024w
Huge.jpg 1280w
gigantic.jpg 2048w
src=”simple.jpg”
alt=”according to client hints” />
mentioned example, we are using tiny, small, medium, large, huge, and gigantic images. Which are set by depends on that size of client. If size is 320, then user see tiny.jpg. Then if the client has a large display then he see gigantic.jpg it is working according to the user requirement. We home you understand doing responsive image depending on user requirements.
Use of JavaScript to make responsive image
When we want to do a responsive image with javascript at that time we need to use javascript tag and use functionality for making an responsive image. It is also good way to make responsive image with using javascript.
For example
<picture>
<source src=”tiny-320.png”>
<source src=”small-512.png” media=”(min-width: 512px)”>
<source src=”medium -640.png” media=”(min-width: 640px)”>
<source src=”large-1024.png” media=”(min-width: 1024px)”>
<source src=”huge-1280.png” media=”(min-width: 1280px)”>
<source src=”gigantic-2048.png” media=”(min-width: 2048px)”>
<noscript><img src=”tiny-320.png”></noscript>
</picture>
Mentioned example is also useful to make a automatic responsive images. It is helpful to allocated best user friendly experience to the client depending on their requirements.
The most irrelevant task it that making one particular JavaScript also work effectively on a big website. But the problem is that generally JavaScript loads at the end of all content therefore it is hard for user to allocate a good and responsive experience. Therefore, usually the above method is also use in rarely case. Also we need pre parser javascript. Therefore, other methods work efficiently. .
Client hints from rescue
It is too hard to use javascript on numerous images. Therefore at server side, means asking web servers to help reduce images size. First of all google has to catch data from the client. When the client sends the request server can easily catch the details of requirements, and depending on the in browser image can see responsiveness.
Automatic DPR
It is the most popular and easy method to send requests to the client. In this method one simple code which is implemented in the header section. When the user loads the page tag, send the request to the client and then after the user get automatic responsive images. What is actually happening behind the user browser is that 1x devices receive 1x resources and 2x devices receive 2x resources.
For example
<head>
<meta http-equiv=”Accept-CH” content=”DPR”>
</head>
Above example code sends extra request to the http header name DPR. Now DPR headers are client hints. Whenever we send a dpr request using meta tag and dpr_auto tag. At that movement cloudry sends different resources depending on different screen ratio.
Automatic width
It is another popular method that work to take automatic width. Here meta tag send request to the browser and then another client hind with in addition DPR. Img tag inform layout width. And eventually browser broadcast the server via width hints.
For example
<head>
<meta http-equiv=”Accept-CH” content=”DPR, Width”>
</head>
<body>
<img sizes=”100vw”
src=”http://res.example.com/w_auto/tiny.jpg”
alt=”tiny.png” />
</body>
Advanced method use w_auto
This is another interesting and popular method which is used. In this method, different types of parameter use. W_auto has two parameter.
For example
http://res.example.com/demo/w_auto:100:400/tiny.jpg
First parameter gives the possible response for illustrate, image with is 250pixle, so its take nearest hundred size such as 300px. Check here essential key points for responsive image galleries for websites.
Second parameter also refer fullback width which is serve image width.
If browser don’t support client hint, and fallback parameter is absent w_auto take default original size.
Mentioned all five different types of methods are useful to make a automatic responsive images width client hints.