Is there a way to decrease the loading time of images? For instance, if I have 20 identical images on my homepage (each sized at 1920x1080)
This is the image:
I want to crop the image to a fixed size. Here's the CSS code I am using:
.startpage_image_container{
max-width: 100px;
max-height: 200px;
display: inline-block;
}
.image{
object-fit: cover;
object-position: center center;
height: 200px;
width: 100px;
}
.section{
width: 300px;
}<div class="section">
<div class="startpage_image_container">
<img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
... // More repetitive image containers with the same image source
</div>Despite these efforts, image load times remain high. How can I use PHP to optimize and reduce image loading times? Furthermore, how can I implement content reloading when users reach the bottom of the page?