How to display the image correctly?

Question

PHP

Actually the question is simple. How to make the correct display of images in a loop?
There is a lot of information on the Internet on this issue, but I would like to do everything as correctly as possible with a focus on performance.
In general, there are several categories of goods. When you click on a category, products from the database are displayed in a cycle (name, product code, price and picture). Due to the fact that there are a lot of goods - not everywhere there is a picture, for such cases there is a stub picture no_img.jpg I
haven’t done pagination yet and all the goods are unloaded (70-80 pieces each), which significantly affects the loading of images and the page as a whole.
Now to the code, the product output code:

the code

<? while($row = mysql_fetch_assoc($result3)): ?>

 <div class='product'>
  <div class='product'><a href='product.php?id=<?= $row['Code']; ?> '><img typeof='foaf:Image' src="<? echo plugins_url( 'img/product_img/' . $row['Code'] . '.jpg' , dirname(__FILE__) ); ?>" onError="this.src='<? echo plugins_url( 'img/product_img/no_photo.gif' , dirname(__FILE__) ); ?>'" width='120' height='120' alt='' /></a></div>
  <div class='product-title'>
    <a href='product.php?id=<?= $row['Code']; ?> '><?= $row['Name']; ?> </a>
  </div>
  
  
  <div class='product-articul'>Код товара: <?= $row['Code']; ?> </div>


  <div class='product-price'><?= $row['PriceShop']; ?> руб</div>

  </div>
    <?= $row['data']; ?>

<? endwhile; ?>

As you can see, a check is now used, if there is a picture with the corresponding code in the folder, then display it, if not, then display a stub:

spoiler

<? echo plugins_url( 'img/product_img/' . $row['Code'] . '.jpg' , dirname(__FILE__) ); ?>" onError="this.src='<? echo plugins_url( 'img/product_img/no_photo.gif' , dirname(__FILE__) ); ?>'

How correct is this method?
Pictures are stored in a folder, the name corresponds to the product id. It is convenient to simply rename the picture and throw it in a folder, or there is a downloader on the site.
The idea was the following, when uploading a picture through the site, add its path to the database and do a check with the database already when outputting. Or, in general, upload pictures to the database, which, as I understand it, is not advised to do.
How it will be correct to implement all this?

Answer 1

loading occurs in the client, html is formed on the server. No connection. It takes a long time for you to load for 2 reasons:
1. this is wp, it does not fly
2. there are a lot of pictures, each is a separate request to the server.
What to do: well, I won’t say anything about wp, otherwise you need to optimize the size of the images if there is no pagination and there are a bunch of goods. then do an asynchronous upload. Load all nophotos, and then load photos in js instead of a stub. For example:
Accordingly, we wait for the page to load, and gradually replace src with data-img. If you go further and optimize for different display sizes, then there is a wonderful tag:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

But you can achieve this in the first way. If in data-img you just store the name of the image or even the id of the product and form the url to the desired size in js.

Answer 2

ohospade) people have problems) yes, everything is fine. There is a check for the existence of the file - and ok. Especially at you on the party of the user check goes. Less load on the server.