卓仁SEO培訓
10 01月

seo經驗分享:網站圖片優化技巧

當前位置: 卓仁SEO > SEO學習 > seo經驗分享:網站圖片優化技巧
分類: SEO學習 作者:成都seo 發布時間:2020-01-10 17:10 圍觀: 184

  圖像是每個網站的關鍵組成部分。 根據HTTP Archive,圖像占網頁上需要加載總數據的比例達60%以上。 幾乎成為所有網站上重要的組成部分,無論是電子商務,新聞,時尚網站,博客還是旅遊門戶網站,圖像優化都很重要,如果你想加快你的圖像重量級網站訪問速度,這也許是很容易做到的事情。

  在網站上優化圖像可以大致分為3類 - 負載更輕,負載更少,負載更快。 我們在本文中討論的5種技術或者你遇到的任何其他技術很可能屬於這3種類別中的任何一種。

  所以,讓我們開始吧,看看你今天可以實現的一些簡單技術,以便在優化圖像重量級網站方面取得重大進展。

  1.調整圖像大小

  這是必須的。將圖像大小調整為您網站上所需大小的圖像。不,我不是在談論使用CSS或在HTML中調整大小。我正在談論調整服務器上的圖像大小,然後將其發送給瀏覽器。

  例如,對於要在電子商務網站上列出的產品,你有4000x3000像素的圖像。但是,在您的網站上,您需要顯示該產品的的略縮圖像。它可以是產品列表頁面上的200x300px圖像和產品詳細信息頁面上的800x1000px圖像。在將原始圖像發送到瀏覽器之前,請確保將原始圖像縮小到這些尺寸。調整大小的圖像比原始圖像小得多,並且加載速度比原始圖像快得多。

  

