Recent responsive web design project experience sharing-high resolution image processing

In the case of high resolution, the picture of the product will inevitably distort.

How to make a picture of a product in a high-resolution situation without distortion to provide users with a better experience?

I found a solution, and I don't know if it's what you want.

The effect of the first slice contrast

The left side is used right after use before

The gap is still relatively large

Interested in the small partners can download the source code to try it yourself

Https://github.com/scottjehl/picturefill

Picturefill

The Web is truly worldwide, and we had to confront the fact that the everyone had access to fiberoptic connections and 4G Networks. Scott Jehl encountered this digital divide first-hand when travelling and working his to through southeast Asia, and he is a strong advocate of mobile-first and responsive websites that don ' t put an undue burden on mobile users. His Picturefill script was a polyfill <picture> for the proposed Element-javascript code this mimics the picture API, Enablin G us to use it on our websites today. The future was now, baby!

Picturefill does not require jQuery, but obviously it does require the script is included somewhere in the picturefill.js page. Picturefill also requires some special markup, with DIVs to represent the image variations, differentiated by data-media attrib Utes that act just like media queries in CSS. Also optionally put an image in conditional comments for browsers that don ' t support media queries (I ' m looking at You, IE 8), and a fallback in a <noscript> tag for browsers that don't have JavaScript enabled (I ' m looking at you, BlackBerry ).

Here's an example of a typical Picturefill setup:

<spanData-pictureData-alt="Descriptive alt tag"><spanData-src="Images/myimage_sm.jpg"></span><spanData-src="Images/myimage_lg.jpg"Data-media="(min-width:600px)"></span><!--[if (LT IE) & (! Iemobile)]> <span data-src= "images/myimage_sm.jpg" ></span> <! [endif]--><!--Fallback content for non-js browsers. -<noscript> src=" Images/myimage_sm.jpg "alt = "descriptive alt tag  "/>  </noscript></span>    

That's all you need to the display adaptive images at page-loading time using Picturefill. Drop in the script, configure the markup, and everything just works. You can also call Picturefill programmatically if you need to add images to the page on the fly.

Picturefill requires a lot of custom markup, so it might isn't being the best choice for those who cannot alter their website ' s Source code for any reason. It also doesn ' t do any bandwidth detection. If bandwidth detection is important to your project and then has a look in this next solution.

An img with "Srcset" and sizes "attributes: