Automatic Adaptive Images in Angular Applications

A Step-by-Step Guide on How to adapt the Images of your Angular Application

Photo by Tim Oun on Unsplash

In this post series, different tasks are described that can be automated to perform a deployment of frontend applications in Angular.

Series:

1. Build&Deploy Angular Apps en GitHub Pages con GitHub Actions
2. Automatic Adaptive Images in Angular Applications

Introduction

Today, users access Web apps through a wide variety of devices, such as laptops, tablets, smartPhones, desktop computers, etc., which have different screen sizes and resolutions. One of the principles of accessibility is to get as many users as possible enriching and satisfying the experience in accessing applications overcoming both physical barriers (hearing, visual disabilities, cognitive, etc …) as well as material or technological. Today, there are users who connect from different devices, as we have already indicated, and also with different technological features such as the bandwidth of the internet network.

In addition, there are web applications that have high visual content, and therefore, a lot of images. These images are normally stored on a CDN (Content-Delivery-Network) from which the images are…