如何改進和優化 WordPress 的圖像
已發表: 2018-02-28圖像太大而無法通過 Internet 加載已經有很長時間了。 今天,沒有它們,網站就無法存在。 儘管這些年來互聯網速度已顯著提高,但照顧好博客上的圖片至關重要。
僅僅因為將圖像上傳到您的網站很容易,這並不意味著您應該在沒有任何準備的情況下這樣做。 事實上,未經優化的圖片會在很多方面損害您的網站; 從影響訪問者對您的看法到您網站的速度和 SEO 排名。 如果您還沒有想到這一點,我們在這裡向您展示幾種改進 WordPress 圖像的方法。
如何為 WordPress 優化圖像,以便加快網站速度並改善 SEO
為什麼要為 WordPress 優化圖像? 如果您努力,您可以期待以下內容:
- 更快的網站
- 更好的搜索引擎優化
- 較小的備份
- 更少的帶寬使用
- 更快樂的用戶
您還應該知道可以優化圖像的不同階段。 您甚至可以在將圖片上傳到博客之前對其進行處理,也可以在上傳之後進行處理。
快速測試您網站上的圖片
在開始優化之前,您可以快速檢查站點的速度和性能。 通過使用列表中的任何工具,您將很快了解您網站上的圖像的形狀。
我們喜歡使用 GTmetrix,它甚至可以向您顯示導致您的網站加載速度較慢的確切圖像。
上傳前優化 WordPress 的圖像
在寫博客時,大多數人並沒有採取所有必要的步驟來優化他們的圖像。 通常,人們只會從他們的相機或智能手機中拍攝一張照片,從互聯網上下載一張照片或使用計算機軟件創建一張照片。
他們不考慮格式、圖像尺寸或文件名。 如果圖片看起來不錯,他們只是假設它已準備好用於 Internet。 如果你不檢查你的圖像,你正在走向災難。
調整圖像大小

在檢查每張圖片的寬度和高度之前,不要將圖片上傳到您的 WordPress 網站。 例如,如果您以最大 700 像素顯示圖像,則實際上沒有必要上傳更寬的圖片。 如果這樣做,您將擁有一個更大的文件,這會使您的站點變慢,而輸出將相同。 WordPress 會創建額外的尺寸,但這不是在上傳前不准備圖像的藉口。
調整圖像大小既快速又容易。 有許多免費工具(例如 Microsoft Paint)可以幫助您解決這個問題。 您甚至可以找到用於調整圖像大小的免費在線工具,例如 Easy Resize。
圖像尺寸因主題而異。 如果您不確定應該使用哪一個,請仔細查看您的 WordPress 主題並檢查圖片、搜索文檔或尋求支持幫助。
改變質量
更改尺寸後,您應該考慮更改圖像質量。 根據軟件的不同,修改圖片質量的方法也不同。 例如,一直流行的 Photoshop 允許您為 Web 保存圖像。 此選項將允許您以較低質量保存圖像,但它們將針對您的站點進行優化。
此外,如果您選擇將圖片另存為 JPEG,Photoshop 會要求您選擇質量級別。 在這種情況下,將質量從 12 降低到 8 將顯著減小圖像的大小,而質量差異不會那麼大。
如果您仍然不使用任何軟件來更改圖片的質量,您可以嘗試免費的在線 Tiny PNG 工具。 只需上傳一張圖片,看看它有什麼不同。
選擇正確的格式
即使在大小和質量發生變化之後,您也應該考慮更改格式。 對於初學者來說,只需選擇正確的格式,您就可以從圖像中減少幾千字節,甚至更多。

