コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。itブログやウェブサイトのSEO対策のひとつにページの表示速度の改善があります。その中でも画像サイズの最適化は効果も大きく、誰でも簡単に出来る対策です。画像サイズには以下の様な2つの意味があります。画像の縦横サイズ(長さ)画像のデータサイズ(容量)物理的なサイズが大きい事や高解像度が要因で画像データサイズが大きくなります。画像サイズが大きいと読み込みに時間が掛かる為、いわゆる「ページが重い」状態となります。その結果、画面表示が遅くなりユーザーが離れてしまうわけです。今回紹介する「Squoosh(スクーシュ)」はこれら画像サイズを調整できる無料のオンラインアプリ。画像の縦横サイズをリサイズし、WebPやJPEG、PNGなどへ変換・圧縮してデータを軽量化できる優れものです。画像サイズを気にした事が無かったブロガーはもちろん、Photoshopを使い慣れているWebデザイナーも参考にして下さいね。まとめSquooshとは?「Squoosh」はGoogleが提供する画像圧縮アプリ。データ圧縮以外にも、リサイズや様々な画像ファイル形式の変換が出来ます。ブラウザ上でオリジナル画像と変換予定の画像をプレビューで比較できるのは凄く便利です。フリーソフトなのでデスクトップにインストールして使う事も出来ます。Squooshは、ブラウザでさまざまなコーデックを使用して画像を圧縮および比較できる画像最適化ツールです。GitHub:GoogleChromeLabs/squooshSquooshの特長Squooshを使う最大の特長は、ブラウザ上で画像圧縮とファイル形式の変換が出来る事。複数の変換をプレビューで試しながら比較出来るのは大変便利です。専用の画像加工アプリを持っていなくてもSquooshにアクセスするだけ。無料でアカウントも必要ありません。数ある画像圧縮アプリの中でもSquooshを使うメリットは、WebPやAVIFなどの新しいフォーマットが使える事。JPEGやPNGも使えますし、他のアプリよりも圧縮率が高くて画質も綺麗な事が多いです。ファイルサイズを軽量化してウェブサイトの表示速度を改善する事は、SEO対策としてメリットがあります。スマホのみAVIFWebPJPEGとPNGの画像圧縮は複数あり、迷う場合は「MozJPEG」「OxiPNG」で大丈夫です。良い結果が得られない時は、WebPやAVIFなどの新しいフォーマットがおすすめ。Squooshは安全?Squooshは画像をサーバーに送信せず、すべてローカルで行われるので安心です。SquooshはGoogleアナリティクスを利用して以下のデータを収集しています。基本的な訪問者データ前後の画像サイズの値Googleの提供しているアプリですし、画像圧縮に必要な情報でもあるので気にする必要は無いかと思います。Squooshを使用するには何が必要ですか?Squooshは、Webブラウザ上で動作するオンラインツールであり、追加のソフトウェアやプラグインは必要ありません。Safariなどの最新のWebブラウザで利用できます。Squooshの使用は無料ですか?Squooshは完全に無料で利用できます。オープンソースのプロジェクトであり、ソースコードも公開されています。以上が、Squooshによくある質問や疑問です。Squooshは、使いやすく高度な機能を提供するため、Web開発者やデザイナーにとって非常に役立つツールの1つです。Squooshの使い方ブラウザからSquooshにアクセスします。PCとスマホのとちらでも利用出来ますが、操作がしやすいPCで編集するのがおすすめ。画像ファイル変換から圧縮までの流れは以下の通りです。変換・圧縮したい画像をブラウザ画面に直接ドラッグ&ドロップする。必要なら先に画像のリサイズを済ませる。ファイル圧縮形式を選択し、プレビューを見ながら圧縮率を調整する。圧縮結果に問題無ければそのままダウンロード。フリー素材の安全な使い方2023.05.27STEPSquooshのトップ画面ブラウザでSquooshサイトへ行くと上の様な画面になっています。スマホの場合は画面中央をタップし、フォルダから画像を選択。見ると「何コレ?」ってなりますが、この画面上に画像を直接ドラッグ&ドロップすれば編集画面に切り替わります。左右でオリジナルの元画像とファイル形式を変換・圧縮した状態をプレビューで見比べる事が出来ます。基本的にはオリジナル画像との比較だと思いますが、「JPEGとWebP」の様に、異なるフォーマット同士で比較する事も出来ます。画面中央の矢印を左右に移動させる事でプレビューエリアを広げる事も出来ます。画面中央下には拡大縮小ボタンや回転ボタンが並びます。圧縮によってディテールが失われていないか?画像が荒れてないかチェックするのに便利な機能です。上のサンプル画像であれば毛並み等をプレビューで確認します。STEP先にリサイズで画像の縦横サイズを変更もし必要なら、先にリサイズで画像の縦横サイズを変更しておきます。これには次のような理由があります。元画像の縦横サイズが大きいとそれだけでデータが重い。圧縮してから縮小すると、最適な圧縮の加減が分からない。ブログやウェブサイトに掲載するサイズに変更してから圧縮した方が効率的です。幅と高さの比率は固定されています。幅を入れると縦横比を維持したまま自動的に高さも変わります。STEP圧縮・変換するファイル形式を選択する正直な所、オプション(アドバンスドセッティング)内容は専門の知識が無ければ難しいです。場合「適切なファイル圧縮形式と圧縮率の変更」で十分な効果が得られます。選べる画像圧縮形式は沢山あり、よく見かけるJPEGやPNGにも違いがあります。SquooshはGoogleのフリーソフトなので、当然ですがWebPにも対応しています。これらは画像圧縮ツールやエンコーダーと呼ばれるものですが、違いが分かりにくいですよね。簡単にではありますが、後ほど改めて解説したいと思います。写真やイラストなど画像の内容によって最適なファイル形式があり、圧縮率にも違いが出ます。データサイズは小さいに越した事はありませんが、画質が荒れない程度に抑えます。逆にあまりにも高画質な画像はブラウザでは表現しきれず、ただ重いだけでデメリットしかありません。Photoshopなどで編集した画像の場合は一切圧縮しない状態で書き出し、Squoosh側だけで圧縮する方が良い結果が得られやすいです。圧縮形式選択ここでは試しにMozJPEGを選びました。圧縮形式によってオプションも変わりますが、理由が無ければそのままで大丈夫です。思ったほど圧縮効果が得られない時は、WebP形式など他のフォーマットで試してみるのがおすすめです。Quality(品質)画像の品質の事で、圧縮率をここで調整します。スライダーで数値を変更するとリアルタイムでプレビュー画面に結果が反映されます。(中心にある青い矢印の右側にあるエリア内)数値を高めるほどファイルサイズも大きくなります。この画像の場合、毛並みが潰れない位のギリギリまで画質を下げてみるなど、色々試すと良いです。画像によっては他の圧縮形式の方が適している場合もあります。画面右下に圧縮された割合と書き出し後のデータサイズが即座に表示されます。目視で画質を確認し、圧縮後のデータサイズにも問題が無ければ、その横にあるボタンからファイルをダウンロードしましょう。画面右下にある「Compress」のプルダウンメニューから、圧縮方法(ファイル形式)の選択をする訳ですが、それぞれの違いや特徴を簡単に紹介します。MozJPEGやOxiPNGなど、JPEGやPNGとは違うの?ってなりそうですが、圧縮方法やツールの名前です。ファイル形式はWEBで使っているいつものJPEGやPNGと考えて問題ありません。高度なオプション設定もそうですが、ブログやウェブサイトに掲載する為に軽量化したいだけなら難しく考えなくて大丈夫です。MozJPEGMozJPEGはMozillaが開発したJPEGフォーマットで、高品質な圧縮が可能です。ウェブページのロード時間を短縮するために設計された高圧縮かつ高品質なJPEGエンコーダー。すべてのWebブラウザーと完全に互換性があるので、ブログやウェブサイトで問題無く使えます。jpegOxiPNGOxiPNGはPNG画像の最適化に特化した高度なアルゴリズムを使用しています。これにより、画像の品質を損なうことなくファイルサイズを劇的に削減する、マルチスレッドのロスレスPNG圧縮オプティマイザです。ロスレスとは圧縮しても劣化が無いという意味です。PNGなので背景を透過させる事も可能です。pngWebPWebPはGoogleが開発した新しい画像フォーマットで、高い圧縮率と高品質の画像を実現しています。オプションの「Losless」にチェックを入れると劣化の無い圧縮になります。その分データサイズは大きくなります。背景の透過やアニメーションもサポートしています。Format)は、静止画像の圧縮のために開発された新しい画像形式で、Googleが開発したWebPよりも優れた圧縮効率を持っています。AVIFは、静止画像だけでなく、アニメーションや透過画像にも対応しており、Webサイトやアプリのデザインでより多様な表現が可能になります。オプションの「Losless」にチェックを入れると劣化の無い圧縮になります。その分データサイズは大きいです。avifまとめ利用回数などの制限も無いので、画像を加工しサイトにアップする前にはSquooshで圧縮するという風にワンセットで考えておくのが大事です。スマートフォンで撮った写真やフリー素材画像はそのままブログにアップせず、必ずリサイズと圧縮をしましょう。重い画像はSEO的に好ましくありません。表示が遅いブログやサイトは閲覧ユーザーが離れてしまいます。Squooshならオンラインでプレビューしながら圧縮・変換を試せるので、簡単で便利です。検索:FUERU(フエル)ウェブデザイナーが知識と経験をもとに、制作やSEO対策、ITスキルについて解説・発信するブログ。デザイン・コーディングからSEO対策やライティングなど幅広くWEB制作をしています。スキルアップして仕事に活かしましょう。コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。