国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢(xún) 在線咨詢(xún)
15158846557 或 在線咨詢(xún)
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > WordPress網(wǎng)站如何優(yōu)化圖片

WordPress網(wǎng)站如何優(yōu)化圖片

時(shí)間：2023-07-10 22:15:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-10 22:15:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

WordPress網(wǎng)站如何優(yōu)化圖片：你是否知道圖片對(duì)網(wǎng)站的速度有巨大的影響？作為新手建站經(jīng)常忽略這一點(diǎn)，由于上傳了未經(jīng)優(yōu)化的原圖，導(dǎo)致網(wǎng)站打開(kāi)速度很慢，還以為是服務(wù)器不好，這是常有的事。本文就將講解wordpress網(wǎng)站如何優(yōu)化圖片，包含了圖片的格式、文件大小、尺寸建議，還包含了photoshop自動(dòng)批處理、wordpress圖片優(yōu)化插件使用教程。

本文首發(fā)于：https://loyseo.com/how-to-optimize-images-in-wordpress/

什么是圖片優(yōu)化？

圖像優(yōu)化是盡可能少的降低圖片質(zhì)量，同時(shí)盡可能大的縮小圖片文件大小。見(jiàn)下圖，優(yōu)化前后的圖片幾乎看不出質(zhì)量上的區(qū)別，但圖片縮小了75%。







優(yōu)化圖片的好處？

  1. 更快的網(wǎng)站速度
  2. 提升SEO排名
  3. 銷(xiāo)售和潛在客戶(hù)的整體轉(zhuǎn)化率更高
  4. 更少的存儲(chǔ)空間和帶寬（可以減少托管和CDN成本）
  5. 更快的網(wǎng)站備份（也降低了備份存儲(chǔ)成本）
如何優(yōu)化圖片？

優(yōu)化圖片的關(guān)鍵三要素：

  1. 圖像文件格式：JPG，PNG和GIF
  2. 圖像尺寸：高度和寬度
  3. 壓縮率：較高的壓縮率=較小的文件
通過(guò)組合不同的格式、尺寸、壓縮比，甚至可以將圖像減重80％。

圖片格式

JPG：照片或具有豐富顏色的圖像請(qǐng)使用JPG，JPG是一種壓縮的文件格式，它會(huì)稍微降低圖像質(zhì)量，以便文件更小。

PNG：適合簡(jiǎn)單圖像或透明圖像，PNG圖像格式未壓縮，這意味著它是更高質(zhì)量的圖像，但缺點(diǎn)是文件更大。

GIF：僅適用于動(dòng)畫(huà)圖像，GIF使用256色以及無(wú)損壓縮，這使其成為動(dòng)畫(huà)圖像的最佳選擇

圖片尺寸與文件大小

針對(duì)外貿(mào)建站的常見(jiàn)用圖場(chǎng)景：

  1. Logo：寬度不超過(guò)300px，大小建議在50K以?xún)?nèi)
  2. 站點(diǎn)圖標(biāo)：大小控制在幾K



  1. Banner/slider：廣告圖或裝飾用的背景圖片，寬度一般建議在1200px，若banner希望做成全寬的，那么圖片用2560px寬度也是可以的，但要盡量不讓圖片太大，最大也盡量不要超過(guò)200K，以不影響清晰度為前提，越小越好。
  2. 產(chǎn)品圖片：寬度建議在600-1200px，大小建議控制在150K以下，有條件的話，盡量保證圖片的方向和尺寸的統(tǒng)一性，避免部分圖片是橫圖，部分又是豎圖。
  3. 其他圖片，如證書(shū)、團(tuán)隊(duì)成員等：寬度建議在1200px以?xún)?nèi)，大小建議控制在150K以下。
如何知道自己的圖片是否需要優(yōu)化？







譬如本站的外貿(mào)建站教程頁(yè)面，圖片多達(dá)200多張，在圖片經(jīng)過(guò)shortpixel優(yōu)化后，Optimize images評(píng)分達(dá)到99分。







圖片壓縮

圖像壓縮有不同的工具和壓縮效果，你可以使用免費(fèi)工具壓縮圖片，然后再上傳到網(wǎng)站中，譬如photoshop，或者是在線壓縮工具：http://shortpixel.com/、https://tinypng.com/，對(duì)于原圖很大的圖片，線上壓縮工具有最大文件限制，所以過(guò)大的圖片，譬如5M以上，建議先用photoshop或者paint.net進(jìn)行本地壓縮。

也可以采取簡(jiǎn)單省時(shí)省事的方法，譬如使用下面的wordpress插件在上傳圖片時(shí)自動(dòng)壓縮

下面，我們逐一介紹壓縮圖片的操作方法。

本地壓縮圖片

圖片數(shù)量多時(shí)，用photoshop的自動(dòng)批處理功能

  1. 打開(kāi)photshop，打開(kāi)一張圖片
  2. 在菜單欄中，點(diǎn)擊“窗口”，勾選“動(dòng)作”，點(diǎn)擊新建按鈕，命名動(dòng)作名稱(chēng)，確定后自動(dòng)開(kāi)始錄制






  1. 將圖像大小改為目標(biāo)尺寸，如1000px或1200px






  1. 將圖片存儲(chǔ)為web格式，調(diào)整質(zhì)量為90 jpg格式，存儲(chǔ)到非原圖的新文件夾內(nèi)。（PS：如果你的圖片需要保留透明效果，就要保持為png格式，通常png格式比jpg格式的圖片要大）






  1. 關(guān)閉圖片，并點(diǎn)擊不保存原圖修改，






  1. 至此，動(dòng)作錄制完成，點(diǎn)擊動(dòng)作錄制的結(jié)束按鈕






  1. 接下來(lái)進(jìn)行圖片的批量處理，









