Why is my website slow to load images from just using <img>? is there an better way to insert-CodePudding

I am having a situation where when the more I add photos to a website for blogging, the slower my website becomes. It even becomes slower when running on mobile devices. Below is the code I writing:

    <img src="images/photos/2022_09_05/2.jpg" alt="" title="Drive to airport">
    <img src="images/photos/2022_09_05/3.jpg" alt="" title="Getting ready for takeoff">
    <img src="images/photos/2022_09_05/4.jpg" alt="" title="Exit of USA">
    <img src="images/photos/2022_09_05/5.jpg" alt="" title="Leaving LAX">
    <img src="images/photos/2022_09_05/6.jpg" alt="" title="Goodbye California">
    <img src="images/photos/2022_09_05/7.jpg" alt="" title="Views">
    <img src="images/photos/2022_09_05/8.jpg" alt="" title="More views">

Is there another way to go about this, such as using databases and using software such as MongoDB for faster implementations? I am not very familiar with databases and would like to ask for some recommendations. I would like to know if MongoDB is an option.

CodePudding user response：

You should be able to see improvements by decreasing the amount of bandwidth required for the initial page load, and by downloading only the data that's necessary, and only when it's necessary.

Don't load the images until they're near the viewport. Add the loading="lazy" attribute to your images. (for older browsers, you'll need a polyfill or another approach)
Only load as much image data as you need. Look at how large the images appear on your page, and compare them to the size of the images when opened in a standalone tab or image viewer. To save on bandwidth, the sizes shouldn't be that different. If the size of the image on the page is small, for example, the src it links to should also be small - otherwise you'll be sending a lot of extra data for no visible effect.
If you still experience sluggishness with the above, you could also upgrade your server to one with better upload speed, ideally one in a similar geographical area as your viewers.

Putting the images into a database won't help at all because then you'll have to retrieve them from the database each time. Having a bunch of static image files is just fine.