響應性的圖像-為什么它是必須的和4種方法來完成它

我們需要改變我們對待圖像的方式。為什么?因為互聯網已經改變了。人們不僅僅是在家里瀏覽網頁，他們還會在幾乎所有可能的尺寸的屏幕上到處瀏覽。事實上，世界上有一些地方，人們只能通過智能手機上網。

不是iphone,提醒你。我們說的廉價手機。更重要的是，他們中的許多人都在用有限的數據計劃來做這件事。

這意味著我們必須設計我們的網站來解釋這一點，這意味著為移動網絡優化圖像。像.jpeg文件這樣的光柵圖像不適合響應式設計。他們的測量是固定的，大的可以消耗帶寬。

響應的圖像

如果你想為你和你的用戶降低成本，同時確保你的網站看起來總是更好的，你需要找到一種方法來讓你的圖像響應。好消息是人們正在研究這個問題。已經有一些解決方案了。訣竅是要知道哪種方法*適合你。

讓我們從你選擇的*個，也是*簡單的開始:

max-width:100%;
簡單地說，你設置了一些CSS來應用于所有的圖像。一旦到位，它將確保您的所有圖像都留在它們的父元素內。這樣，當人們在一個更小的屏幕上瀏覽你的網站時，圖像就會被保證縮小。

例子:
img {

max-width:100%;

}

優點
它很簡單，只要你不設置任何像素特定的圖像高度，它就能很好地工作。
你根本不需要改變你的HTML。常規的<img>標記完成任務。
通用的瀏覽器支持。
缺點
視網膜屏幕:除非你讓所有的圖像都是你需要的像素尺寸的兩倍大，否則它們會在某些機器上看起來很時髦，比如mac電腦，現在還有一些安卓設備。指責蘋果。我做的事。
使用大量的圖片(無論你是否在處理視網膜屏幕)，在移動設備上的表現都很困難。更糟糕的是，他們可以在有限的數據計劃上消耗數據。如果你能幫助你的用戶，你不希望這樣做。
這個簡單的技術有它的位置，但是它不適合任何情況。如果您的網站將為移動設備上的用戶提供大量圖片，您可能希望實現以下建議的解決方案之一。

注意:接下來的兩個解決方案包含在HTML5規范中。隨著時間的推移，它們將成為“官方”的解決方案，因為越來越多的瀏覽器開始支持它們。

srcset
通常，當您將一個圖像嵌入到頁面中時，您只定義了一個“源”，即src屬性的形式，例如:

< img src = " / img_articles / 22532 / whatever.jpg”alt = "不管" >
srcset屬性允許您添加圖像的其他版本，設置要顯示這些圖像的屏幕寬度，并讓瀏覽器作出決定。這意味著用戶的設備只能下載屏幕大小的正確圖像。

你可以這樣設置:

< img src="/img_articles/22532/ whateversmall.jpg " srcset=" .jpg 1000w, whateverlarge.jpg 2000w" alt=" > "。
優點
你讓瀏覽器做數學運算。為正確的屏幕尺寸選擇正確的圖像可能會很麻煩，如果你使用了大量的圖像，你可能不想麻煩。
你節省帶寬。這意味著降低主機托管成本，降低移動用戶的數據成本。
部分瀏覽器支持。事實上，這是列表中第二受支持的選項。
缺點
它只是部分瀏覽器支持。要使它在舊的瀏覽器(包括一些移動瀏覽器)中工作，您需要使用一些稱為polyfill的JavaScript。

兩個這樣的填充填充是srcset-polyfill，和圖片填充。順便說一下，圖片填充還為元素提供瀏覽器支持，該元素將在接下來的頁面中出現。</picture>

*后，在單個<img>標簽上使用srcset屬性可能是人們將來*常用的選項。這是有道理的，因為我們大多數人只是為了節省帶寬而使用幾個不同大小的相同圖像版本。

響應的圖像

<圖片>
當srcset只是一個可以應用于任何圖像的屬性時，是一個成熟的元素，有它自己的標記和所有東西。</picture>不過，它的一般用途是一樣的。告訴瀏覽器有幾個不同版本的圖像，以及顯示它們的屏幕大小。

不同之處在于數學。如果您只使用srcset，瀏覽器將根據瀏覽器的屏幕或窗口大小進行一些計算。你可以給出提示，但瀏覽器本身會發出提示。

用<圖片>，你完全控制。如果你說某個圖像應該顯示在特定的屏幕寬度，那么這就是將要顯示的內容。成本是更多的代碼。因此，一般建議在處理同一圖像的不同大小時使用srcset。<圖片>是在你做藝術指導時使用的。 本文來源：智通澤軟件，轉載請注明出處！如果需要泊頭網站建設 泊頭小程序開發 泊頭微信開發 泊頭APP開發請聯系封經理，我們將提供上門服務！
聯系方式：手機：13393374114  座機：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：