Friday 9 March 2018

Responsive image using HTML-5 srcset and Angular.

Html 5srcsetAngular 2/5Responsive image

In this article I will be discussing about making an image responsive using latest html 5 attributes. We will integrate the same with Angular for better usage. Using srcset attribute we can set more than one images in the html itself and browser will decide which should load. As a result user can see best quality images depends on their browser size. Along with srcset you can add different size as well. Basically you can avoid using media queries and other codes to make it responsive rather you can set the images and let browser choose the best one. Let us check with an example first.

Image srcset



<img srcset="sample-image1-320w.jpg 320w,
            sample-image2-480w.jpg 480w,
            sample-image3-800w.jpg 800w" 
      src="default-image-800w.jpg" alt="Responsive image">

Here you can see that I have added 3 images and one default image, basically all are same images with different resolution and width. Here 320w means 320 width, instead of w you can use x as well. Similarly you can add the size as well.


<img srcset="sample-image1-320w.jpg 320w,
            sample-image2-480w.jpg 480w,
            sample-image3-800w.jpg 800w" 
      sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px" 
       src="default-image-800w.jpg" alt="Responsive image">

So in this case browser will choose the image and size which suits best for the current view.

web

If you still want to use media query then try with html 5 picture. Check below code.


<picture>
  <source media="(max-width: 799px)" srcset="sample-image1.jpg">
  <source media="(min-width: 800px)" srcset="sample-image2.jpg">
  <img src="defult.jpg" alt="Responsive image">
</picture>

Now let us check how we can use Angular here. Html 5 has lot of powerful features which will really help you to build a good Angular application. For example in my previous article I have created an autocomplete feature, one by using Angular from scratch and other one with Html 5 + Angular. You can check those here: - AutoComplete using Angular from scratch and Autocomplete using HTML 5 + Angular.

Image srcset + Angular


Angular provides many ways to add a class/styles conditionally. By using those features you can set the images and size conditionally.

html


<img srcset="{{imageMap.toString()}}" sizes="{{imageSize.toString()}}" 
     src="default-image-800w.jpg" alt="Responsive image">

component


import { Component } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent {

  imageMap: any[];
  imageSize: any[];
  
  constructor() {
    this.imageMap = [
      "sample-image1-320w.jpg 320w",
      "sample-image2-480w.jpg 480w",
      "sample-image3-800w.jpg 800w"
    ];

    this.imageSize = [
      "(max-width: 320px) 280px",
      "(max-width: 480px) 440px",
      "800px"
    ]
  }
}

Here we have added the image path and size in the component and rendering into the html. There are many ways to add a class/styles conditionally, check these links for that : - 5 different ways to add class/styles and conditionally add class using angular.

Instead of adding this into the component you can create a service file and get the values on demand in any component as well. Read more about those here: - Get data from service file and Share data between Angular components - 7 methods

We are done. In this article we have discussed about creating a responsive image using Html 5 + Angular.

Html 5srcsetAngular 2/5Responsive image

Related Info

1. Angular 2/5 routing with simple examples.

2. Login authentication flow using angular auth guard - Angular 5

1 comment :