一般規則非常簡單。 如果您有照片,請將其設為 JPEG。 如果您有徽標、矢量圖像或非常簡單的計算機生成圖形,請使用 PNG。 如果您有一張沒有漸變的非常小的圖像,或者您想顯示如上所示的簡單動畫,則可以使用 GIF。 通常,PNG 圖像會比 JPEG 圖像大很多,您可以從更改格式中受益。
在許多情況下,重新格式化圖像不會產生顯著的質量差異,但您可以預期大小會有所不同。 下次上傳 PNG 照片之前,試一試並嘗試將其保存為 JPEG 以查看差異。 如需更詳細的解釋,請查看 PNG、JPEG、GIF 和 SVG 之間的區別。
注意文件名
雖然文件名可能聽起來不重要,但它實際上是您應該非常注意的。 您的圖像文件的名稱包含對 SEO 有價值的信息。 如果您希望其他人能夠在 Google 和其他搜索引擎上找到您的圖片,您應該給它一個合適的名稱。
我們建議您在不使用空格的情況下命名圖像。 如果您希望頁面和圖像排名,請不要忘記包含關鍵字。 例如,如果您要上傳法拉利加利福尼亞的圖片,則文件名應為“ferrari-california.jpg”。 如果您使用 WordPress 的 SEO 插件,您已經知道它會檢查您的 alt 標籤中的關鍵字。 是的,擁有一個正確的圖像名稱真的很重要。
上傳後為 WordPress 優化圖片
在計算機上準備好圖像後,您可以繼續上傳。 希望您的圖像大小和質量都合適。 您確保格式和文件名正確。 上傳後,WordPress 會要求您提供其他信息。 不要跳過元信息; 填寫有關您的圖像的詳細信息,以便您可以輕鬆地組織它們並為 SEO 做準備。
標題、描述、替代文字和標題
在處理技術問題的同時,您不應忘記 SEO。 始終為您的媒體添加標題和描述。 這將幫助您進行 WordPress 媒體管理,它還將有助於實現更好的 SEO。 另外,不要忘記為無法正確查看您的圖片的訪問者顯示的 alt 標籤。 這不僅對您的用戶有幫助,而且還可以幫助您進行 SEO。 您的頁面排名會更好,用戶將能夠更輕鬆地找到您的新圖片。
儘管您不會一直都需要字幕,但請確保為需要額外說明的圖像(例如屏幕截圖)添加字幕。
使用 WordPress 編輯圖像
如果您意識到圖片仍需要進一步編輯,您應該知道 WordPress 允許您即使在上傳文件後也可以這樣做。 更改您已上傳的旋轉、裁剪和縮放圖片。 您甚至可以僅編輯縮略圖或所有其他尺寸。 WordPress 的原生編輯器非常簡單,但它可以讓您不時保存。
重新生成所有縮略圖
大多數以前的技術將幫助您處理仍要上傳的新圖像文件。 但是,如果您已經將數百個甚至數千個文件上傳到您的 WordPress 網站,該怎麼辦? 別擔心; 您仍然可以優化這些圖像並更改它們的大小。
為了快速修復,您可能對一個免費的 Regenerate Thumbnails 插件感興趣,該插件已被超過 100 萬用戶使用。 如果您想更好地控製圖像,您應該查看一些用於圖像優化的最佳 WordPress 插件,我們將在本文的以下幾行中向您展示。

