アメブロの画像や写真のサイズ編集・大きさ変更

• アメブロ コピペで使える見出しデザインセット 24選を追加しました
• 知っておきたいアメブロのカスタマイズ方法 CSS編集を追加しました
• アメブロ スマホのデザインをCSSでカスタマイズする方法を追加しました
• アメブロ 画像に代替テキストつけてますか？画像に追加して、SEO対策しようを更新しました

この記事を読むのに必要な時間は約 5 分です。

[アイキャッチモデル: 茜さやさん]

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。

アメブロで記事を書く時に、写真や図解を使って読者に分かりやすくすることは大事です。

説明に文字では何行も必要な内容でも、画像を使えば一目瞭然というのはよくある話です。

文章だけの記事を最後までしっかり読む読者は少ないので、図解を利用するのも効果的。

重い記事は読まれにくい

重いサイトというのは読み込みに時間がかかるサイトのことを言います。

アメブロはかなり重いサイトで、容量が重い画像を使用すると表示までにかなり時間がかかっています。

表示されるまでに時間がかかるサイトというのはイライラすることもあります。

実際に表示まで時間がかかる記事は、多くが離脱といって読まれずに離れてしまうというデータがあります。。

アクセスがあっても、実は全く読まれていないなんてこともよくあります。

なので画像はデータを軽くして使用することを心がけましょう。

画像を軽くするには？

画像を軽くするには次の2つのことが必要です。

どちらもなれると1分もかからずできる作業です。

横幅を600px以下にする

アメブロの記事に入れる画像を入れる時に最適な画像幅というのがあります。

選択しているテーマによって若干の違いはありますが2カラムの場合の横幅は620pxです。

つまり620pxよりも大きな画像はすべて620pxに縮小されます。

620pxよりも大きな画像を使ってもただ容量を使い表示を遅くするだけです。

実際に軽くするとどうなる？

今回はアイキャッチに使っている画像とほぼ同じ画像を説明に使用します。

ぱくたその「そろそろ時間だから行こっか」の写真素材をとにした画像です。

画像サイズ（幅：5760px 高さ：3840px 容量：5.8MB ファイル形式：JPG）

これを幅600px375pxに縮小します。

この時点で容量が150KBで97.5%ほど小さくなっています。

元画像度と比べた場合、ブログ上で見た場合正直差がわからないと思います。

今回の元画像はかなり多きい画像を使用しているのでサイズが100分の1近くまで落ちていますが普通にスマホの写真を使用する場合でも最低でも10分の1ぐらいにはなります。

さらに圧縮をかけた下記の写真の場合

約81KBまで落ちます。

通信状況にもよりますが、画像をそのまま使っているのとサイズを最適解して圧縮をかけた場合では、読み込み速度が10倍から100倍ほど変わります。

更に今のGoogleの検索で求められているSEOとして読み込み速度があります。

つまり画像の読み込みを早くすることはある意味必須の作業となってきています。

編集画面で小さくしても無意味

もしかするとあなたもやっているかもしれませんが、アメブロの記事の作成画面で画像を小さくしているから大丈夫と思っているかもしれません。

しかしこの方法は元の大きな画像を縮小して表示しているだけではっきり言って無意味です。

重要なのは画像をアップロードする前にサイズと容量を調整しておくことです。

詳しくは「 間違いだらけの画像サイズの変更方法」で説明しています。