ブログ画像の圧縮とリサイズについてポイントまとめ
この記事では、画像の圧縮とリサイズについて解説しています。
画像の圧縮とは？
画像の中の余計なデータを削除する作業のことです。
同じ画像でも圧縮することでデータサイズを大きく減らすことができます。
画像のリサイズとは？
画像の大きさを小さくする作業のことです。
オリジナルの高画質な画像は、ほとんどが大きいサイズになっています。大きすぎるサイズをブログに適したサイズに変えることで、余分なデータサイズを除くことができます。
圧縮とリサイズはなぜ必要？
画像のデータサイズは、WEBページの表示速度に関わってきます。
画像が大きすぎると遅く、適したサイズに調整すると速く読み込むことができるようになります。
そのため、画像のリサイズと圧縮でデータサイズを軽くしておく必要があるのです。
高画質な画像を使う
画像の圧縮とリサイズは重要ですが、前提としてユーザーに出来るだけ高画質な画像を提供するというところを意識する必要があります。
画像はユーザーの理解をサポートするという位置付けになります。そのため画質が低いと不明瞭になり、画像からの情報がうまく伝わらないということも起こってきます。
そしてやはり、綺麗な画像を使う方がユーザーも居心地良く過ごすことができるはずです。
圧縮とリサイズのポイント
画像の表示幅を知っておこう
WordPressやはてなブログなどは、記事の幅が決まっています。
そして画像の最大表示幅もそこまでになるので、今の画像の表示幅を知っておくことはとても重要になります。
画像の表示幅の確認について、最も簡単なのはデベロッパーツールを使う方法です。
記事の画像の上で右クリックもしくは、control＋クリックをします。その中から［検証］を選択します。
そうすると画面右側にコードがずらっと出てくるかと思います。
img src〜という部分が薄青で選択されている状態であれば、右下のボックスでその画像の表示サイズが確認できます。
この例だと、表示幅は820pxなのに対して幅1100pxの画像をアップロードしているとわかりますね。
表示幅ぴったりにするべき？
とはいえ、表示幅ぴったりにリサイズするのが良いかというとそうでもありません。
画像の性質上、リサイズしただけでも画質が低くなり、表示幅ぴったりにしてしまうと大抵見辛くなってしまうのです。
少し分かりづらいかもしれませんが、画質の低い画像でも、縮小すると綺麗に見えるようになります。
そのため表示幅よりも大きめのものに限定しながら、表示幅に縮小した際に綺麗に表示できるサイズを探っていくのが良いでしょう。
圧縮すると画質が悪くなる
リサイズで良いサイズが見つかっても、そこから圧縮をすると画質が悪くなってしまいます。
ブログで使う画像の調整はここが一番ポイントになるかと思います。少しでも軽くするために、リサイズと圧縮をいろいろ試しながら、自身のサイトにとってベストな画像を作成していく必要があるでしょう。
レイアウトと画像の大きさ
「どのように画像を配置するか」という部分も、画像の大きさの決定に大きく関わってきます。
3つのレイアウトを例に上げましたが、横幅いっぱいでは大きな画像が必要になるのに対して、〇〇並べでは画像の大きさは小さくすることもできます。
横幅いっぱいならインパクトが強く、対して縦・横並べではスマートで整った印象になります。
データサイズも考慮しながら、画像のレイアウトを決めていくのはユーザー体験において重要なのですね。
圧縮率の違い
画像の圧縮は「圧縮ソフト」を使って行うのが一般的ですが、これらはそれぞれ圧縮具合が異なります。
例えば、ImageOptimというアプリを使って画像を圧縮してみると、45KBまで減らせました。
このように、使うアプリやサービスによって削除できるデータの量が変わってくるのです。
また圧縮率が高いものは、低いものと比べて画質が悪くなりやすいです。
まとめ
画像の圧縮とリサイズはとても重要な作業ですが、少しでも軽くするには色々と試行錯誤が必要なのですね。
良いWEBページに繋がるよう、より良い画像調整を行っていきたいところです。
SEOとUXから見る、ブログでの正しい画像の使い方とは？
この記事では、ブログで扱う画像の管理についてまとめています。
画像はなぜ必要？
テキストの情報だけでなく画像による視覚的な情報も盛り込むことで、ユーザーがより記事を把握しやすくなります。
ユーザーの利便性や満足度が高いと、Googleからの評価も高くなるので、記事の検索順位UPにも繋がるはずです。
では、実際に画像にはどんな効果があるのか見ていきましょう。
読みやすくする
文章ばかりの記事だと、ユーザーは読んでいて退屈に感じたり目が疲れてくるかもしれません。
挿絵として画像を配置することで、そこでユーザーの目を一旦休ませることができます。
綺麗な画像はデザイン的にも見栄えがよくなるので、読みやすく魅力的な記事になるはずです。ユーザーに与える居心地の良さにも繋がりますね。
内容を把握しやすくする
文章でながながと説明するよりも、画像を一枚貼った方が分かりやすい場合はかなり多いです。
また具体的なものを示すだけでなく、ユーザーにイメージさせるために画像を使うのも効果的です。
SEOに効果的な画像の使い方
ここからは、Googleの画像検索ガイドやSEOスターター ガイドを参考に、効果的な画像の使い方について見ていきましょう。
テキストと関連性を持たせる
画像はユーザーの理解度を高めるために、テキストの補足として使うのが良いでしょう。
テキストと画像に関連性を持たせ、そしてできるだけ近くに配置します。
全く関係ない画像を入れてしまうと、ユーザーを混乱させてしまうかもしれません。読者の理解をサポートするというのが、画像使用の大前提というわけですね。
他サイトとの差別化を図る
他サイトにはない、オリジナルの画像を使用することもサイトの魅力度をあげる要素になるでしょう。
フリー素材は便利ですが、これだと至る所で使われていて新鮮味はないですね。
人間には、一つのネガティブな面から全体の評価を下げてしまうという心理傾向もあります。よく見かけるフリー画像を使っているサイトは、それだけで安っぽさ・手抜き感を与えてしまうかもしれません。
被らない画像サイトを利用する
個人的にオススメなのは、こちらのUnsplashというサイトです。「これが無料！？」とビックリするほど、オシャレでハイクオリティな画像が揃っています。
他にも無料の画像サイトについては、こちらの記事でまとめています。
【商用利用可】オススメの無料画像サイトを９選ご紹介
有料画像を利用する
有料の画像サイトを利用しているサイトはそこまで多くありません。有料画像であれば、一気に差別化を図ることができますね。
参考までに、こちらの画像はShutterstockというサイトで購入したものです。画像の量も多く、無料トライアルもあるのでオススメ。
Shutterstockは無料で使える？料金プランと解約方法もまとめて解説
画像を自作する
イラストレーターなどのデザインソフトを使ってオリジナルの画像を制作するのも良いでしょう。
オススメなのは、CanvaというWEBサービスです。無料で直感的にイラストの制作ができるので使い勝手が最高なのです。
Canvaでデザインを作成しよう！手順とメリットをまとめて解説
ファイル名を分かりやすくする
「IMG-4.jpg」のようなファイル名ではなく、簡潔で分かりやすいものにするのが望ましいようです。
例えば子供が寝ている画像であれば、「child-sleeping.jpg」というファイル名にするのが適切です。
alt属性を記述する
alt属性とは、画像がうまく表示されない場合に、代わりとして表示するテキストのことです。
設定しておくことで、画像が見れない場合にもどんな内容なのか把握することができます。
WordPressでの画像挿入時、［代替テキスト］の項目から設定できます。
alt属性は日本語で、出来るだけ詳しく書くのが良いようです。ただし、検索上位を狙ってSEOキーワードを過剰に盛り込むと、ペナルティを受ける可能性があるので注意しましょう。
高画質な画像を使う
高画質な画像を使うことは、記事をより魅力的にし、ユーザーが感じる居心地の良さにも繋がるでしょう。
画質が低いと不明瞭になり、画像から伝えたいイメージがうまく伝わらないということも起こってきます。
リサイズを行う
画像の大きさを小さくすることで、データサイズを軽くすることができます。
データサイズは表示速度にも関わってくるので意識しておくと良いでしょう。
オリジナルの高画質な画像は、ほとんどが大きいサイズになっています。リサイズでは見た目は維持したまま、画像を縮小することができます。
画像圧縮を行う
画像のデータサイズを軽くする上で、さらに行っておきたいのが画像圧縮です。
こちらは画像の中の余計なデータを削除する作業になります。
同じ画像でも圧縮することでデータサイズは大きく変わってきます。
データの削除と言っても、圧縮後の画像の見た目はほとんど変わりません。同じ綺麗な画像を使っていても、圧縮をしないと表示速度の面でユーザーに不便なWEBサイトになってしまいます。
まとめ
ブログでの画像の使い方について解説しました。
画像ひとつとっても、これだけたくさんのポイントがあるのですね。とはいえ、全てを守る必要はないかと思います。
自身のサイトに重要なところだけ抑えておくと良いでしょう。
ページの表示速度とは？重要性と改善方法について解説
ページ表示速度とは？
WEBサイトやWEBページというのは、「アクセスを受ける→サーバーから必要な情報を持ってくる→表示する」という流れでユーザーに届けられています。
アクセスがあってから、WEBページが表示されるまでの速さのことを「表示速度」と言います。
表示速度の重要性
SEOに影響する
SEO対策とは、Googleの検索結果で上位表示を狙うための施策のことです。
Googleは2018年に公式ブログで、「ページの読み込み速度をモバイル検索のランキングの要素に使用する」ことを発表しています。
Googleのアナウンスの内容をまとめると、このような感じになります。特に遅いページは改善し、ある程度対策をしたページであれば、そこまでこだわる必要はなさそうですね。
さまざまなワードの上位記事を50個ほどPageSpeed Insightsで確認してみたところ、赤信号に当たる0-49も割と多かったですね。やはりコンテンツ的に優れているのが重要なのでしょう。
ユーザー体験に影響する
表示速度の改善が重要とされるのは、こちらの部分が大きいでしょう。
ブログやWEBサイトを訪れたユーザーが、一番最初に体験するのが表示速度です。言うならば、お店に入るまでにかかる時間。
ここで長時間待たされるのは、ユーザーにとって気持ちの良いものではありません。
特にWEBの世界では、ユーザーは時間がかかるようだとページを見る前にブラウザバックして帰ってしまいます（直帰率UP）。
またサイト内を回遊する際にも、個々の記事の表示速度が遅いと、その度ユーザーを待たせることになります。これでもユーザーが帰ってしまいますね（離脱率）。
入るのにものすごく時間がかかる上に、商品を探すのも一苦労だったりあらゆる場面で待たされたり、そんなストレスショップには二度と行きたくないですよね。
表示速度を改善しよう
上記の理由から、表示速度を改善することはユーザーの滞在時間を伸ばし、また来たくなる居心地の良さにも繋がるというわけです。
それでは、改善のために何をすれば良いのか見ていきましょう。
画像サイズを適切にする
デザインや資料として使う画像のサイズを見直してみましょう。
自分で撮影したものやサイトからダウンロードしてきた画像は、そのままではかなりサイズが大きいです。
画像サイズが大きいまま記事に使ってしまうと、それをサーバーから運ぶのにたくさん時間がかかってしまいます。これは表示速度の低下に繋がります。
画像はできる限り軽く、その上で綺麗な画像を使うのがベストでしょう。とはいえこれがなかなか難しいところです。
圧縮ソフトを利用しよう
画像サイズを小さくするために、「圧縮ソフト」を利用しましょう。
同じ大きさの画像でも、画像の圧縮を行うだけでサイズがかなり違ってきます。
オススメの圧縮ソフトについては、の記事でまとめています。
無料・有料の画像圧縮ツール9選：WEB制作やSEO対策に
ベストな大きさに調整しよう
たとえ圧縮しても、もとの画像が大きすぎると結局はデータサイズも大きくなってしまいます。
そのためにも、自分のサイトにぴったりな画像の大きさを知ってリサイズすると良いでしょう。
不要なCSSを削除する
WEBページを表示する際に、CSSファイルはすべて読み込まれています。
この時使っていないCSSのコードが残っていると、その分余計に時間が掛かってしまいます。
デザインを調整した時や、使うと思って用意したけど使っていないコードがあれば、こまめに削除しておくと良いWEBサイトに繋がります。
使っていないCSSを簡単に見つける方法については、こちらの記事が参考になります。
読み込むCSSファイルを変更する
大幅にデザインを変更した記事を制作する場合、その記事だけ別のCSSファイル作成し、それを読み込ませるということも可能です。
こうすると無駄なCSSを読み込まない分、表示速度が改善されます。
Autoptimizeを利用する
「Autoptimize」は、HTMLやCSSなどのデータを圧縮して小さくしてくれるプラグインです。
ダウンロードして有効化するだけなので、すぐにできる対策としては非常にオススメです。
画像の遅延読み込みを利用する
画像の遅延読み込みとは、最初にスクリーンに映し出されないページの後半の画像に関して、ユーザーがある程度スクロールしてから読み込むようにする処理のことです。
画像をたくさん使った記事でも、WEBページを表示する際にはじめの方の画像だけ読み込めば良いので、表示速度をある程度改善することができます。
スクロールしていくと画像がフワッと表示されるページは、この遅延読み込みを利用しています。
PageSpeed Insightsで計測する
PageSpeed Insightsは、特定のページの表示速度を計測してくれるサービスです。
現在の表示速度に関してモバイル・パソコンそれぞれの数値を確認することができます。上の数値が黄〜緑を目指すのが良いでしょう。
また改善策についても提示してくれます。秒数が大きい部分を改善していくのが良いかと思います。
Googleのアナウンスにもありましたが、完璧に早くするまでやらなくても良いと思います。できそうなところだけ改善しておくだけでも良いでしょう。
まとめ
WEBサイトにおけるページの表示速度の重要性と改善策について解説しました。
魅力的なコンテンツ作りも大切ですが、こういったユーザーの目に触れない部分のメンテナンス作業も大切なのですね。
パーマリンクとは？SEOに最適な設定方法と注意点まとめ
パーマリンクとは？
品番のイメージですね。WEBの世界でもそれぞれのページを管理するために、各々に番号を指定するわけです。
パーマリンクを決める
記事を作成する際、タイトルの下にあるURLをクリックすると、パーマリンクを決めることができます。
パーマリンク設定
［設定］の中にある［パーマリンク設定］では、この部分のスタイルを決めることができます。
例えば［月と投稿名］に設定すると、記事のURLに日付が出力されるようになります。
［カスタム構造］に設定して、%category%を追加するとカテゴリー名が出力されるようになります。
「カテゴリー名や記事のIDもURLに含みたい」という場合、こちらで設定することで記事のURLにそれらが記述されるようになるわけです。
どれが良い？
この後パーマリンクの書き方で触れますが、Googleが推奨している項目からすると［カテゴリー＋投稿名］でしょう。
「何ブログの、どのカテゴリーの、なんて記事」という具合にシンプルに説明されています。
ただ、経験上オススメなのは［投稿名］です。
理由については後ほど触れますが、見たところ多くのサイトでも「投稿名」に設定されていますね。
パーマリンクの書き方
SEO対策の観点から、パーマリンクには推奨されている書き方があります（参考：シンプルな URL 構造を維持する）。
- シンプルかつ論理的なものにする
- 英単語を使う
- 「-（ハイフン）」で繋げる
ユーザービリティやGooglebotがクロールする上では、このようなURLが望ましいとされています。
つまりどういう感じ？
例えばこんなタイトルと内容の記事があります。そのパーマリンクを意味不明な文字列にするのは、あまり適切ではありません。
記事の内容を表す英単語を使い、シンプルにまとめるのが良いでしょう。
パーマリンクの注意点
パーマリンクは各記事を管理する上での品番ということでしたね。
ゆえに、パーマリンクの変更には注意が必要です。
記事を公開して時間が経つと、SNSでシェアされたり、ブックマークされたり、検索順位が付いたりと記事に価値がついてきます。
これらの情報は、このURLの記事に付いているものとして管理されます。
そのためパーマリンクを変更すると、こういった情報がリセットされてしまうのです。
リダイレクトと呼ばれる対処法もありますがわりと面倒です。そのため変えないに越したことはありません。
カテゴリー間の引っ越しにも注意
先ほど「パーマリンク設定では、カテゴリー＋投稿名はオススメしない」と言いました。
それは、パーマリンクにカテゴリーを含んでしまうと、記事のカテゴリーを変更する際に情報がリセットされてしまうからです。
当サイトの記事もはじめは「カテゴリー＋投稿名」で運営していましたが、カテゴリーの引っ越しができない部分でかなり不便でした。
そのため［投稿名］をオススメしています。
まとめ
パーマリンクについて解説してきました。この記事では、おそらく大体のポイントは抑えられているのではないかと思います。
パーマリンク設定は、記事をたくさん書いてからは変更しないこと。
そのためにもはじめの内に知識を付けて、自分にベストな設定を行っておきましょう。
