CSS 圖片自動隱藏是一種非常有用的技術，它可以讓我們在頁面中自動控制圖片的顯示和隱藏，從而達到優化網頁性能的目的。下面我們來介紹一下如何實現這一技術。

img {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
img.loaded {
opacity: 1;
}

首先，我們需要為所有要自動隱藏的圖片設置一個初始的透明度，可以通過設置 CSS 屬性opacity: 0;來實現。接著，我們再通過 CSS 動畫的方式為這些圖片設置一個逐漸變化的透明度，從而讓圖片在頁面中逐漸出現。

具體來說，我們可以通過設置transition: opacity 0.5s ease-in-out;屬性來啟用 CSS 動畫，其中opacity表示要動畫的屬性，0.5s表示動畫時長，ease-in-out表示緩動函數。

接下來，我們只需要通過 JavaScript 在圖片加載完成后給這些圖片添加一個loaded的 class，而這個 class 中則包含了一個opacity: 1;的屬性，這樣圖片就會自動出現在頁面中了。

document.querySelectorAll("img").forEach((img) =>{
img.addEventListener("load", () =>{
img.classList.add("loaded");
});
});

以上就是使用 CSS 實現圖片自動隱藏的完整代碼。