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. |