どうも皆さんこんにちは、そーべー一家のおとうさんです。
ブログに挿入する画像サイズですが、適正なサイズをググってみても結構バラバラで表示されます。
それもそのはず皆さんの作っているサイト自体が人それぞれだから画像サイズも違ってきます。
ということで、ご自身のサイトを調べて自分に合ったサイズに変更しましょう。
Googleのデータによりますと、
「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
だそうです。
サイトを高速化するには様々な方法(画像の圧縮等)がありますが今回は「画像」の適正なサイズについて調べていきます。
まずは、こちらのサイトでご自身のサイトをチェックしてみましょう。
モバイルとPCの両方の表示速度の分析結果が表示されます。
今回のやった変更で少しでもサイト表示が早くなれば幸いです。
それではやっていきましょう！
適正な画像サイズに揃える
サイトで使われている画像やアイキャッチなどの形が、毎回バラバラだと統一感のない感じになってしまうのでサイズを揃えましょう。
ワードプレスであれば作成した画像ファイルを読み込むと、元のサイズに関係なく自身のサイトに適した横幅サイズに変更してくれます。
ですが、もともとのサイズが大きいと容量も大きいので表示が重くなってしまいます。
画像サイズを調べる
まずは、ご自身のサイトの画像サイズを調べましょう。
制作者の使っているテーマや環境によって適正画像サイズはそれぞれ違います。
②検証をクリック
③青く選択された下線部の箇所にカーソルを合わせる
すると、このようにサイトの画像サイズが表示されます。
実際に表示されているサイズと元の画像のサイズです。
元のサイズが無駄に表示サイズより大きくないでしょうか？
記事の画像とアイキャッチの画像のサイズをそれぞれ調べてみましょう。
記事の画像は横幅を覚えておきましょう。
アイキャッチの画像は横縦両方を覚えておきましょう。
画像を使用する場合はこのサイズがあなたの適正画像サイズになります。
当サイトで調べてみると、
ご自身のサイトの画像サイズはいくつだったでしょうか？
画像サイズを変更する
使い慣れた画像編集ソフトがある場合はそちらをお使いください。
無い場合はこちらの無料ソフトを使ってみましょう。
レイヤー等高度な編集は出来ませんが、文字やサイズの変更などが出来ます。
ダウンロードが出来ましたら開いて使ってみましょう。
変更する画像を持っていきます。
①ホームタブをクリックします。
②リサイズをクリックします。
③先ほど調べた横幅を入力します。※縦幅は入力しません。
「OK」をクリックして完成です。
保存する場合は、
右下の「保存」をクリックし、上書きするか新規で保存するか選びます。
アイキャッチ画像など縦幅を設定する場合は、
①トリミングタブをクリック
②カーソルをドラッグして縦幅をアイキャッチ画像の縦幅の数値に調整する。
※横幅はいっぱいに広げる(すでに調整済みの為)
③トリミングで切り抜きします。
これで保存します。
これで、ブログ・アイキャッチ画像を適正な大きさに変更出来ました。
まとめ
今回は「画像のサイズ」についてご紹介しましたが、圧縮に関する「次世代フォーマット」についての記事も併せて活用ください。
どうも皆さんこんにちは、そーべー一家のおとうさんです(@soubeikun) 今回はWordpressのブログで次世代フォーマット【Webp】での画像配信の方法やサイズ・圧縮方法を紹介します。 Googleのデータにより[…]
サイトで写真や図を使う場合、ほとんどが「絵で分かり易く説明する」為に使われます。
「美しさ」を表現する場合を除いてそれは視覚的に理解できれば十分だと言えます。
撮った写真や作成した図の画像をそのままブログ記事などに掲載すると大きさがバラバラであったり、サイトが重くなったりしてしまいます。
ワードプレスの場合、ある程度横幅のある物であれば自動で大きさを調整してくれますが、大きな画像はやはりサイトが重くなる原因につながります。
調べた画像サイズぴったりでなくも構いません。
冒頭にも書きましたがサイトの環境によって最適な画像サイズは変わってきます。
私の場合、WordPressで使っているテーマは「TheThor」を使用しています。
おとうさんこんにちは、そーべー一家のおとうさんです。現在(2019/07/31)、レンタルサーバーを契約してブログを書き始めて、約二ヶ月が経ちました。そして「TheThor」を導入して一ヶ月半が経ちました。今回は[…]
同じテーマを使っていたとしても、設定でサイドバーを設定しているかしていないか等で表示画像サイズも変わってきます。
また、当然ですがテーマやサイト設定を変更すれば表示される画像サイズは変わってきますので、後々変更するより初期の頃から有料テーマを導入する事をお勧めします。
サイトの最適な画像サイズの問題やサイトの表示速度が少しでも解決出来たら幸いです。
最後まで読んでくれてありがとうございました。