使用 WordPress 插件
當然,有許多 WordPress 插件可以幫助您優化網站上的圖片。 向下滾動以查看用於優化圖像的最佳 WordPress 插件。
必要時延遲加載圖像
有時,圖片的質量比它們的大小更重要。 對於希望他們的照片是一流的攝影師來說,這通常是正確的。 他們不能冒險減少文件的大小和質量。 儘管如此,這並不意味著您應該忘記優化。 在這種情況下,要為 WordPress 優化圖像,您應該考慮延遲加載。
延遲加載是一種僅在用戶需要時加載圖像的技術(滾動到它們)。 例如,如果您在一篇文章中上傳了 20 張高質量照片,它們會極大地降低您網站的速度。 但是,如果您延遲加載圖像,那麼文章會快如閃電,而照片只會在需要時加載——在用戶訪問它們的那一刻。
有響應式圖片
儘管大多數 WordPress 主題都是響應式的,但這並不一定意味著您的圖像也是響應式的。 由於您不希望在小屏幕上加載大圖像,因此您需要為您的站點註冊額外的圖像尺寸。 如果您的主題未使用響應式圖像,請考慮聘請專業人員來完成這項工作——這並不像聽起來那麼容易。
為社交媒體優化圖像
如果您想確保您的圖像在社交媒體上看起來不錯,則必須採取額外的步驟並優化元標記和架構標記。
如果您使用的是 Yoast 之類的 SEO 插件,請不要忘記檢查設置。 例如,Yoast 會讓你設置一些與社交媒體相關的東西。 因此,導航到 SEO -> Social 並在 Facebook、Twitter、Google+ 和 Pinterest 上輸入信息。
如果您想要更多,並且想要為其他社交媒體網站優化圖像,請查看 WPSSO – 用於社交共享優化和 SEO 插件的準確元標記 + 架構標記。
改變 WordPress 壓縮 JPEG 圖像的方式
如果您在 WordPress 網站上上傳一堆 JPEG 圖像,您可能已經註意到它們失去了原始質量。 如果您想知道 WordPress 是否應該受到指責,現在您將得到答案——是的,是的!
一旦您以 JPEG 格式上傳圖像, WordPress 會自動更改壓縮並決定您希望圖像質量下降。 更具體地說,WP 對您的 JPGE 使用 90% 的壓縮。 如果您的圖片僅用作帖子縮略圖或顯示在帖子中,那就太好了,但是如果您要上傳照片,您希望它們盡可能好,對嗎?
幸運的是,您只需要一行代碼即可更改此設置。
停止JPEG圖像壓縮:
如果您不想壓縮 JPEG 圖像,只需將以下代碼複製並粘貼到您的 functions.php 文件中:
add_filter('jpeg_quality', function($arg){return 100;});
不要忘記保存更改,然後您就可以上傳新圖像了。
另一方面,圖像對您來說可能沒什麼大不了的。 因此,您可能希望它們更加壓縮並節省加載站點的時間。 如果您更改該行代碼中的最後一個數字,您將更改新上傳圖像的質量。
進一步壓縮 JPEG 圖像:
數字越小,壓縮的圖像就越多。 例如,要進一步壓縮這些 JPEG,您將需要以下代碼:
add_filter('jpeg_quality', function($arg){return 80;});
不要忘記; 默認壓縮級別為 90。
重要提示:這只會影響您在functions.php 中粘貼代碼後上傳的圖像。 要更改庫中已有圖像的大小和質量,您需要一個插件。
最流行的 WordPress 圖像優化插件
在本文的開頭,我們討論瞭如何為 WordPress 優化圖像,以便您加快網站速度並提高 SEO。 正如您所看到的,您可以使用幾種不同的方法。 在將圖像上傳到您的博客之前處理好圖像很重要。 但是,當網站上已經有圖片時,可能無法單獨重新優化每張圖片,然後再次上傳它們。
別擔心; 沒有人一開始就希望你這樣做。 在接下來的幾分鐘內,我們將向您展示最流行的 WordPress 圖像優化插件。
要優化圖像,您只需從列表中選擇插件。 您必須配置它並選擇插件將為您做的事情。 之後,您將能夠放鬆並將工作委託給您選擇的插件,同時您可以開始組織您的媒體文件。
以下插件將幫助您壓縮您擁有的任何 WordPress 網站上的圖像。 它們將使網站加載速度更快,並最終幫助您改進 SEO。
WP Smush 插件
價格:免費
WP Smush 擁有超過 700,000 的活躍安裝,必須成為 WordPress 最好的圖像優化插件之一。 它可以通過使用不同的壓縮技術快速優化圖像。 使用 WP Smush 壓縮圖像的好處在於圖像不會降低質量。 不相信我們? 測試插件。
當我們談到為 WordPress 準備圖片時,我們提到調整大小是優化過程的關鍵部分。 使用此插件,您無需擔心,因為 WP Smush 可讓您設置最大尺寸。 這樣做之後,所有較大的圖像將在您將它們添加到庫之前自動縮小。
這個出色的插件可以處理 JPEG、GIF 和 PNG 文件。 它適用於您的所有目錄,自動處理附件,甚至適用於多站點。 您可以對每張圖像進行手動操作或批量編輯其中的 50 張。 如果您想要更好的結果和更多選擇,請查看 WP Smush PRO。
EWWW 圖像優化插件
價格:免費
在這個有趣的名字背後,是最流行的 WordPress 圖像優化插件之一。 就像前面提到的一樣,EWWW Image Optimizer 可以在不影響質量的情況下壓縮您的圖像。 當您想到該插件可以在幾秒鐘內加速您的網站時,您就已經開始下載它了。 一旦你這樣做了,你就可以批量優化圖像,像 GRAND FlaGallery、NextCellent 和 NextGEN 這樣的畫廊甚至會有自己的批量優化頁面。
在 WordPress 中使用 WP_Image_Editor 類的所有圖像都將自動優化,而您可以手動對所有其他圖像進行處理。 我們喜歡您可以選擇要優化的文件夾。 有關這方面的更多詳細信息以及哪些插件使用該類,請打開 WordPress 存儲庫上的官方 EWWW 圖像優化器頁面。
壓縮 JPEG 和 PNG 圖像插件
價格:免費

