圖片展示及優化

一、圖片選取與尺寸優化

在選擇圖片時，應根據網頁實際需要和載入速度進行權衡。對於需要高清顯示的大圖，可以考慮採用延遲載入或分塊載入等技術，以保證用戶體驗的同時盡量縮短載入時間。而對於小圖或圖標等，可以使用CSS Sprites技術將多個圖片合併成一張圖片來減少HTTP請求的次數。

除了大小，圖片的尺寸也要考慮到不同屏幕的顯示效果。對於可以被壓縮的圖片（如照片、插畫等），推薦最大寬度為屏幕寬的一半，最大高度可以根據實際需要進行調整。同時，也建議使用圖片壓縮工具（如TinyPNG、Kraken等）來減小圖片體積，從而減少載入時間。

二、響應式圖片展示

隨著智能手機和平板電腦等移動設備的普及，響應式設計已經成為了Web設計的標配。在圖片展示方面，也應該根據不同屏幕解析度提供對應的圖片，以達到最佳展示效果。目前有兩種常用的做法：

1、使用srcset屬性和sizes屬性。其中，srcset屬性允許瀏覽器根據屏幕解析度從多個候選圖片中選擇最佳圖片，而sizes屬性則根據視口寬度來指定圖片展示應該佔據的相對寬度。

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w" 
     sizes="(max-width: 800px) 50vw, 100vw">

2、使用picture元素。picture元素允許開發者指定多個不同的源文件和媒體查詢（如屏幕寬度、像素密度等），以便在不同的場景下展示最佳的圖片。

<picture>
  <source media="(max-width: 800px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

三、懶載入與預載入

在一些需要載入大量圖片的Web應用中，懶載入和預載入都可以優化用戶體驗。懶載入通常指滾動載入，即當用戶滾動到一個元素時，才觸發該元素所包含圖片的載入；而預載入則是指在資源載入完成前，提前載入一部分可能需要的資源，以縮短載入時間。

無論是懶載入還是預載入，它們都可以通過JavaScript或框架來實現。下面是一個實現懶載入的例子：

<img src="placeholder.jpg" data-src="realimage.jpg">
<script>
  var lazyImages = document.querySelectorAll('img[data-src]');
  var lazyLoad = function() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top < window.innerHeight) {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      }
    });
  };
  lazyLoad();
  window.addEventListener('scroll', lazyLoad);
</script>

在這個例子中，我們給需要懶載入的圖片添加了data-src屬性，表示圖片的真實地址。通過JavaScript，我們遍歷所有帶有data-src屬性的圖片，並監聽滾動事件。當圖片進入視口時，我們再將其真實地址賦值給它的src屬性。