By manoj , 23 September, 2022

Image Optimization using core in Drupal

Prerequisites

Make sure both Drupal core modules Breakpoint and Responsive image are enabled.

Defining responsive image styles

Go to /admin/config/media/responsive-image-style and click Add responsive image style to create a new style

Use responsive image styles in Image fields

By manoj , 23 September, 2022

Images

Images can categories as below.

Responsive Images

Responsive images means loading images as per specified sized on  user screen based on breakpoints.

Fluid Images

Fluid images when large images are scaled down with CSS.

Difference between responsive images and fluid Images

Sr No. Responsive Images Fluid Images
1. Responsive images sizes are optimized for mobile devices. Fluid images are scaled down with CSS.
2. Responsive images transmit less data 

Fluid images transmits largest size as compare

example: sending a 100 kb fluid image takes far longer than a 1 megabyte responsive image, especially over slow cellular signals. 
3. Responsive image sizes get processed by a site editor fluid images gets processed by a browser.
4.    
By manoj , 20 September, 2022

The Viewport

The viewport is the user's visible area of a web page. The viewport varies as per  devices(mobile ,tablet ,computer).

viewport is used for Responsive Web Design.