免費(fèi)參與·100+跨境活動 
免費(fèi)下載·4000+跨境資料 
免費(fèi)學(xué)習(xí)·2000+直播課程 
免費(fèi)加入·15萬+賣家交流群 
2019-07-02 11:49
產(chǎn)品圖片是Shopify獨(dú)立站電商賣家銷售的工具之一，買家在無法真實(shí)地觸摸網(wǎng)站產(chǎn)品時，就要借助產(chǎn)品圖片和描述以此做出購買決策。高質(zhì)量的產(chǎn)品圖片可以提高銷售，但很多賣家可能還會存在一些問題。在多數(shù)情況下，他們所銷售的產(chǎn)品因圖片過大，而加載速度太慢，導(dǎo)致買家不耐煩。
根據(jù)一項報告顯示，如果網(wǎng)站加載時間超過三秒，一半以上的手機(jī)用戶就會退出該網(wǎng)站；網(wǎng)站加載時間每延遲100毫秒，轉(zhuǎn)化率就會降低7%；而網(wǎng)頁加載時間每延遲兩秒，跳出率就會增加103%。
但幸運(yùn)的是，一個簡單的HTML屬性就能夠提高網(wǎng)站性能，并提供引人注目的圖片。
提供一個在屏幕上顯示良好的產(chǎn)品圖片和一個快速加載網(wǎng)站的解決方案可能取決于圖片大小。
以英國健康零食品牌Graze為例，當(dāng)產(chǎn)品圖片在13英寸的MacBook Air上顯示時，這些圖片（就分辨率和文件大小而言）明顯大于要求所需。圖片在屏幕上只有464像素寬，但是卻被以830像素進(jìn)行傳送。
整個圖片（830 x 495像素）被壓縮，大小約為81 KB，總像素約為41萬像素。但是當(dāng)圖像被調(diào)整到464 x 277像素時（即顯示尺寸），大小約為20 KB，總像素大約128000。
這聽起來可能不多，但Graze的主頁上有大約2MB的圖片。如果傳輸?shù)膱D像大小與所需大小之間的關(guān)系是恒定的，Graze可以將其主頁圖片負(fù)載減少1.5 MB或75%，這將顯著提高移動設(shè)備的加載時間。
另外，再以一家在線服裝零售商Fred Perry為例，該網(wǎng)站正在使用的是HTML srcset屬性及其產(chǎn)品圖片。實(shí)際上，這個HTML屬性為網(wǎng)頁瀏覽器提供了產(chǎn)品圖片的幾個版本。無論該圖像是顯示在大屏幕上還是小屏幕上，它都會提供適當(dāng)大小的圖片。
（Fred Perry網(wǎng)站為瀏覽器提供了數(shù)個產(chǎn)品圖片選項，這些選項由srcset屬性傳輸。）
HTML srcset屬性大約對90%的互聯(lián)網(wǎng)用戶可用，因?yàn)樗梢耘c移動和桌面瀏覽器兼容。該屬性的目的是為特定的屏幕大小提供合適的圖片。
在上面的示例中，不支持srcset的瀏覽器只需使用src屬性并傳輸指定的圖片。因此，即使可能無法獲得較好的圖像，但srcset不會破壞這些舊的瀏覽器。
然而，絕大多數(shù)瀏覽器會考慮屏幕的寬度和分辨率，然后選擇可用的圖像。例如，如果頁面顯示為750像素寬，在大多數(shù)情況下瀏覽器將會選擇“product-800”。圖像仍然會比要求的大一些，但它的大小將明顯比1,200像素版本或200像素版本更接近。
另外，這個過程其實(shí)是可以自動化操作的。不過根據(jù)電商平臺的不同，這可能需要一些開發(fā)工作。在大多數(shù)情況下，你會上傳較大的圖像到電商平臺中，然后腳本將創(chuàng)建圖像的較小版本，并將它們包含在產(chǎn)品詳細(xì)信息頁面中。
如果希望對每個屏幕大小顯示的圖像有更多的控制，還可以包含sizes屬性。
sizes屬性可以使你管理瀏覽器在每個斷點(diǎn)上使用哪個圖像。綜上所述，srcset和sizes是提高網(wǎng)站性能的強(qiáng)大工具。
（來源：跨境喵的碎碎念）
以上內(nèi)容屬作者個人觀點(diǎn)，不代表雨果網(wǎng)立場！本文經(jīng)原作者獨(dú)家授權(quán)供稿，轉(zhuǎn)載需經(jīng)雨果網(wǎng)授權(quán)同意。