如果可愛的小熊貓拿著 WordPress 標誌不會讓您想了解更多關於這個插件的信息,我們不知道會是什麼。 如果熊貓看起來很眼熟,那是因為它與幫助您在 TinyPNG 網站上壓縮圖像的工具相同。 是的,這種動物似乎比我們原先想像的要多才多藝。 但讓我們專注於插件。
如果您使用此插件,Panda 將自動優化您的圖像。 每次你上傳一個新的插件時,插件都會接管並完成它的工作。 不過,您可以優化單個圖片或只需轉到媒體庫即可批量執行此操作。
壓縮 JPEG 和 PNG 圖像甚至支持動畫 PNG,在多站點上完美運行,它與 WooComerce 兼容,並且不會有 WP Offload S3 的問題。
該插件的優點在於它允許您為所有圖像設置最大寬度和高度屬性。 如果您一直擔心元數據會做什麼,請不要擔心; 熊貓將保持所有信息完整無缺。
沒有文件大小限制,您可以設置儀表板小部件,它甚至適用於 WordPress 移動應用程序。 因為所有這些,壓縮 JPEG 和 PNG 圖像有超過 100,000 次有效安裝,值得在 WordPress 的最佳圖像優化插件列表中佔有一席之地。
瘋狂插件
價格:免費

儘管此插件的封面圖片可能會嚇到您,但請花點時間看看 Imsanity 的所有功能。 哦,即使插件的名字聽起來很瘋狂,對吧? 一旦您對插件的名稱感到滿意,您就會發現它提供了很多功能。
Imsanity 可以自動縮放圖像,允許您設置最大尺寸,它甚至具有批量調整大小選項。 如果您的博客上已經有數百張需要優化的圖片,這一點很重要。
如果您不想為插件的設置而煩惱,這個免費插件是一個不錯的選擇。 只需要安裝和激活 Imsanity,設置幾個選項,你就可以忘記它了; 它將以自己的方式管理圖像優化。
我們喜歡允許您將 BMP 圖像轉換為 JPG 的選項。 以防萬一你有很多 BMP 文件是你前段時間錯誤上傳的,這將是一個救星。
ShortPixel 圖像優化器插件
價格:免費

ShortPixel Image 的活躍安裝量超過 30,000,仍然是 WordPress 最受歡迎的圖像優化插件之一。 該插件功能豐富,對於需要優化大量圖像的網站來說,它是必備的。
ShortPixel Image Optimizer 不僅可以為您優化 JPG、PNG、GIF 和 PDF 文檔,還可以讓您將任何 JPEG、PNG 或 GIF 圖像轉換為 WebP 。 該插件與其他圖庫插件配合良好,它並不關心您的站點是使用 HTTP 還是 HTTPS。 它將讓您從圖像中刪除 EXIF 數據(攝影師會喜歡的東西)。
該插件可識別已優化的圖像,因此會在需要時跳過它們。 您可以允許或禁止自動優化,並使用這個出色的插件做更多的事情。 查看存儲庫上的官方頁面以查看所有功能。
擎天柱 – WordPress 圖像優化器
價格:免費

就像前面提到的插件一樣,Optimus 將為 WordPress 優化您的圖像,並且不會影響您的圖片質量。 您可以讓插件自動解決問題,或者您可以關閉該選項並僅在需要時優化圖像。
Optimus 適用於多站點,對 WordPress 電子商務網站並不陌生,它針對 WordPress 移動應用程序和 Windows Live Writer 進行了全面優化。 它會加速您的網站,而您無需接觸任何代碼。 該插件提供了更多功能,但您必須選擇使用高級版本。 要查看更多信息,請訪問 WordPress 插件存儲庫的官方頁面。
在 WordPress 中為您的視頻和圖像添加延遲加載
一旦您開始在網站上添加大量視頻和圖像材料,很明顯它的加載速度會變慢。 無論來自何處,視頻和大圖像都會在您的網站上扮演重要角色,並使您的訪問者等待加載所有內容所需的時間更長。 使用 WordPress,這應該沒什麼大不了的,這是您可以輕鬆解決這種情況的方法。
如果您了解 PHP,有一篇關於為圖像添加延遲加載和我們的同事在優雅主題上編寫的無限滾動的精彩文章。
如果沒有,在接下來的幾行中,我們將提到一些最流行的延遲加載插件,它們將使您的網站加載速度更快。 而且您甚至不需要做太多事情,只需安裝一個插件並通過幾個快速步驟進行設置。
視頻的延遲加載
價格:免費

