內容簡介
Squidge 是一款免費的 WordPress 外掛，專為開發人員打造，使用 jpegoptim、optipng、cwebp 和 libavif 壓縮和轉換圖片。它非常簡單易用，旨在增加 PSI，並提高排名。
為什麼要使用 Squidge？
在 WordPress 中進行圖片壓縮可能會耗費時間，讓人困惑，有時甚至不能正常運作。我們旨在通過要求開發人員在操作系統上安裝所需的套件，並讓 Squidge 為您進行繁重的工作，簡化這個過程。
免費使用
無限制的檔案大小
優化您的網站以提高排名
CLI 重新生成所有媒體檔案
輔助函數，可在範本中輸出圖片
使用原生的 cwebp 和 libavif 函式庫
Squidge 可以做什麼?
當使用者上傳檔案到 WordPress 時，Squidge 可以將圖片檔案壓縮並轉換。
使用 jpegoptim 壓縮 JPG 圖像
使用 optipng 壓縮 PNG 圖像
使用 cwebp 將 JPG 和 PNG 圖像轉換為 .webp 格式，並添加後綴，例如：image.jpg.webp
使用 libavif 將 JPG 和 PNG 圖像轉換為 .avif 格式，並添加後綴，例如：image.jpg.avif
圖片呈現
要在範本中呈現圖片，您可以設置 nginx 或 apache 規則以動態顯示圖片，或使用 squidge_image 輔助函數。這將動態檢查檔案系統中是否存在 .avif 或 .webp 檔案，並返回輸出。
輔助函數
/**
* Returns a <picture> element with source media for the standard file passed
* (such as a JPG), the .avif file, the .webp file (if to exist on the file system).
*
* Appropriate <source> elements for image sizes with max widths.
* Finally, the main be outputted with alt and title text.
*
* - If lazy is true, the data-src or data-srcset will be appended.
* - If a class is set, the class will be outputted on the <picture> element.
*
* @param $image_id
* @param string $class
* @param false $lazy
* @return string
*/
function squidge_image($image_id, $class = '', $lazy = false)
輸出範例
<picture class="picture">
<!-- 在支持 AVIF 且視窗寬度小於 400px 時加載 -->
<source media="(max-width: 400px)" srcset="/sample-image.jpg.avif" type="image/avif">
<source media="(max-width: 400px)" srcset="/sample-image.jpg.webp" type="image/webp">
<source media="(max-width: 400px)" srcset="/sample-image.jpg">
<!-- AVIF 和 Webp 初始大小 -->
<source srcset="/sample-image.jpg.avif" type="image/avif">
<source srcset="/sample-image.jpg.webp" type="image/webp">
<!-- 預設 -->
<img src="/sample-image.jpg" alt="Alt text" title="Sample JPG">
</picture>
鳴謝
作者：Ainsley Clark
外掛標籤
開發者團隊
原文外掛簡介
Squidge is a FREE WordpPress Plugin built for developers in mind compressing and convert images using jpegoptim,
optipng, cwebp, and libavif. It’s extremley simple to use and is designed to increase PSI and boost rankings.
Why?
Image compression in WordPress can be costly, confusing and sometimes just simply don’t work. We have aimed to simplify
the process by requiring the developer to install the required package on the operating system and Squidge does the
hard work for you.
IT’S FREE
Unlimited file size, no limits.
Optimised for your site to rank.
CLI to regenerate all of your media files.
Helper functions to output images in templates.
Uses the native cwebp and libavif libraries.
What does Squidge do?
Squidge compresses and converts image files when the user has uploaded a file to WordPress.
Compresses JPG images using jpegoptim.
Compresses PNG images using optipng.
Converts JPG and PNG images to .webp files using cwebp with the appended extension e.g. image.jpg.webp.
Converts JPG and PNG images to .avif files using libavif with the appended extension e.g. image.jpg.avif.
Render Images
To render images in templates, you can either set up nginx or apache rules to serve images dynamically or used the
squidge_image helper function. This dynamically checks if an .avif or .webp file is available on the file system
and returns the output.
Function
/**
* Returns a
* (such as a JPG), the .avif file, the .webp file (if to exist on the file system).
*
* Appropriate
* Finally, the main be outputted with alt and title text.
*
* - If lazy is true, the data-src or data-srcset will be appended.
* - If a class is set, the class will be outputted on the
*
* @param $image_id
* @param string $class
* @param false $lazy
* @return string
*/
function squidge_image($image_id, $class = '', $lazy = false)
Output
Credits
Written by Ainsley Clark
