jpg 图片显示问题 图像重复 图像消失动画

如何解决jpg 图片显示问题 图像重复 图像消失动画

我有一个非常简单的 HTML/CSS 图像网格。所有照片都不同，都在 <figure> 标签内。当图片为jpg文件格式时，在刷新页面时，有时会出现部分重复或变形的现象，同时出现重影或消失。这只发生在 jpg 上，而不是 png 上。为什么是这样？有解决办法吗？

ul { padding: 0; margin: 0; }

figure { margin: 0; }


.grid-item {
    float: left;
    width: 33%;
}

.tm-img {
    max-width: 320px;
    width: 100%;
    height: auto;
    border: none;
    margin: 0 auto;
}

.grid-item figure {
    position: relative;
    overflow: hidden;
    text-align: center; 
}

.grid-item figure img {
    display: block;
    max-width: 100%;
    
}

<ul>
<li>                    
<div>

<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/01.jpg" alt="Image 01" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/02.jpg" alt="Image 02" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/03.jpg" alt="Image 03" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/04.jpg" alt="Image 04" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/05.jpg" alt="Image 05" class="tm-img">

</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/06.jpg" alt="Image 06" class="tm-img">
</figure>
</div>  
</div>                                 

</li>
</ul>

图像重复

图像消失

这是示例 netlify html page

动画

多次刷新页面显示问题。