Dynamic Blox

A Web Design Resourse

Breadcrumb Section

Responsive Images

April, 02, 2018 | HTML

Responsive Images, or the ability to switch image sizes with devices based on their screen sizes is more of a necessity than ever. Today we have a plethora of mobile devices. As a front-end developer, it is imperative that you provide your clients with the most efficient techniques for maximum performance. Applications like WordPress already do this for you without most users ever being aware of it.

Requirements

You will need to resize every image you add to a webpage to at least three different dimensions. As I mentioned before, most some content management systems do that for you. The transition happens in the HTML side. The style you give the image has little effects on resizing it, unless you are using it for a background. If so it would wiser to implement media queries or breakpoints.

CSS Example

* {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
 }

.row{

width:100%;
 display:block;
 position: relative;
 float:left;
 }

img.fullscreen{
 position: relative;
 float:left;
 width:100%;
 }

HTML Example

 <div class="row">
 <img srcset="img/horizon-sm.png 640w, img/horizon-lg.png 1280w, img/horizon-xlg.png 1920w"
 sizes="(max-width: 640px) 320px, (max-width: 1280px) 640px, (max-width: 1920px) 960" alt="Horizon" class="fullscreen"
 src="img/horizon-xlg.png">
 </div>

Markup

You will notice two new attributes in the mark up above, srcset and sizes. They instruct the browser on what image to pick based on the screen size. I’ve tested this new feature on Chrome and Firefox. the results are inconclusive when using the development tools on either browser. It’s more consistent when you resize your browser or load from a mobile device.