生成AIでデザイン制作してみよう Illustrator Photoshop 簡単ノウハウ
前回の【WordPress GoogleデベロッパーツールでPCスマホ、タブレット表示の確認 】 では、Googleのサービスの一つである「開発者ツール」デベロッパーツールを使って、サイトの一部変更カスタマイズのお試しをしてみました。
今回はSEO対策に有効な画像についてを解説してみたいと思います。画像をただ漠然とサイトにアップしているのと、認識しながら適切に扱うのとでは、Googleの検索順位に違いが出てくるのを念頭に置いてサイトを運営していきましょう。
画像とは
画王、写真、と呼び方がありますが、今回は画像で統一いたします。
スマホやiPhoneで撮影した画像、無料の画像サンプルサイトからダウンロードした物、有料コンテンツと契約して使用するなど、様々な形でウェブサイトに使用している事と思います。
画像は、ビットマップデータ、点の集合体で構成されています。
それぞれの点々が色や彩度明度の情報を持っています。そのため点々が多い方が情報量が多くなる為、データとして重くなります。
通常デジタル画像は、サイズはpixel(ピクセル)で表示、1インチx1インに何個点々が入っているかの解像度データを持ち合わせます。
サイズや解像度が大きければ大きいほど重量は重くなります。
現在のデジタル端末（携帯電話やデジタルカメラ）は非常に大きなサイズで自動的に画像保存します。
パソコンやタブレット、スマホでの必要サイズ
パソコンやタブレット（インターネット）で写真を見る場合、スマホで撮った画像サイズは、ほとんど必要ありません。サイズが大きすぎます。
ということは、ご自身でWordpressサイトを運営しており、ブログや投稿記事を上げる際には、画像を適切なサイズでアップロードしなければ、サイトがどんどんと重くなってしまうということになるのです。
必要ない巨大なサイズだったり、高すぎる解像度の写真を安易にアッうロードし続けることで、サイトの表示スピードが落ちて、検索順位が下がる要因になってしまいます。
↓サイトの表示速度チェックはこちらのパラメーターで確認できます
Google PageSpeed Insights グーグルページスピードインサイツ」
webP画像形式とは
画像の質は上がる一方で、サイト表示の速さをGoogleが重要視している、その相反する事情の中で各ホームページ担当者がするべき対処とは何でしょうか。
現在Googleが一押ししている画像形式 WebP ウェッピー の導入、がその一つです。
次世代画像形式「webP（ウェッピー）」は、JPEG2000 や JPEG XR の画像形式と並ぶ最新の画像形式です。
WebPは、GIFのようにアニメーションが可能、PNGのように透明な背景を持つ画像に対応と、JPEG・PNG・GIFの特性を併せ持っています。
画質が劣化することなく圧縮され、容量が軽いのが特徴です。
webP画像形式の軽さ
WebPはPNGやJPG画像と比較してみると
・サイズが25〜34％小さい
・圧縮率が30%高い
以前はGoogle以外のブラウザ（インターネットで検索しサイトを見るアプリケーション）では対応ができませんでしたが、最近も対応可能となりました。非対応ブラウザの方が圧倒的に少数派になりつつあります。
サイトで画像をwebP形式に変換するには
HTMLコードで作られたサイトの際は、HTMLコードの1つ1つを修正することでwebP画像を取り入れられます。
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="Site Logo">
</picture>
WordPressサイトで画像をwebP形式に変換するには
ワードプレスサイトの場合は、プラグインを使用し既にアップロード済みの画像を一括でwebP画像に変換することや、これからアップロードする画像をjpegからwebP画像へ自動で変換するような設定が可能です。
webP画像変換のメリットデメリット
表示速度の向上でSEO対策として、以下メリットがあります。
・離脱率の低下
・直帰率の低下
・エンゲージメントの向上
今後の画像に関しては絶対的にwebP画像をアップロードする、もしくは自動変換したほうがいいのは間違い無いでしょう。
ですが、これから導入するにあたり、デメリットもございます。
そちらに関しましては、各サイトの運営事情などもあるため、まずはこちらをお読みいただき、適切な処置のもと行うことをお勧めいたします。
EWWW Image Optimizeで WebP画像変換のメリットデメリット
便利と簡単はそれ以上の問題を、後々サイト運営にもたらすことがあるため、比較検討した上で行いましょう。
○●----------------------------------------------------●○
【 Wワークに副業、フリーランスの時代です 】
WEB制作、ブログに必要なこと
【 誰にでもできる！サイトで自己発信 WEB感覚を身につけるテク 】
学び上手な人には共通点があった
【 自分の好きな時間場所でレッスンできる個人レッスン・グループレッスンオンライン可能 】
マンツーマンレッスンについて
【 WordPressを始めるにあたって 】
で、結局WordPressってなんなんだ？！初級編1
【Adobe Illustrator CC のバージョンVerを確認し変更する方法 】
Illustrator CC のバージョンVer確認変更 Adobe CC
【 デザイナーの種類いろいろ 自分の適正タイプを知るには 】
デザインにも適性があるのか？！
○●----------------------------------------------------●○
