Responsive Images：調整大小或動態裁剪？

這個問題實際上不是關於編碼，而是爲任務選擇正確的方法。我不知道它是否違反SO的規則，但在這裏，你去..Responsive Images：調整大小或動態裁剪？

我曾經爲當地報紙建立了一個小CMS，使他們能夠添加他們的帖子和照片的功能。關於這張照片，他們曾經上傳過一張照片，我保存了該照片的各種版本，以便根據他們可能選擇的不同模板（模板而不是屏幕尺寸）提供服務

現在，我被要求更新這個舊的系統，我面臨着響應/適應性的困境。

據我在網上發現，下一件大事是<picture>元素。我找到了很多資源，當我決定去找它時，我來到了this網站。如果你看看任何圖像的來源，你會意識到它有一個查詢字符串，如width=940&height=320&mode=crop&scale=both&meta=panoramic當我調整窗口的大小時，它變得像width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter我相信這個網站使用Image Resizer，並根據屏幕大小，一張照片是由服務器隨時處理以輸出新圖像。

我不明白的是，它的這些方法實際上是更好的，因爲 picture元素仍然需要上傳到而imageresizer只需要一個服務器的多個圖像，並將其作物 - 調整大小的一個適合屏幕大小。但另一方面，使用picture元素，服務器不會受到轟炸，請求調整圖像大小，但可以通過處理和時間節約現有照片？

來源

2016-01-01 Kemal Emin

圖片尚未被所有瀏覽器支持http://caniuse.com/#search=picture，但它顯然是最好的，如果你可以在你的上下文中使用它，它可以滿足你的需求。另外請注意，像圖像調整器這樣的服務器可以緩存內容，以避免重複的圖像計算。 –

Image Resizer庫聽起來像是您最好的選擇 - 節省您上傳和管理許多不同圖像大小的麻煩！

如果您擔心圖像調整大小的負擔（無論如何小），您可以隨時嘗試使用DiskCache插件調整圖像大小然後將其保存到磁盤 - 隨後請求相同大小的圖像回報。

來源

2016-01-06 12:57:11

在您鏈接到的網站上，圖像src在瀏覽器視口（和網站設計）更改時使用JavaScript進行更改。

這意味着瀏覽器需要等待此JavaScript執行以知道它需要加載哪個圖像。

有一套預先定義的圖像存儲在服務器和現代標記<img srcset="…">或<picture>，瀏覽器獲取它需要的一切直接下載HTML時，這意味着即使在任何CSS或JavaScript之前它可以開始下載最好的圖像被下載和/或執行。這對於性能來說真的好多了，對用戶來說也是如此。另外，由於大多數瀏覽器現在都支持這些標準，所以即使JavaScript因任何原因被阻止或中斷，它也能正常工作。

來源

2017-03-24 10:19:22

Responsive Images：調整大小或動態裁剪？

回答

相關問題