無論您是擁有網(wǎng)站，在線商店還是希望看起來令人驚嘆的常規(guī)網(wǎng)站，都需要花一些時間來優(yōu)化您上傳的每張圖片。
當(dāng)我們談?wù)撊绾螢榫W(wǎng)絡(luò)“優(yōu)化”圖像時，您可以通過三種方式考慮這一點：1.使它們看起來很好 2.使它們快速加載 3.使搜索引擎易于索引。
大多數(shù)帖子只是涉及一個方面或另一個方面，但在這篇文章中我會全部介紹它們。更好的是，您可以使用免費，易用的工具優(yōu)化圖像 - 無需Photoshop。（在這篇文章中，我將主要演示Pixlr的免費網(wǎng)頁版本，這是一個很好的基本照片編輯工具。如果你對其他工具感興趣，請查看我們的文章如何在沒有Photoshop的情況下編輯照片）。

1.從高質(zhì)量圖像開始
儲蓄攝影：您不必是專業(yè)攝影師在您的網(wǎng)站上使用偉大的照片。每天似乎有更多高質(zhì)量的照片網(wǎng)站，你可以在那里下載商業(yè)用途的免費照片。
當(dāng)您從其中一個網(wǎng)站下載圖像時，它可能是一個非常大的JPEG文件。要為您的網(wǎng)站優(yōu)化它，您需要縮小尺寸并上傳較小的版本（以下更多內(nèi)容）。不過那沒關(guān)系。從大照片開始是理想的，因為您總是可以將較大的圖像縮小。
拍攝你自己的（更好的）照片：當(dāng)然，你不能使用照片作為一切（比如團(tuán)隊或產(chǎn)品的照片）。如果你需要拍攝自己產(chǎn)品的照片，有一些簡單的技巧可以讓你的照片看起來更加明亮，更專業(yè)，即使沒有花哨的相機(jī)設(shè)備。
圖形：如果您正在尋找更基于圖形的東西，那么您可以使用大量新的免費在線工具來構(gòu)建自己的圖表或帶有字體疊加的照片。
2.使用正確的文件類型：JPEG或PNG
對于圖像，您最有可能遇到JPEG（或JPG）或PNG。各有利弊，但在大多數(shù)情況下，您可以記住以下內(nèi)容：
照片應(yīng)保存并以JPEG格式上傳。此文件類型可以以相對較小的高效文件大小處理照片中的所有顏色。通過使用JPEG，如果您將照片保存為PNG，則會得到比較大的文件。
圖形，特別是那些使用大而平坦的顏色區(qū)域的圖形，應(yīng)保存為PNG。這包括大多數(shù)設(shè)計，信息圖表，包含大量文本的圖像以及LOGO。PNG的質(zhì)量高于JPEG，但通常也會帶有更大的文件大小。PNG處理顏色和文字區(qū)域，線條清晰，因此您可以放大而不會丟失任何質(zhì)量。它們還支持透明背景（如果您使用LOGO，則需要它）。如果您有選擇，我們建議將PNG保存為“24位”而不是“8位”，因為它們具有更好的質(zhì)量和更豐富的支持顏色。
如果您使用帶有文字的照片怎么辦？如果圖像的大部分是照片區(qū)域，則可以使用JPEG。
大多數(shù)照片程序允許您選擇JPG或PNG，方法是轉(zhuǎn)到“另存為”，“導(dǎo)出”或“保存為WEB格式”并選擇您喜歡的類型。
您可以將PNG轉(zhuǎn)換為JPEG，但不會通過將JPEG轉(zhuǎn)換為PNG來優(yōu)化任何質(zhì)量。例如，如果您只將自己的LOGO作為JPG，則需要直接與設(shè)計人員聯(lián)系，并從原始設(shè)計程序中請求PNG，而不是嘗試從JPEG中對PNG進(jìn)行逆向工程。
3.調(diào)整圖像大小以優(yōu)化頁面速度和外觀
使用Web圖像，您希望在大小和分辨率之間找到適當(dāng)?shù)钠胶?。分辨率越高，文件大小越大?在印刷領(lǐng)域，高分辨率圖像是一件好事。但在網(wǎng)絡(luò)上，巨大的圖片可能會降低網(wǎng)站的網(wǎng)頁速度。這會損害用戶的體驗，最終會損害您的搜索引擎排名。對于移動訪問者來說，大圖像和緩慢的加載時間尤其令人討厭 ?。
有時您會想要在您的網(wǎng)站上使用大型照片，例如您的背景或人物形象。如果你使用低質(zhì)量的圖像并嘗試將其吹得足夠大，它看起來會很模糊。