如果你有很多 Youtube 和 Vimeo 視頻,你應該考慮安裝這個插件。 設置完成後,該插件會在您的視頻上放置一個圖像,因此您的網站加載速度會更快。 訪問者滾動到視頻後,該圖像上將顯示一個“播放”按鈕。 單擊後,視頻將開始加載和播放。 可以在開發人員的站點上查看一個簡單的演示。
WP YouTube Lyte
價格:免費

該插件將以快速簡便的方式完成其工作。 安裝後,只需添加一個鏈接到您的 Youtube 視頻或使用短代碼添加一個。 您可以選擇添加普通視頻、播放列表或僅來自所選視頻的音頻。 之後,您的 Youtube 視頻將獲得一個圖像,這將啟用延遲加載。 只需單擊圖像即可開始播放視頻或音頻。
查看開發人員站點上的演示。
a3 延遲加載
價格:免費

這個專用於您的移動網站。 如果您想在移動設備上向訪問者顯示大量圖像和/或視頻,則應查看 a3 Lazy Load。 它將允許您為圖像和視頻添加延遲加載,該插件甚至可以讓您選擇過渡效果,當用戶滾動瀏覽正在加載的內容時會顯示這些效果。
在管理區域,您可以輕鬆打開和關閉您想要延遲加載的內容。 對於那些打開的內容,僅在訪問者滾動到該部分內容時才會加載內容。
有一個很好地展示的演示,其中包含 1000 個圖像——每個圖像只有在您滾動到它時才會加載。 由於此插件也延遲加載視頻,因此您可以單擊上面的鏈接查看視頻演示。
BJ 懶加載
價格:免費

如果您不需要對視頻的支持並且只希望您的圖像延遲加載,您應該查看這個 WP 插件。 安裝和設置後,它將用佔位符替換您的圖像、縮略圖、Gravatar 圖片甚至 iframe。 與前面提到的插件類似,它只會在用戶訪問時加載內容。
無論是您想要延遲加載的圖像還是視頻,上述插件之一將在幾秒鐘內為您提供幫助。 所有這些都是免費的,所以沒有理由不嘗試至少一個插件,看看你的肩膀需要多少重量。 當然,還有許多其他具有相同功能的插件,您可以隨意瀏覽和嘗試所有這些插件。
以吸引人的方式顯示前後圖像
我們相信您已經看過許多之前/之後圖像的例子。 不了解您,但是當我們看到“之前和之後”短語時,我們首先想到的是健身訓練計劃,人們在鍛煉計劃之前和之後展示他們的身體。
如果你仔細想想,大多數網站都使用一種簡單的方法來展示差異——他們拍攝兩張圖片並將它們一個挨一個放置,甚至一個放在另一個上面。 如果您想要相同的結果,您就不會閱讀本文,因為您已經知道如何做到這一點。
如果我們告訴您有一種視覺上令人驚嘆的方法來解決此問題之前/之後的問題,並且它就在您的手中,該怎麼辦? 好吧,在設置之後,您會稱讚開發人員,因為最終結果真的非常非常酷。

二十二十
價格:免費