XYZ Product Detail

  

  

  

  

  在我看來,不正確的圖像大小調整,是大多數網站上最大的優化領域。通常,作為開發人員,我們往往會忽略它。請考慮以下情形:您可以從開發新網站開始使用尺寸合適的圖像。在接下來的幾個月中,您網站的布局會發生變化,圖像尺寸要求也會發生變化。但是,不是生成新的圖像來滿足這些新的尺寸要求,而這本身就是一項非常重要的任務,您可以使用其他替代方案。例如,你使用300x200px圖像,放到200x200px的圖像要求尺寸中使用。我猜這會發生在每個人身上。

  使用ImageKit調整大小

  在上面的示例中,單個圖像的差異可能看起來很小,以Kilobytes表示。 但它仍然減小了21%。 這個小的差異,加上很多圖像,有可能加快您的網站速度,並減少21%的帶寬消耗。

  最好的方案是讓圖像服務器只需更改圖像URL即可實時調整圖像大小到任何給定尺寸。 這樣,無論何時圖像維度要求發生變化,獲取新圖像所需的全部內容都是在URL中指定該圖像尺寸。

  網上有許多開源和服務器端實現,或者你也可以自己實現。ImageKit是此類功能的第三方服務實現,除了所有其他功能外,還提供基於URL的實時調整大小和裁剪。 您可以在幾分鍾的設置中將它用於所有現有圖像。

  2.優化你的圖像

  加快圖像重量級網站的下一個步驟是為網站上的每個圖像選擇正確的格式和質量。

  JPG,PNG和GIF是目前在網絡上使用的最常見的圖像格式,每種格式都適用於不同的用例。 另一種稱為WebP的相對較新的圖像格式結合了這些圖像格式中的最佳格式,尺寸縮小了30%,並且在近75%的現代瀏覽器中得到支持。

  上述尺寸之間比較顯示了為圖像選擇正確圖像格式的重要性。 雖然圖像看起來相同,但它們的大小差異很大。

  鑒於巨大的性能優勢,你應該盡可能以WebP格式提供圖像。 在其他不支持的瀏覽器上,你可以繼續提供原始圖像格式。

  簡單地說,圖像質量是衡量圖像外觀的一種方式。 圖像質量和圖像大小之間存在直接關聯。 更高的質量會導致更高的圖像尺寸,從而導致網站速度變慢。

  不同的圖像壓縮方法利用人眼的局限性來區分顏色信息的小變化以壓縮圖像。 作為標準圖片來說,80到90的質量等級(按100的比例來說)通常是圖像尺寸和質量之間的良好折衷方案。

  在不同質量水平下相同編碼的圖像之間的比較。 圖像在視覺上幾乎相似但具有不同的尺寸。

  完成格式和質量優化的一種簡單方法是使用ImageKit來傳送圖像。 它會盡可能自動將圖像轉換為WebP,並實時優化圖像質量。

  3.支持移動設備

  在今天的世界裏,如果你認真對待網站運營,忽視移動用戶是一種罪過。數據表明,近60%的全球流量來自移動設備。是的,雖然移動電話已經變得強大,移動網絡變得更好,但數據顯示移動數據速度仍然比寬帶速度慢得多。有許多國家或地區暴扣一些鄉村移動數據連接不穩定。因此,在為移動設計Web體驗時要格外注意。

  如果您有桌面和移動設備的響應式網站,則可以切換到使用響應式圖像。使用響應式圖像標簽,使用img標簽的`srcset`和`sizes`屬性,您可以為瀏覽器提供單個圖像的變體列表以及不同屏幕上相對圖像大小的定義。然後,瀏覽器根據設備尺寸和您指定的布局,從可用列表中確定要在特定設備上加載的最佳圖像大小。

  

  image-480w.jpg 480w,

  image-800w.jpg 800w"

  sizes="(max-width: 320px) 300px,

  (max-width: 480px) 440px,

  800px"

  src="image-800w.jpg" alt="Image">

  `sizes`屬性提供有關圖像布局的信息,`srcset`屬性為圖像列表提供針對每個URL指定的實際寬度。

  移動設備的另一個影響因素是設備像素比率或DPR值。現代移動電話具有高密度屏幕,在相同的平方英寸中包含更多像素。

                圖片來源:Specctr

  在常規設備上看起來很好的圖像在高密度屏幕上看起來會略微模糊。對此的解決方案是在具有DPR 2的屏幕上加載2x尺寸的圖像,在具有DPR 3的屏幕上加載3x圖像並且在其他設備上加載普通圖像1x尺寸的圖像。這也可以使用如下所示的響應圖像標簽來完成。

  

  image-640w.jpg 2x

  src="image-320w.jpg" alt="Image">

  一個名為Client Hints的現代規范,使得響應式圖像的入門變得簡單,並且與`srcset`和`sizes`屬性方法相比,使代碼看起來更清晰。客戶提示如何工作本身就是一個很大的話題,它超出了這篇文章的范圍,這裏已經詳細介紹了。

  ImageKit為您提供基於URL的DPR參數以及調整大小和裁剪參數,還支持客戶端提示,這使得使用響應式圖像非常容易,並可以跨設備提供完美的圖像。

  4.加載更少的資源

  加載太多圖像也會降低網站速度並對用戶體驗產生負面影響,即使已經優化了所有圖像。我並不主張我們應該使用較小的圖像。但是,有些情況下我們可以避免使用圖像或避免預先加載它們。

  例如,您可以使用CSS創建按鈕,漸變和其他高級元素,而不是加載圖像。

  您可以使用的另一個更重要的技術是延遲加載圖像。延遲加載基本上意味著我們推遲加載不需要的圖像。通常,用戶在其屏幕或視口上不可見的任何圖像可以在稍後的時間點加載,即當圖像進入或即將進入視口時。

  圖像來源:blog.learningspaces.io 圖像在開始並未加載。只加載了圖像占位符。稍後異步加載圖像。請注意,沒有用於加載圖像的序列。

  假設您的網頁上有100個產品。如果您在同一時間和最開始請求所有100個產品圖像,則會減慢加載時間。這些圖像將與網頁上的其他關鍵項目(如CSS和JS)競爭網絡帶寬和CPU資源。

  使用延遲加載時,我們只會加載30個最初對用戶可見的圖像。然後,當用戶開始向下滾動頁面時,我們將繼續加載更多圖像。這將有助於改善初始加載時間和用戶體驗。在某些情況下,用戶不會向下滾動整個頁面,因此根本不會加載某些圖像。因此,您最終還可以節省圖像傳輸的帶寬成本。

  有了jQuery Lazy等JS庫,使用延遲加載入門非常簡單。您還可以使用最新的IntersectionObserver API,它比於延遲加載的JS庫更高效。

  5.使用良好的CDN進行圖像傳輸

  一旦解決了圖像的大小和加載到特定頁面上的圖像數量,下一步就是確保快速加載網站上加載的圖像。減少圖像加載時間不僅可以幫助您獲得更快的整體頁面加載時間,從而更好地在您的網站上獲得用戶體驗,還可以幫助您在搜索引擎上排名更高。

  內容分發網絡或CDN是一組全球分布式緩存/代理服務器。Incapsula的這篇文章很好地解釋了CDN的工作原理。

  圖片來源:CloudFlare

  假設您的網站服務器位於美國。內容交付網絡將您的圖像緩存在其全球分布的服務器網絡上(它比這更複雜,但為了簡單起見,讓我們假設這一點)。然後,如果來自巴西的用戶從您的網站請求圖像,而不是從美國的服務器獲取該圖像,則CDN從巴西最接近該用戶的節點提供該圖像。這減少了加載圖像所需的往返時間。本維基百科頁面列出了一些值得注意的CDN。

  選擇CDN時,請確保CDN支持HTTP / 2.HTTP / 2是一種用於在Web上傳送內容的新協議,可以幫助顯著加快加載時間。它使用多路複用,頭壓縮和服務器推送等技術來減少頁面加載時間。現在,以下CDN支持HTTP / 2.這個演示頁面可以直觀地解釋HTTP / 2和舊的HTTP / 1.1協議之間的性能差異。

  ImageKit為您提供了開箱即用的HTTP / 2 CDN。無需任何額外的努力,您就可以使用ImageKit為您的圖像(甚至其他靜態文件)獲得最佳的交付。

  如何測試網站與圖像相關的問題?

  有相當多的工具,你可以使用來測試一個網站的形象相關問題。一種方法是通過ImageKit使用這個網站分析器。只需輸入一個頁面URL,幾秒鍾之內,它就會給出關於調整大小、最佳格式、延遲加載和HTTP/2的建議。穀歌還開發了一個名為燈塔的開源工具。這個工具集成在Chrome的最新版本中,不僅可以對網站上的圖片進行全面分析,還可以對其他可能影響性能的問題進行分析。Google PageSpeed insights 還指出,如果你的網站上除了其他推薦之外,還有沒有優化的圖片。

  結論

  我們已經介紹了所有關於圖像優化和性能改進的主要技術。有了這些信息,你可以解決90%的圖像相關問題,如果不能解決更多的話,這將幫助你獲得更快的頁面加載時間和更高的搜索結果排名。永遠記住,對於你網站上的圖片-加載更輕,加載更少,加載更快。

