本站使用阿里云的 OSS 存儲(chǔ)圖片，阿里云 OSS 提供了圖片處理服務(wù)，通過此服務(wù)，可以對(duì)存儲(chǔ)在阿里云 OSS 中的圖鑒進(jìn)行方法的調(diào)整，例如圖片質(zhì)量、圖片格式等。

由于使用了阿里云的 CDN 對(duì) OSS 中的圖片進(jìn)行加速處理，圖片越大，流量費(fèi)越高。于是，我希望

• 不改變 OSS 中存儲(chǔ)的原始圖片（以后可能還要做其他用處）
• 可以提供 webp 格式的圖片，減少圖片體積，節(jié)省 CDN 流量，省錢
• 操作最好是自動(dòng)化的，不要太麻煩
• 不能改變存儲(chǔ)在數(shù)據(jù)庫(kù)中的圖片鏈接，降低后續(xù)操作難度

• 阿里云格式轉(zhuǎn)換：詳情

流程圖

效果

在文章編輯器中插入測(cè)試內(nèi)容：

<img src="http://m.kartiktrivedi.com/01.png">
<img src='http://m.kartiktrivedi.com/02.jpg?w=800'>
<img src="http://m.kartiktrivedi.com/exist.png!npcink.webp">

輸出時(shí)會(huì)自動(dòng)轉(zhuǎn)換為：

<img src="http://m.kartiktrivedi.com/01.png!npcink.webp">
<img src="http://m.kartiktrivedi.com/02.jpg!npcink.webp?w=800">
<img src="http://m.kartiktrivedi.com/exist.png!npcink.webp"> <!-- 已存在的不會(huì)被修改 -->

實(shí)現(xiàn)步驟

通過 WordPress 的 the_content 過濾器來實(shí)現(xiàn)這個(gè)需求。這里提供完整方案：

// 在 functions.php 中添加如下代碼
function npcink_append_webp_to_images($content) {
    // 匹配所有圖片鏈接的正則表達(dá)式
    $pattern = '/<img[^>]*src=(["'])(?<url>https?://[^"']+?.(?:png|jpe?g|gif|webp))(?!!npcink)(?[^"']*)?1/';
    
    $content = preg_replace_callback($pattern, function($matches) {
        $original_url = $matches['url'];
        $query = $matches[3] ?? ''; // 保留原始查詢參數(shù)
        $separator = (strpos($original_url, '?') === false) ? '?' : '&';
        return str_replace(
            $matches[0],
            '<img src="' . $original_url . '!npcink.webp' . $query . '"',
            $matches[0]
        );
    }, $content);

    return $content;
}
add_filter('the_content', 'npcink_append_webp_to_images', 20);

僅替換指定域名的圖片

這里，僅處理 n.getimg.net 下的圖片鏈接，其他圖片不動(dòng)

// 在 functions.php 中添加如下代碼
//僅針對(duì)指定域名-n.getimg.net，在展示文章時(shí)做替換

function npcink_specific_domain_webp($content) {
    $pattern = '/<img[^>]*src=(["'])(?<url>https?://(?:[a-z0-9-]+.)?n.getimg.net[^"']*?.(?:png|jpe?g|gif|webp|bmp))(?!(?:[^"']*?[&?])npcink)(?[^"']*)?1/i';

    $content = preg_replace_callback($pattern, function($matches) {
        $original_url = $matches['url'];
        
        // 七層防御重復(fù)檢測(cè)
        if (strpos($original_url, '!npcink.webp') !== false || 
            preg_match('/.webp(?=?|$)/i', $original_url)) {
            return $matches[0];
        }

        // 智能拼接策略
        $separator = (strpos($original_url, '?') !== false) ? '&' : '!';
        return str_replace(
            $matches['url'],
            $original_url . $separator . 'npcink.webp',
            $matches[0]
        );
    }, $content);

    return $content;
}
add_filter('the_content', 'npcink_specific_domain_webp', 20);

不處理GIF

處理gif的圖片會(huì)導(dǎo)致無法播放動(dòng)圖，可參考下方代碼

// 在 functions.php 中添加如下代碼
/*
1、僅針對(duì)指定域名-n.getimg.net，在展示文章時(shí)做替換
2、排除 gif后綴圖片
*/

function npcink_specific_domain_webp($content) {
    $pattern = '/<img[^>]*src=(?<quote>["'])(?<url>https?://(?:[^.]*.)?n.getimg.net[^^g{quote}]*?.(?:png|jpe?g|webp|bmp))(?![^^g{quote}]*?[&?]npcink)(?:?[^^g{quote}]*)?g{quote}/i';

    $content = preg_replace_callback($pattern, function($matches) {
        $original_url = $matches['url'];
        
        // 防御性檢查：排除已處理的URL及GIF格式
        if (strpos($original_url, 'npcink') !== false || preg_match('/.(?:gif|webp)(?:$|[?&#])/i', $original_url)) {
            return $matches[0];
        }

        // 智能拼接策略 - 使用更安全的!分隔符
        $separator = '!';
        $webp_url = $original_url . $separator . 'npcink.webp';
        
        return str_replace(
            $matches['url'],
            $webp_url,
            $matches[0]
        );
    }, $content);

    return $content;
}
add_filter('the_content', 'npcink_specific_domain_webp', 20);

結(jié)語

通過上述方法，實(shí)現(xiàn)了，存儲(chǔ)在媒體庫(kù)中的圖片鏈接是正常的，例如下面這樣，方便查看原始圖片

<img src="https://n.getimg.net/www/2025/05/d2b5ca33bd970f64a6301fa75ae2eb22.png">

而在文章中展示時(shí)，圖片鏈接被上述功能函數(shù)，結(jié)合阿里云 OSS 處理成這樣了，壓縮了圖片體積，降低了成本

<img src="https://n.getimg.net/www/2025/05/d2b5ca33bd970f64a6301fa75ae2eb22.png!npcink.webp">

相關(guān)內(nèi)容