web圖像

Images are an essential ingredient of most websites. The visual quality of pictures has a direct impact on the brand image and the message those images convey. And the weight of images usually accounts for a 40-60% of the data transferred on the web.

圖片是大多數網站的重要組成部分。 圖片的視覺質量直接影響品牌形象以及這些形象傳達的信息。 而且圖像的重量通常占網上傳輸的數據的40-60％。

This usually has the largest impact on loading time over other resources like JavaScript. So, whether we're creating or running a website, we should put in place an image transformation and optimization pipeline.

與其他資源(例如JavaScript)相比，這通常對加載時間有最大的影響。 因此，無論是創建網站還是運營網站，都應該建立圖像轉換和優化管道。

There are many options to do this, from in-house developments based on open source libraries and suites – like ImageMagick – to cloud-based tools and APIs.

從基于開源庫和套件的內部開發(例如ImageMagick)到基于云的工具和API，有很多選擇。

Whatever tool we use in our deployment, there are four main tasks that, at the very least, any pipeline should accomplish.

無論我們在部署中使用什么工具，至少有四個管道都應完成四個主要任務。

調整圖像大小。 (Resize images. )

Image resizing is the first and most important step. It brings a big impact on weight with no visual quality penalty, as long as we don't make it smaller than the displaying resolution.

調整圖像大小是第一步，也是最重要的一步。 只要我們不使其小于顯示分辨率，它就會對重量產生重大影響，而不會影響視覺質量。

We should always set and enforce a maximum image resolution in our website, for instance 2000 px width. Ideally, we'd make our website responsive by setting different breakpoints and delivering images that fit in our users' displays.

我們應該始終在網站上設置并強制使用最大圖像分辨率，例如2000 px寬度。 理想情況下，我們將通過設置不同的斷點并提供適合用戶顯示的圖像來使我們的網站具有響應能力。

If you need help on choosing your breakpoints, check out this article on the best image sizes for web.

如果您在選擇斷點時需要幫助，請查看有關適用于Web的最佳圖像尺寸的本文。

轉換為正確的格式。 (Convert to the right format. )

JPEG is the default format in the web. PNG may work better with graphic designs featuring solid colors, but in these cases it may yield lower weight with better quality.

JPEG是網絡中的默認格式。 PNG在具有純色的圖形設計中可能會更好地工作，但是在這些情況下，它可能會產生重量更輕，質量更好的圖形。

You may consider offering WEBP for Chrome, Edge, Firefox and Android users, keeping JPEG as fallback for Safari and iOS. It may save 10-30% of image weight with very similar quality, perhaps some more blur and less ringing.

您可以考慮為Chrome，Edge，Firefox和Android用戶提供WEBP，而將JPEG作為Safari和iOS的后備。 它可以以非常相似的質量節省圖像重量的10％至30％，也許更多的模糊和更少的振鈴。

For an up to date revision you may check out this article on image formats for web.

有關最新版本，您可以查看有關Web圖像格式的本文。

正確壓縮圖像。 (Compress images properly. )

We can do this with a powerful open source suite like ImageMagick and simply set a quality factor (typically 75 to 85) for JPEG (and WEBP) images. You can still use a perceptual metric to better protect quality and further squeeze weight – this is an option available in some cloud image optimization tools.

我們可以使用功能強大的開源套件(例如ImageMagick)來做到這一點，并且只需為JPEG(和WEBP)圖像設置質量因子(通常為75到85)。 您仍然可以使用感知指標來更好地保護質量并進一步壓縮重量-這是某些云圖像優化工具中可用的選項。

擺脫元數據。 (Get rid of metadata. )

From shooting to editing, images accumulate metadata, like exif data. While they may be useful for editing and management purposes, they have no impact on how images show in our web. Their weight can easily get 20 KB or more per image.

從拍攝到編輯，圖像會累積元數據，例如exif數據 。 盡管它們可用于編輯和管理目的，但它們對圖像在我們的網絡中的顯示方式沒有影響。 每張圖像的重量很容易達到20 KB或更多。

We should get rid of metadata before publishing on the web. We only have to make sure that images are coded with the proper orientation and with a sRGB profile, adhering to good color management practices.

在網絡上發布之前，我們應該刪除元數據。 我們僅需確保以正確的方向和sRGB配置文件對圖像進行編碼，即可遵循良好的色彩管理規范。

翻譯自: https://www.freecodecamp.org/news/image-optimization/

web圖像