二十二十是這個很棒的插件的名稱,您可以在 WordPress 插件庫中免費下載。
該插件可以讓您將一個圖像放在另一個圖像上,並讓您使用滑塊來隱藏/顯示圖像。 請看演示,你就會明白我們在說什麼。
好的,現在當您迷上了這個小插件時,讓我們看看如何創建這種驚人的效果。 儘管重新創建演示效果相對容易,但您仍然需要了解基本 HTML。 我們走吧:
- 創建新帖子或打開現有帖子
- 在帖子中插入兩張圖片。 如果您在可視化編輯器中工作,您應該會看到一張位於另一張上方的圖像。 如果您在文本編輯器中工作,您應該會看到類似於以下內容的代碼:
<a href="image1.jpg"><img src= "http://www.loactionoftheimage.com"width="700" 高度="200" /></a> <a href="image2.jpg"><img src= "http://www.loactionoftheimage.com"width="700" 高度="200" /></a>
- 在第一張圖片前輸入 [twentytwenty] 標籤
- 在第二個之後輸入 [/twentytwenty] 標籤
你應該在你的文本編輯器中得到這樣的結果:
[二十二]
<a href=”image1.jpg”><img src=”http://www.loactionoftheimage.com/image1.jpg” width=”700″ height=”200″ /></a>
<a href=”image2.jpg”><img src=”http://www.loactionoftheimage.com/image2.jpg” width=”700″ height=”200″ /></a>
[/二十二十]
- 確保您的圖片大小相同以達到最佳效果
- 預覽或發布您的帖子並享受您的前後照片視覺震撼
如何創建交互式圖像——繪製、添加描述和鏈接
今天,沒有多媒體就很難運行一個網站。 圖像、視頻和音樂幾乎是每個網站的一部分。 普通 Internet 用戶嚴重依賴視覺刺激,因此您必須注意網站的視覺和交互部分。 有圖片的文章比沒有圖片的文章獲得的瀏覽量高 94%。 此外,眾所周知,網站上的多媒體可以提高內容營銷的投資回報率。
我們希望沒有必要說服您處理您網站上的圖片。 即使您不在文章中使用圖片(您應該這樣做),您也會使用特色圖片,對嗎? 有很多圖庫插件可以幫助您管理 WordPress 網站上的圖像,您可以擁有與攝影相關的主題,將 Instagram 連接到您的 WordPress 網站,等等。 但是,如果您想創建更具交互性的內容怎麼辦?
首先,您可能有興趣添加用戶會喜歡的前後圖像效果。 不要忘記 WordPress 中的虛擬現實,它在 Automattic 將 VR 引入 WordPress.com 後變得越來越流行。 儘管如此,還是少了點什麼。 是否可以製作帶有可點擊部分的交互式圖像? 是的,這是可能的,我們將向您展示這是多麼有趣和容易。
吸引註意
價格:免費
你會喜歡這個插件的第一件事是它是完全免費的! 就像使用 WordPress 存儲庫中的任何其他插件一樣,您可以在幾分鐘內下載、安裝和激活它。 免費版本將允許您使用一張交互式圖像。 如果您想要更多,則必須選擇加入 PRO 版本,但我們稍後會討論。
該插件是響應式的,您不必擔心在任何設備上正確顯示交互式圖像。 不僅圖像會根據屏幕尺寸縮放,而且它可以在大多數現代和舊瀏覽器(桌面和移動)中使用。 Draw Attention 在新瀏覽器中顯示時使用畫布元素,而如果您在舊瀏覽器中加載它,它將回退到圖像地圖。
特徵
在開始展示這個簡單插件有多強大的示例之前,讓我們看看 Draw Attention 會發生什麼:
- 繪圖- 上傳圖像後,您將有機會在其上繪製形狀。 選擇圖像中將變為可選/可點擊的任何部分
- 顏色– 自定義顏色,使熱點適合您的網站設計
- 懸停時突出顯示- 如果用戶將鼠標懸停在所選部分上,則顯示圖像的另一部分
- 顯示更多信息- 顯示有關圖像所選部分的更多信息
- 轉到 URL - 如果用戶單擊選擇,則將用戶重定向到任何 URL

示例 – 夏威夷交互式地圖
我們將使用演示站點中的示例向您展示使用 Draw Attention 可以做什麼。 那麼,讓我們看看使用插件創建的夏威夷交互式地圖是什麼樣的。
您必須做的第一件事是找到夏威夷群島的圖像。 導航到Draw Attention -> Edit Image 後,您應該將圖片上傳到右側欄上的區域。 一旦圖像加載,樂趣就可以開始了。
在這裡,您可以選擇突出顯示的顏色(顏色、邊框、不透明度等),設置“更多信息框”的樣式(圖像、標題、文本顏色等)。 如果您不想手動為圖像選擇每一種顏色,您可以從右側邊欄中快速選擇一種配色方案。