圖片數(shù)量少時(shí)，用免費(fèi)軟件paint.net單個(gè)處理，采用下面的步驟會(huì)覆蓋原圖，如需保留原圖，則請(qǐng)先復(fù)制一份原圖

  1. 用http://paint.net打開(kāi)圖片
  2. 點(diǎn)擊ctrl+r修改圖像尺寸后，回車(chē)鍵確認(rèn)
  3. 點(diǎn)擊ctrl+s保存圖片，設(shè)置質(zhì)量為90，回車(chē)鍵確認(rèn)
手動(dòng)線上壓縮圖片

以shortpixel在線壓縮圖片為例，下面講解壓縮圖片的操作步驟

  1. 打開(kāi)https://shortpixel.com/online-image-compression，一般選擇glossy壓縮，lossy是最大壓縮，圖可能會(huì)糊掉；Lossless是最小壓縮，圖片質(zhì)量損失越少。
  2. 將圖片拖拽到虛線框內(nèi)進(jìn)行壓縮
  3. 壓縮成功后逐一下載圖片，你也可以點(diǎn)擊預(yù)覽按鈕查看壓縮前后的效果對(duì)比






wordpress插件自動(dòng)壓縮圖片

以免費(fèi)的reSmush.it image optimizer插件為例，下面講解如何在線自動(dòng)壓縮圖片

1.確保安裝并啟用了插件reSmush.it image optimizer，按下圖所示配置后，此后每次上傳圖片都會(huì)自動(dòng)壓縮圖片







2.若需要優(yōu)化安裝插件之前的圖片，請(qǐng)?jiān)谏蠄D中點(diǎn)擊optimize all pictures，或者在下圖所示的媒體庫(kù)中，點(diǎn)選optimize按鈕手動(dòng)優(yōu)化。







禁止自動(dòng)生成圖片

對(duì)于付費(fèi)壓縮圖片的插件，需要注意的是：由于每張圖片在上傳時(shí)會(huì)被系統(tǒng)自動(dòng)生成多張不同尺寸的圖片，譬如wordpress和woocommerce都會(huì)這么做，那么如果壓縮這些自動(dòng)生成的圖片就會(huì)加快付費(fèi)額度的消耗，請(qǐng)?jiān)谟酶顿M(fèi)插件時(shí)，進(jìn)入插件的設(shè)置頁(yè)面，設(shè)置：將縮略圖不進(jìn)行壓縮，或有選擇的進(jìn)行壓縮，而我還會(huì)用短代碼直接阻止系統(tǒng)生成無(wú)用的圖片，不僅能節(jié)省空間，也能避免消耗壓縮額度，下面介紹如何用短代碼阻止系統(tǒng)生成的圖片。

需要知道的是，這些自動(dòng)生成的圖片并不能在wordpress的媒體庫(kù)看到，需要在服務(wù)器中查看，下圖是wordpress的媒體庫(kù)，只能看到原圖







下圖是siteground后臺(tái)查看圖片文件的方法，請(qǐng)?jiān)谶M(jìn)入網(wǎng)站的sitetools后按下圖所示順序操作查看，我們能看到系統(tǒng)為同一張圖生成了很多不同尺寸的圖片







在網(wǎng)站頁(yè)面設(shè)計(jì)完、內(nèi)容上傳前，我們先禁用所有自動(dòng)生成的圖片；若馬上可以上傳內(nèi)容了，我們可以根據(jù)設(shè)計(jì)情況，酌情放開(kāi)部分圖片尺寸，譬如在制作產(chǎn)品列表頁(yè)時(shí)，我們用到了300*300px的圖片，那么就在下面的代碼中，將對(duì)應(yīng)行的代碼前加//注釋掉或直接刪除該行。

  1. 安裝安裝插件Code snippets
  2. 進(jìn)入 Snippets > add new頁(yè)面
  3. 輸入標(biāo)題，例如：禁用所有縮略圖
  4. 輸入如下代碼
// disable generated image sizes

function shapeSpace_disable_image_sizes($sizes) {

unset($sizes['thumbnail']); // disable thumbnail size

unset($sizes['medium']); // disable medium size

unset($sizes['large']); // disable large size

unset($sizes['medium_large']); // disable medium-large size

unset($sizes['1536x1536']); // disable 2x medium-large size

unset($sizes['2048x2048']); // disable 2x large size

unset($sizes['shop_catalog']);

unset($sizes['shop_single']);

unset($sizes['shop_thumbnail']);

unset($sizes['woocommerce_thumbnail']);

unset($sizes['woocommerce_single']);

unset($sizes['woocommerce_gallery_thumbnail']);

return $sizes;

}

add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes');

// disable scaled image size

add_filter('big_image_size_threshold', '__return_false');

// disable other image sizes

function shapeSpace_disable_other_image_sizes() {

remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size()

remove_image_size('another-size'); // disable any other added image sizes

}

add_action('init', 'shapeSpace_disable_other_image_sizes');

  1. 選擇 Run snippet everywhere
  2. 點(diǎn)擊Save changes保存即可。


關(guān)鍵詞：圖片

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