Mark Ku's Blog
首頁 關於我
透過 PowerShell 製作 JPG/ PNG 轉 webp 小工具 (使用 Google webp converter lib)
PowerShell
透過 PowerShell 製作 JPG/ PNG 轉 webp 小工具 (使用 Google webp converter lib)
Mark Ku
Mark Ku
August 06, 2021
1 min

Webp 起緣

WebP圖像格式 起緣,由Google開發,它的主要優點是:使您獲得出色的清晰度而又不會增加網路傳輸的負擔。 這對於頁面加載速度至關重要。

為何要用 Webp

大多數網站,圖片佔網路加載的 60% 以上,然而 webp 格式的的出現,可以將 JPEG 圖像尺寸減小35%,將PNG圖像尺寸減小50%,並保留了其畫質和透明度,採用 webp 圖片格式,以減少網路的傳輸,提高使用者的體驗。

檔案大小比較

webp converter 預設是 80% 的壓縮格,這邊做了 無失真 100% 和壓縮格式 80% 的檔案大小的對比

  1. JPG 轉換 WEBP - 在無失真的 Webp 檔案轉換上,檔案大小不減反增,增加了約一倍以上的大小,但採用 Webp 預設80%的壓縮,檔案大小少了約 40%。
  2. PNG 轉換 WEBP - 在無失真的 Webp 檔案轉換上,檔案少了約一半以上,但採用 Webp 預設80%的壓縮,檔案大小少了約 86%。
  • 但有有趣的現象
  • Webp 預設 80 % 的壓縮格式,確實 JPG / PNG 將圖片大小減少,但 Webp 的 100% 無失真格式,反而讓 JPG 檔案增加了一倍大小

瀏覽器支援度

Webp 在前幾年支援度還沒這麼好,現在支援度很普及了,但需要特別留意 iOS 14 後才支援 web p, 這邊就必須額外處理。

  • no support webp 的解決方案

Google 下載 Webp tool

https://developers.google.com/speed/webp/download

撰寫 power shell (Convert-WebP.ps1)

$libPath = $PSScriptRoot + "\libwebp-1.2.0-windows-x64\bin\cwebp.exe"
$defaultFoldPath = (Get-Item .)
$outputFolder = 'output'
Function Get-Folder([String] $initialDirectory)
{
    [System.Reflection.Assembly]::LoadWithPartialName("System.windows.forms")|Out-Null

    $foldername = New-Object System.Windows.Forms.FolderBrowserDialog
    $foldername.Description = "Select a folder"
    $foldername.rootfolder = "MyComputer"
    $foldername.SelectedPath = $initialDirectory
    $foldername.ShowNewFolderButton = $false
    
    if($foldername.ShowDialog() -eq "OK")
    {       
        $folder += $foldername.SelectedPath 
    }else{
        exit        
    }
    return $folder
}


Function Conver-Webp([String] $source, [String] $output)
{   
   Write-Host ('$input path:' + $source)
   Write-Host ('$output path:' + $output)

   if (!(Test-Path -Path $output )) {
   New-Item -ItemType directory -Path $output
   Write-Host 'create new folder' + $output
   }

   $files = get-childitem $source -recurse -force -include *.jpg, *.png  
   Write-Host $files
   foreach($inputFile in $files){      
    
   #Call cwebp  
   $inputFilePath = $inputFile.FullName  
   $outputFilePath = Split-Path -Path $inputFile.FullName  
   
   $outputFilePath = $output + "\" + [System.IO.Path]::GetFileNameWithoutExtension($inputFilePath) + ".webp"  
    
   # 使用 80% 品質等級去轉換單張圖片:

   Write-Host $outputFilePath  
   $args = "-q 80 " + $inputFilePath + " -o " + $outputFilePath  
  
   Start-Process -FilePath $libPath -ArgumentList $args -Wait  
  
   $originalFileSize = (Get-Item $inputFilePath).length  
   $optimizedFileSize = (Get-Item $outputFilePath).length    
     
   $savedBytes = $originalFileSize - $optimizedFileSize  
   $savedPercentage = [math]::Round(100-($optimizedFileSize / $originalFileSize)*100)  
   $message = $inputFilePath + " " + $outputFilePath + " " + $savedBytes + "bytes " + $savedPercentage + "%"  
   
   Write-Host $message   
   } 
}


$sourceFolderPath = Get-Folder($defaultFoldPath) 
$outputFolderPath =($sourceFolderPath+ '\' + $outputFolder)

Conver-Webp $sourceFolderPath $outputFolderPath 
      
PAUSE

將下載的 Webp Lib 放在 PowerShell 同目錄,對 Convert-WebP.ps1 > 右鍵 > 用 powershell 執行

選取來源資料夾

執行畫面

腳本執行完後,會將所有 jpg / png 的檔案 輸出到 output 目錄下。


Tags

Mark Ku

Mark Ku

Software Developer

8年以上豐富網站開發經驗,直播系統、POS系統、電子商務、平台網站、SEO、金流串接、DevOps、Infra 出身,帶過幾次團隊,目前專注於北美及德國市場電商網站開發團隊。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

Reduce the risk of manual deployment using powershell and beyondcompare
Reduce the risk of manual deployment using powershell and beyondcompare
June 27, 2023
1 min

Quick Links

關於我

Social Media