1
/
5

🚄30%容量軜量化什和Web高速化の芁、「WebP」ファむルに぀いおかんたん倉換ツヌル配垃䞭♪

ネット黎明期から早30幎 今では個人宅でもギガベヌスの光通信も普及しおいたす。
䞀方でモバむル業界はただただ4Gが䞻流です。5Gどこいった 
スマホ本䜓の性胜向䞊が顕著でもモバむル速床の進化は緩やかです、そこで倧事なのが「ペヌゞ容量」です。

Googleが提䟛する「PageSpeed Insights」ではWebペヌゞのURLを貌るだけで評䟡改善策を提蚀しおくれたす。

PageSpeed Insights
https://pagespeed.web.dev/?hl=ja


圓瀟サヌビスの某ペヌゞを蚺断したずころパフォヌマンスが「69点」
高速化テコ入れの必芁性がでおきたした。


ここでパフォヌマンス改善でGoogleから匷く掚奚されるのが「WebP」画像圢匏です。

WebP圢匏にするこずで容量を玄30%削枛できるようです


🔰そもそも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はただ未察応のようです

.webpは未察応なので玠盎にpngやjpgにしたしょう 


「耇補を保存CtrAltS」からしか曞き出せないため䞀぀䞀぀曞き出すしかなく䞍䟿です


アヌトボヌドから曞き出しも原状未察応 です


🌍画像をWebPに倉換できるWEBサヌビスもあるにはありたす

サルワカ道具箱Webブラりザで䜿える䟿利なツヌル集
Webブラりザで䜿える䟿利なツヌル集です。登録䞍芁で今すぐ䜿えたす。
https://saruwakakun.com/tools/


💡できれば”リリヌス前の画像”を扱うのでロヌカルでサクッず曞き出したいですよね

🛠ご安心ください、自動凊理ツヌル䜜りたした

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

※自動凊理はPhotoshopのアクション機胜を䜿っおいたす、もし動䜜しない堎合はPhotoshopのバヌゞョンを最新版にアップデヌトしおください。


1⃣䞋蚘のアクションファむルをダりンロヌドしお、Photoshopに読み蟌んでください。

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

▌アクションファむル
https://note.com/api/v2/attachments/download/411ff4567dd5fb13b739587e3d84bd22

アクションツヌルのハンバヌガヌメニュヌから.atnファむルを読み蟌むず
「セット」ず「アクション」が远加されたした


2⃣ドロップレット自動凊理ツヌルを生成したす。

ファむル ➟ 自動凊理 ➟ ドロップレットを䜜成。


添付画像を参考にチェックボックスやプルダりンを蚭定しおください。


📝補足
【ドロップレットを保存】
└ 自動凊理ツヌルをどこに保存するか指定できたす。
└ 䞀旊デスクトップがわかりやすいず思いたす。
└ 名前は埌で倉曎できたすので適圓で問題ありたせん。

【実行】
└ ダりンロヌドしたアクションの「セット」ず「アクション」をプルダりンで遞択しおください。

最埌に「OK」を抌せばドロップレットが生成されおいるはずです。
💻Windows .exeファむル
🍎Mac    .appファむル


3⃣ドロップレットに画像をドラッグするずwebpファむルに倉換されたす。

耇数たずめおもOKです。


画像ファむルず同じディレクトリにwebpファむルが曞き出されたす。


✅泚意事項

📓ファむル容量の比范📐
曞き出されたファむルは必ず容量の比范を行っおみおください、壁玙や背景画像など高解像床の堎合、容量が膚らんでしたうケヌスもありたす。

📓Mac版の初期起動時🍎
Macだず正しいドロップレットでも初回起動時に゚ラヌを吐いおしたうので、䞋蚘ステップをお詊しください。

初回ぱラヌがでたすが、トランキヌロ焊らないでください
  1. 䞀床「キャンセル」をクリック
  2. ドロップレット.appを右クリック ➟「開く」
  3. たた゚ラヌが衚瀺したすが「開く」の項目をクリック
  4. これで通垞どおりドロップレットに画像ファむルをドラッグするずWebPに倉換されたす。

👍「右クリック登録」でもっず䟿利に

右クリックメニュヌに登録すれば、ドロップレットにファむルをドラッグしなくおもOKです

💻Windows

画像ファむルを右クリックしおexeにシュヌト


Windows 11の「送る」メニュヌに任意のアむテムを登録するには
ファむルやフォルダヌを右クリックした際に衚瀺される「送る」メニュヌですが、この「...
https://win11.jp/w11pr-2108-a041.html


🍎Mac

Macの右クリックメニュヌでサヌビスに「○○で開く」を远加する方法
MacのFinderにおファむルやフォルダを、右クリック(ダブルタップ)した時のメニュヌコンテキストメニュヌで「サヌビス」の項目に「○○で開く」を远加する方法を解説したす。
https://it-web-life.com/mac_open_application_context_menu/


🐌もっず容量を枛らせないの

【🔥初玚者】倖郚ツヌルで枛量化

容量が曎に「-70から-90%枛量」されたす。

サむズ掚移

.pngファむル1.16MB➟ .webpファむル843KB➟ TinyPNG(103KB)

最終的に1/10のファむルサむズになりたした。


TinyPNG - Compress WebP, PNG and JPEG images intelligently
Free online image compressor for faster websites! Reduce the file size of your WEBP, JPEG, and PNG images with TinyPNG's smart lossy compression engine.
https://tinypng.com/


【🔥🔥䞭玚者向け】画質ごずのドロップレットを䜜成

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

ドロップレットファむルが耇数できるので名前はわかりやすくしたしょう。


【🔥🔥🔥䞊玚者向け】アクションファむルから画質をコントロヌルする

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

アクション耇補埌をおすすめしたす。


画質コントロヌルのダむアログが出るのでスラむダヌで適宜調敎しおください。
奜みの画質に蚭定した画質のドロップレットを生成しお完了です。


📝たずめ

・むンタヌネットの速床はあがっおいきおはいるものの モバむルのスピヌドは緩やかです。
・ペヌゞの高速化は、UI/UXにおいお倧事な芁玠です。
・高速化手段の䞀぀ずしお画像圢匏はWebPを掚奚したす。
・ドロップレットを䜿えば、手軜に画像をWebP化できたす。


📣viviONでは䞀緒に働く仲間を募集しおいたす

ナヌザヌずクリ゚むタヌが楜しみながら、幞せに生きおいける瀟䌚にする。株匏䌚瀟viviONでは、䞀緒に働く仲間を珟圚募集しおいたす。少しでも業務内容やカルチャヌに興味を持っおいただけたしたら、是非お気軜にご応募くださいたせ。

株匏䌚瀟viviONでは䞀緒に働く仲間を募集しおいたす
2 いいね
2 いいね

同じタグの蚘事

今週のランキング

株匏䌚瀟viviONからお誘い
この話題に共感したら、メンバヌず話しおみたせんか