html - 图片应该快速加载，改变分辨率？

Question

如何最大限度地减少图像的加载时间？例如，我的首页上有 20 倍相同的图像(尺寸 1920x1080)

这里是图片

现在我想以固定尺寸裁剪图像。为此，我使用了这个 css 代码

.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>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
</div>

但是加载时间仍然很高。我如何使用 PHP 最小化图像并减少加载时间？以及如何在用户滚动页面底部后重新加载页面上的内容？

Answer 1

我用这个:

<?php
 echo "<script>
      // http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
      function preloader() {
        if (document.getElementById) {
          document.getElementById(\"preload-01\").style.background = \"url('img/bg-contact.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-02\").style.background = \"url('img/bg-faq.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-03\").style.background = \"url('img/bg-index.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-04\").style.background = \"url('img/bg-product.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-05\").style.background = \"url('img/callout-money.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-06\").style.background = \"url('img/callout-question-mark.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-07\").style.background = \"url('img/callout-wow.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-08\").style.background = \"url('img/featured.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-09\").style.background = \"url('img/footer-vlad.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-10\").style.background = \"url('img/vlad.png') no-repeat -9999px -9999px\";
      }
      function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
          window.onload = func;
        } else {
          window.onload = function() {
            if (oldonload) {
              oldonload();
            }
            func();
          }
        }
      }
      addLoadEvent(preloader);
      // End pre-loader functions
    </script>";
?>