網站形象是優秀網站的重要組成部分。對於一篇好文章來說,它的基本標準配置是影像的混合排列。同樣,當我們做網站優化時,很多朋友都注意到,如果百度能抓到自己網頁的圖片並在搜索結果中顯示出來,那麼在很多搜索結果中,我們的有一個無形的優勢。
然而,百度抓圖的規則又顯得如此難以捉摸,讓很多朋友困惑不已。下麵,就構建夢想SEO網站中的圖片優化科技進行一些自己的思考。
首先,圖片在搜索結果中的出現可以使資訊佔據區域優勢,變得更加突出,更容易吸引用戶的興趣,特別是當其他網站沒有圖片資訊時,你的網站會更加突出,你可以輕鬆地達到提高點擊量的目的,體重和排名。
然而,搜索結果中的影像是由搜尋引擎隨機捕獲的,這對我們來說很難掌握。但是,我們可以從拍攝的影像案例中發現,這些影像都有一定的比例範圍,都在121×75左右,這樣可以保證其顯示的清晰度和有效性,方便用戶閱讀。
根據搜尋引擎的蒐索原理,相同關鍵字的搜索結果,匹配度的都在前面,圖片相同。一般來說,那些點擊率高、與網站主題更匹配的圖片更容易被蒐索出來。囙此,我們需要在圖片中添加適當的ALT標籤,並將它們放在網頁的重要位置,這樣它的顯示概率就更高。
當然,並不是所有的網站都會顯示圖片。為了達到這個目標,我們需要使用一些技巧。例如,一般顯示網站的關鍵字會有一定的權重,網站排名也不錯,而且打開速度快,可以幫助圖片出現在當前的搜索結果中。此外,我們發現一個月內更新的圖片更容易被蒐索,囙此我們建議在更新文章時添加適當的圖片。

文章作者:卓仁SEO培訓
文章標題:seo經驗分享:網站圖片優化技巧
本文地址:http://www.2517754.live/SEO/24498.html

相關文章:

上一篇:文章偽原創技巧及寫法注意事項 下一篇:沒有了
返回頂部
福建36选7开奖今晚开奖结果