How do i make product images appear small and grid for e-commerce site while maintaining their Quality and graphics🙏🏽

Question

How do i make product images appear small and grid for e-commerce site while maintaining their Quality and graphics🙏🏽

Answer 1

You can upload various size files, resize them in your graphics program. Then using media queries, load up the correct image.
Have a look online.

Answer 2

You can use the CSS grid-template Property

https://www.w3schools.com/csSref/pr_grid-template.php

There is an example provided on the page. But it does not include the image.

https://www.w3schools.com/csSref/tryit.php?filename=trycss_grid-template

Here is how to add the image.

<div class="grid-container">
<div class="item1"><img src="image1.jpg" alt="Image 1">
</div>

Also set the image size in CSS.

img { width: 150px;}