那么如何在尺寸和質(zhì)量之間取得適當(dāng)?shù)钠胶猓渴紫?，重要的是要理解，在圖像方面，“大小”是一個相對術(shù)語。打印所需的內(nèi)容通常遠(yuǎn)遠(yuǎn)大于網(wǎng)站所需的內(nèi)容。跟蹤什么可能有點困難，所以這里是構(gòu)成“大小”的三個主要方面的概述：
文件大?。何募谟嬎銠C(jī)上占用的字節(jié)數(shù)。這可能會減慢您網(wǎng)站的速度。一張15MB（兆字節(jié)）的照片非常龐大。一張125KB（千字節(jié)）的照片更加合理。如果您的文件大小非常大，則表明圖像尺寸太大或分辨率太高。
圖像大?。簣D像的實際尺寸（以像素為單位）。您可能認(rèn)為傳統(tǒng)的打印照片為4×6,5×7或8×10。但在網(wǎng)絡(luò)上，高度和寬度以像素為單位進(jìn)行測量。例如，網(wǎng)站上的典型圖像可能是795×300像素。
分辨率：從打印世界遺留下來，分辨率是圖像的質(zhì)量或密度，以每英寸點數(shù)（dpi）為單位。專業(yè)打印機(jī)可能要求圖像至少為300dpi。但大多數(shù)計算機(jī)顯示器顯示72dpi或92dpi，因此高于此值的任何東西都會過度殺傷并使您的圖像不必要地變大。當(dāng)設(shè)計程序具有“為Web保存”選項時，這意味著將其保存在網(wǎng)絡(luò)友好的低分辨率下。
如何找到圖像的文件大小，圖像大小和分辨率？
您可以在計算機(jī)上找到文件大小和圖像大小。如果您在PC上，右鍵單擊圖像文件，選擇“屬性”，然后選擇“摘要”選項卡。在Mac上，按住Ctrl并單擊圖像文件，然后選擇“獲取信息”。
查找分辨率需要更高級的照片程序，如Photoshop，但大多數(shù)基本圖像編輯程序?qū)⒆詣右暂^低的，網(wǎng)絡(luò)友好的dpi保存圖像。
備忘單用于圖像大小，文件大小和分辨率
既然您已經(jīng)了解了描述圖像大小的不同方法，請記住以下幾條經(jīng)驗法則：
大圖像或全屏背景圖像不應(yīng)超過1MB。
大多數(shù)其他小型網(wǎng)頁圖形可以是300KB或更少。
如果您使用的是全屏背景，我們將建議您上傳寬度為2000像素的圖像。
如果您有此選項，請始終“保存為網(wǎng)絡(luò)”，這將為您的圖像提供網(wǎng)絡(luò)友好的解決方案。
您可以將較大的圖像縮小，但要使較小的圖像變大則非常困難。“如果你有一個100×100像素的圖像，你想將它變成一個令人驚嘆的2560×1440 網(wǎng)頁橫幅，那么生成的圖像將變得無法直視。“
如果您的圖片對您的網(wǎng)站來說太大，您會怎么做？
如果你有一個漂亮的數(shù)碼相機(jī)，你可能會拍攝比你的網(wǎng)站需要大幾兆字節(jié)的照片。來自高質(zhì)量網(wǎng)站的圖片也往往帶有大文件大小。如果您的圖像超過1MB，您可以執(zhí)行以下操作：
調(diào)整圖像大小。如果您的照片寬度為5000像素，則可以輕松將其調(diào)整為2000像素寬，1200像素寬，甚至更小，具體取決于您計劃在網(wǎng)站上使用它的方式。這將顯著減少文件大小。調(diào)整大小時，請確保保持比例相同，這樣就不會扭曲圖像。
降低分辨率。照片程序會自動將您的圖像分辨率降低到“網(wǎng)絡(luò)友好”的大?。ǚ謩e為72dpi和92dpi）。您也可以使用Photoshop中執(zhí)行此操作。您還可以在許多照片程序中“另存為”，然后從那里調(diào)整質(zhì)量級別。
4.使圖像具有相同的大小和樣式
如果使用一致的樣式和大小/比例，網(wǎng)頁上的圖像看起來會更好。在頁面上排列文本和其他信息時，一致性也會有所幫助。
好的，既然您的照片已調(diào)整大小并且看起來很棒，那么如何針對搜索引擎優(yōu)化它們呢？
5.正確命名圖像文件以幫助您的SEO
大多數(shù)人對他們的文件名不太了解。他們可能會將照片稱為“Photo1.jpg”或“Screen Shot 2017-06-02 at 3.41.15 PM”。如果這聽起來很熟悉，請花點時間重命名圖像，然后再將其上傳到您的網(wǎng)站。為什么？因為這樣做會給你的SEO帶來提升。
這樣想吧。當(dāng)搜索引擎掃描您的網(wǎng)站時，它可以讀取您的文字，但無法查看圖片中的內(nèi)容。文件名提供有關(guān)圖像中的內(nèi)容的信息，以便搜索引擎可以正確解釋它。
文件名也成為圖片網(wǎng)址的一部分，因此用簡單的英文命名文件會使您的網(wǎng)址更容易導(dǎo)航和解釋。將圖像上傳到您的網(wǎng)站后，其文件名是公開的。因此，不要將它們命名為任何令人尷尬或秘密的東西。
為了保持一致性，請使用小寫字母和數(shù)字0-9。不要引入標(biāo)點符號或空格。并且最好使用連字符而不是下劃線。
6.填寫您的標(biāo)題和替代文字
一旦人們將圖像上傳到照片元素，他們經(jīng)常忘記填寫其他信息。但就像文件名一樣，這個信息為您提供了一些額外的SEO果汁。
普通訪問者不會看到Alt標(biāo)簽（或替代文字），但它們可以讓搜索引擎了解每個圖像的基本概念。因此，一旦您將圖像添加到您的網(wǎng)站，請務(wù)必使用描述照片所顯示內(nèi)容的短語填寫“替代文字”字段，最好使用有針對性的關(guān)鍵字。（替代文本還可以幫助視障用戶使用基于音頻的軟件瀏覽您的網(wǎng)站，因此這是一種改善網(wǎng)站可訪問性的好方法。）以下是編寫好的alt標(biāo)簽的一些提示。
文件名和alt標(biāo)簽對于產(chǎn)品頁面的SEO尤為重要。如果它有意義，還要為圖像添加標(biāo)題，因為人們傾向于閱讀照片標(biāo)題而不是其他任何內(nèi)容。
注意：填寫alt標(biāo)簽，名稱和標(biāo)題對SEO有好處，但不要嘗試關(guān)鍵字的東西。您只想用簡單的英語準(zhǔn)確描述圖像 - 添加不相關(guān)或重復(fù)的關(guān)鍵字會讓您受到搜索引擎神的懲罰。
7.將圖像放在相關(guān)文本附近
選擇與文本所說內(nèi)容相關(guān)的圖像，而不是完全偏離的圖像。被相關(guān)信息（具有相關(guān)關(guān)鍵字）包圍的圖像將更好地排名。
此提示還可以幫助您避免庫存照片陳詞濫調(diào)。如果您的網(wǎng)站是關(guān)于教育的，那么您不會因為拍攝蘋果照片而獲得任何搜索引擎優(yōu)化效果。但是，教師，學(xué)生和教室的照片對讀者來說會更有趣，而且與您的主題更相關(guān)。
摘要：優(yōu)化網(wǎng)站圖像以獲得質(zhì)量和SEO
讓我們來看看網(wǎng)站上的一些例子。我在一個網(wǎng)站上找到了一張咖啡杯的照片。當(dāng)我下載它時，名稱是“fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg”，它是2509 x 1673像素。它的大小是586KB。并不是很糟糕，但仍然比我在網(wǎng)頁上顯示一張小照片所需要的要大得多。因此，要優(yōu)化此圖像，我會執(zhí)行以下操作：
將圖像重命名為更有意義的內(nèi)容。也許像make-believe-coffee-cappuccino.jpg名稱會更適合，或者其他。
使用像Photoshop這樣的工具來調(diào)整大小并將其裁剪到我想要的大小。在這個例子中，我選擇了1000×760。如果你想要一個正方形，你可以做1000×1000。
確保它是正確的文件大小。一旦我將它裁剪到我想要的尺寸并保存行啊來，那么文件大小就是完美的！
使用照片元素將其上傳到網(wǎng)站，不要忘記填寫Alt Text！我還添加了一個很好的標(biāo)題。
雖然這個清單可能看起來很多，特別是如果你上傳了很多圖像，一旦你習(xí)慣了這個過程，你會變得越來越快。（您可以將此頁面加入書簽，以便您可以參考它）。
此外，通過這些步驟將使您的圖像看起來更好，幫助您的網(wǎng)站加載更快，并最終有利于您的SEO。立即進(jìn)入正確的習(xí)慣，您將獲得整個網(wǎng)站的好處。