🚄30%容量軽量化？令和Web高速化の要、「WebP」ファイルについて（かんたん変換ツール配布中♪）

2023年12月27日 16:07

ネット黎明期から早30年…今では個人宅でもギガベースの光通信も普及しています。
一方でモバイル業界はまだまだ4Gが主流です。（5Gどこいった…？）
スマホ本体の性能向上が顕著でもモバイル速度の進化は緩やかです、そこで大事なのが「ページ容量」です。

Googleが提供する「PageSpeed Insights」ではWebページのURLを貼るだけで評価＆改善策を提言してくれます。

当社サービスの某ページを診断したところパフォーマンスが「69点」
高速化テコ入れの必要性がでてきました。

ここでパフォーマンス改善でGoogleから強く推奨されるのが「WebP」画像形式です。

🔰そもそもWebPとは？

Googleが開発した次世代画像フォーマットです。
画像の圧縮率が高く、表示速度の高速化に有利です。
2022年6月時点では、主要ブラウザであるGoogle ChromeやSafari、Firefox、EdgeなどのブラウザがWebPに対応しました。
iPhoneはiOS14以降対応（2020/9）で3年前からカバーしています。

📷画像を圧縮する主な理由は？

ユーザーの直帰率を減少させるため
SEO対策上必要不可欠であるため
サーバー上の負荷を軽減させるため
ユーザーのストレスを軽減させるため

🎨じゃあ今後は画像データは全部WebP使えばいい？

そんなことはございません！要所要所で最的確で使い分けましょう！
（ただ高速化にはWebPが最適です）

🙋じゃあWebパーツを書き出すときはPhotoshopでWebP形式で保存するね？

ちょっと待って！実はまだPhotoshopは書き出し対応が完全ではありません； (2023/12時点)

Photoshopでは「生成アセットをON」に設定することで、レイヤーに付けられた拡張子の画像ファイルを自動書き出しされますが、WebPはまだ未対応のようです＞＜

「複製を保存（Ctr＋Alt＋S）」からしか書き出せないため一つ一つ書き出すしかなく不便です

🌍画像をWebPに変換できるWEBサービスもあるにはあります

💡できれば”リリース前の画像”を扱うのでローカルでサクッと書き出したいですよね？

🛠ご安心ください、自動処理ツール作りました！

図解は💻Windowsをベースにしていますが、🍎Macでも同じフローになります。

※自動処理はPhotoshopのアクション機能を使っています、もし動作しない場合はPhotoshopのバージョンを最新版にアップデートしてください。

1️⃣下記のアクションファイルをダウンロードして、Photoshopに読み込んでください。

※アップロードされたファイルはnoteでもウィルスチェックを行っております、ご安心ください。

アクションツールのハンバーガーメニューから.atnファイルを読み込むと
「セット」と「アクション」が追加されました！

2️⃣ドロップレット（自動処理ツール）を生成します。

📝補足
【ドロップレットを保存】
└　自動処理ツールをどこに保存するか指定できます。
└　一旦デスクトップがわかりやすいと思います。
└　名前は後で変更できますので適当で問題ありません。

【実行】
└　ダウンロードしたアクションの「セット」と「アクション」をプルダウンで選択してください。

最後に「OK」を押せばドロップレットが生成されているはずです。
💻Windows…＊＊＊.exeファイル
🍎Mac…………＊＊＊.appファイル

3️⃣ドロップレットに画像をドラッグするとwebpファイルに変換されます。

✅注意事項

📓ファイル容量の比較📐
書き出されたファイルは必ず容量の比較を行ってみてください、壁紙や背景画像など高解像度の場合、容量が膨らんでしまうケースもあります。

📓Mac版の初期起動時🍎
Macだと正しいドロップレットでも初回起動時にエラーを吐いてしまうので、下記ステップをお試しください。

一度「キャンセル」をクリック
ドロップレット.appを右クリック ➾「開く」
またエラーが表示しますが「開く」の項目をクリック
これで通常どおりドロップレットに画像ファイルをドラッグするとWebPに変換されます。

👍「右クリック登録」でもっと便利に

右クリックメニューに登録すれば、ドロップレットにファイルをドラッグしなくてもOKです！

💻Windows

🍎Mac

🐼もっと容量を減らせないの？

【🔥初級者】外部ツールで減量化！

容量が更に「-70％から-90%減量」されます。

サイズ推移

.pngファイル（1.16MB）➾ .webpファイル（843KB）➾ TinyPNG(103KB)

【🔥🔥中級者向け】画質ごとのドロップレットを作成！

本記事で配信しているアクションのドロップレット書き出し時に
「画質75」版のドロップレットを生成してください。

【🔥🔥🔥上級者向け】アクションファイルから画質をコントロールする

アクションツールの「保存」エリアをダブルクリックする

画質コントロールのダイアログが出るのでスライダーで適宜調整してください。
好みの画質に設定した画質のドロップレットを生成して完了です。

📝まとめ

・インターネットの速度はあがっていきてはいるものの…モバイルのスピードは緩やかです。
・ページの高速化は、UI/UXにおいて大事な要素です。
・高速化手段の一つとして画像形式はWebPを推奨します。
・ドロップレットを使えば、手軽に画像をWebP化できます。

📣viviONでは一緒に働く仲間を募集しています！

ユーザーとクリエイターが楽しみながら、幸せに生きていける社会にする。株式会社viviONでは、一緒に働く仲間を現在募集しています。少しでも業務内容やカルチャーに興味を持っていただけましたら、是非お気軽にご応募くださいませ。

この記事が参加している募集

企業のnote

with note pro

11,428件

この記事が気に入ったらサポートをしてみませんか？