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