最神奇的部分發生在熱點區域設置屏幕中。 在這裡,您會將圖像加載到全尺寸。 您現在要做的就是開始繪圖並創建一個新的熱點。 您可以根據需要添加任意數量的點,這意味著您可以根據需要創建全面的選擇。 您可以創建盡可能多的熱點,每個熱點都可以有自己的設置。
因此,在本例中,您應該選擇其中一個島。 為島嶼選擇一個標題,添加描述和額外的圖像,一旦用戶懸停在熱點上就會顯示(上面顯示的 GIF 圖像的右側部分)。
您應該為要交互的每個島嶼重複該過程。 準備好熱點後,只需從右側複製短代碼即可。 將短代碼粘貼到帖子、頁面、小部件或任何您想顯示新交互式地圖的地方,就大功告成了! 如果您想在用戶單擊選項後將其重定向到任何其他頁面,您只需選擇 URL 而不是描述。 就這麼簡單!
專業版
如果您只需要一張圖片,免費版本將是完美的,但專業版將允許您在您的網站上擁有任意數量的交互式圖片。 儘管這將是最重要的考慮因素,但 PRO 版本將為您提供比多張圖像更多的內容。
佈局選項功能可讓您顯示有關圖片選定部分的更多信息。 例如,您將可以在燈箱或簡單的工具欄中顯示信息,當用戶將鼠標懸停在圖像的選定部分後會彈出。
還有 20 個預定義的調色板,因此您不必手動自定義每種顏色。 PRO 版本的單站點許可證費用為 74 美元,但如果您需要多個交互式圖像,這將是輕而易舉的事。
如何重新生成額外的圖像尺寸
在 WordPress 主題中註冊新的圖像大小相對容易。 在你告訴你的系統你的圖像應該有多大,命名它們並決定如何裁剪它們之後,你可以自由地將圖像分發到任何你想要的地方。 但是舊圖像呢?
如果您使用了我們向您展示的技術之一,那麼您已經為新圖像做好了準備。 無論您是為帖子縮略圖使用新註冊的圖像大小還是允許作者在帖子中使用它們,新規則僅適用於您在 functions.php 文件中進行更改後上傳的那些圖像。 要更改舊圖像,我們建議使用 Regenerate Thumbnails 插件。
重新生成縮略圖:
價格:免費
- 轉到插件 - >添加新
- 搜索“重新生成縮略圖”
- 安裝並激活插件
- 導航到工具-> Regen.Thumbnails
如果您想調整所有圖像的大小,只需單擊“重新生成所有縮略圖”按鈕並等待插件完成繁重的工作。

如果您想查看將要調整大小的圖像,或者如果您只想調整某些圖像的大小,請轉到您的媒體庫,您將在“批量操作”下找到一個新選項,並在“批量操作”下的每張圖片旁邊找到一個選項。畫廊。
該插件的好處是它不會刪除您的原始圖像。 它只會創建您可以在主題中使用的新圖像尺寸,而原始圖像尺寸將留給您稍後使用,或者如果您決定不需要它們,則手動刪除它們。
就是這樣。 享受您的新縮略圖或查看可以做同樣事情的 Simple Image Sizes 插件。
使用 jQuery 刪除寬度和高度圖像屬性
將圖片添加到 WordPress 帖子時,系統會自動將其高度和寬度屬性添加到圖片中。 That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.
If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.
But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.
Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.
Remove width and height image attributes:
- Open header.php file from your theme folder
- Copy and paste this code anywhere between <head> and </head> tags:
<script src="http://code.jquery.com/jquery-latest.js"> </腳本> <腳本> jQuery.noConflict(); jQuery(document).ready(function($){ $('img').each(function(){ $(this).removeAttr('width') $(this).removeAttr('height'); }); }); </腳本>
- 保存更改
你完成了! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.
How to create custom image sizes in Media Uploader
If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.
There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.
Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.
Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.
- 打開你的functions.php文件
- Copy and paste this piece of code:
function custom_image_sizes() { add_image_size( 'one-size', 333, 333, true ); add_image_size( 'another-size', 666, 666, true ); } add_action( 'init', 'custom_image_sizes' ); function show_image_sizes($sizes) { $sizes['one-size'] = __( 'Custom Size 1', 'isitwp' ); $sizes['another-size'] = __( 'Custom Size 2', ' isitwp' ); return $sizes; } add_filter('image_size_names_choose', 'show_image_sizes');
- 保存更改
- Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”
Create automatic screenshot of any website and publish it as image in your post
If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.
If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.
In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.
Create automatic screenshot:
- 打開functions.php
- 複製並粘貼以下代碼:
function wp_webscreen($atts, $content = NULL) { extract(shortcode_atts(array( "snap" => 'http://s.wordpress.com/mshots/v1/', "url" => 'http://www.firstsiteguide.com', "alt" => 'wploop', "w" => '600', // width "h" => '450' // height ), $atts)); $img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />'; return $img; } add_shortcode("screen", "wp_webscreen");
- Change default variables in the array
- 保存更改
This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:
[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]
What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.
Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.
例子:
Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:
[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]
You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.
結論
You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.