36:縦向きの写真もスクリーンショットもSquooshで圧縮

画像を個別に圧縮 - Squooshが最適 作り方
横幅1200px、約200kBの超圧縮で画質劣化の少ないアイキャッチ画像を作成
この記事は約2分で読めます。

縦向きの写真もSquooshでアイキャッチに

これまで、iPhoneで撮った風景写真(生花や海辺など)を HEIC形式 のまま扱おうとすると、Squooshにドラッグ&ドロップしても変換できないことがありました。でも事前に jpg形式 に変えておけば問題なし。Squooshで圧縮できて、無事にブログのアイキャッチ画像として使えます。

これまで私は横向き(=ランドスケープ)の写真ばかりをアイキャッチにしてきました。アイキャッチはSNSでシェアされたときのサムネイル画像として自動的に表示されるため、伝えたい情報を真ん中に配置するのがポイント。これは縦向き(=ポートレイト)の写真でも同じです:

縦向き写真をSquooshで扱う流れ

  1. jpg形式に変換した縦向き写真 をSquooshにドラッグ&ドロップ
  2. 画面下の 「-」ボタン で写真全体を表示
  3. 画面中央の 赤と青の三角形アイコン をスライドさせて圧縮による画質変化を確認
  4. Resize 機能で幅を調整(例:1200px)
  5. WebP形式 で保存、Qualityを調整してファイルサイズ200KB程度に

今回も1.8MBあったチューリップ🌷の写真を、1200pxにリサイズして圧縮。200KB前後まで軽量化できたので、安心して再投稿できました。

スクリーンショットも圧縮!

写真だけでなく、記事内に載せる Squoosh画面のスクリーンショット も同じように圧縮しました。
500KBあった画像を800pxにリサイズしてみたところ、なんと 25KBまでスリム化

記事の見栄えはそのままに、サイト全体の読み込みも軽くなるので一石二鳥です。

👉 次回は、アイキャッチ画像の充実と、今後の実施予定について書きたいと思います。

タイトルとURLをコピーしました