カメラ

WEB

WordPressで最低限おさえておきたい画像処理について

せっかく良い記事なのに画像がぼやけている…という残念なブログに会うことがあります。

あなたのブログがそうならないために、WordPress 初心者さんでも最低限しておいた方が良い画像の処理の仕方についてまとめました。

それでは早速、ファイル形式の違いから説明していきましょう。

ファイル形式って何?

画像の保存方法はいくつかあるのですが、ここでは代表的な3つの方法についてご紹介します。それぞれの特性を踏まえた上で、最適な保存方法を選択できるようになりましょう。

色

GIF

最大 8 bit(256色)まで使用可能。イラストやアイコンなど輪郭のはっきりした画像やアニメーション向き。

JPEG

24 bit(1677万色)まで扱うことができる。グラデーションのように色調が連続して変化する画像に適しているので、写真を保存するのにお勧め。PNGのように容量が膨大になることはない。

PNG

グラフィック、文字を多く含む画像、ロゴなど、写真以外を保存するのにオススメ!!

デメリットは、高画質のためファイルの容量が大きくなってしまうこと。メリットは、くっきりしたラインの文字などを扱いやすく、拡大しても質が落ちない。透過画像も使用できること。

8 bit か 24 bit を選択できる場合は、24 bit で保存することをお勧めします。

  • PNG-8・・・GIF と同じ256色を扱うことができる
  • PNG-24・・・JPEG と同じフルカラー1677万色を扱うことができる

素材をダウンロードする時は、大きめのサイズで!!

画像を拡大して使用すると、画質は確実に劣化してしまいます。

素材サイトを利用する場合は、大きめのサイズでダウンロードするようにしましょう。( Retina対応は2倍の幅が必要です。)

ブログに掲載するときは、適切なサイズに縮小してから使用するようにします。

 

ただし、キャプチャー画像を縮小してはいけません!! わずかでも縮小するとラインがぼやけてしまうからです。

キャプチャー画像の場合は、縮小せずに使用するようにしましょう。

適切なサイズに変更しよう

大きめのサイズでダウンロードした画像をそのまま使用すると、容量が大きすぎて読み込み速度が遅くなってしまい、Googleなどの検索順位にも悪影響を及ぼします。

ここでは、画像のサイズを小さくする方法、解像度を下げる方法について説明します。

1. サイズを小さくする

使用したい箇所に合わせたサイズに縮小しましょう。その際、縦横比は変更しないようにして下さい。

下記のサイトを参考に、小さくしてみましょう。

 

WordPress に掲載するのに最適な画像サイズとは、ブログの横幅になります。

このブログで使用している MAG のアイキャッチ画像の横幅は 790px、記事内に挿入する画像の横幅は 690px です。

クリックで拡大表示させたい画像は、大きいサイズのままアップロードします。

 

画像のサイズはテーマによって異なります。今後テーマを変更する可能性があるのなら、少し大きめのサイズにしておくと良いかもしれません。

2. 解像度を下げる

TinyPNGのトップ画像

私も愛用しているパンダのキャラクターがかわいい TinyPNG がお勧めです。

無料で使用でき、PNG 形式や JPG 形式で保存した画像の解像度を簡単に下げることができます。

TinyPNG
 

 

使い方については、こちらの記事で詳しく解説しています。

 

Photoshop をお持ちでしたら『web 用に保存』を選べば、画像サイズから解像度まで一気に変更できますね。

代替テキスト( alt )はとっても重要

代替テキストは、訪問者に直接見えるものではありませんが、検索エンジンにとっては重要な情報です。なぜなら、検索エンジンは画像を読み取ることができないからです。

また、音声ソフトを利用している視覚障害者の方にも、非常に大切な情報となります。

なんらかの障害で画像がうまく表示されない場合も、代替テキスト( alt )に文言を入力しておけば下の画像のように表示されます

エラー表示

 

SEO の観点からも、アクセシビリティの向上の為にも、代替テキスト( alt )は必ず入力するようにしましょう。

まとめ

こちらでは、初めて WordPress に触れる方でも、最低限しておいた方が良い画像の処理の仕方についてまとめました。

  1. ファイル形式の違いを理解して、画像に合った方法で保存する
  2. 画像は大きめのものを用意して、小さいサイズに加工する
    Retina対応 は2倍の幅が必要)
  3. 代替テキスト( alt )は必ず入力する

 

少しでもあなたのブログ作りのお役に立てれば幸いです。

 

 
スポンサードリンク
 
スポンサードリンク

カレンダーWordPressのテーマ『MAG』で最終更新日を表示する方法前のページ

画像圧縮なら『TinyPNG』、使い方とその実力を検証します次のページ黄色い壁を背に喜ぶ女性

関連記事

  1. mistake

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について

    FTPソフト『FileZilla』で転送する際に、『失敗した転送』が発…

  2. Google Search Console
  3. 海に浮かぶ男性

    WEB

    float 解除と clearfix

    要素を float させた場合、次の現象が起こります。 …

  4. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!

    ワードプレス(WordPress)でブログを始める際にまず必要となるの…

  5. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法

    「画像に枠線を作りたい。だけど、どうやって作ればいいの?」そん…

  6. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!

    全くの初心者さんでも分かるように、WordPress でブログを始める…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. 腕を交差させる草原に座った男性
  2. ドアに差し込まれた封筒
  3. 窓
  4. パソコンを前に困っている女性
  5. 歩道を歩く男性
  6. 3匹のカエル
  7. シャットダウン
  8. 郵便受け
  9. Google Search Console
  10. チェーン

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
  2. ケーブル

    WEB

    『お名前.com』で取得したドメインを『エックスサーバー』に紐付けする方法
  3. cyclists

    WEB

    【意外と簡単?!】FTPソフト『FileZilla』のダウンロードから使い方まで…
  4. パン

    WEB

    MAGでトップページのみ、パンくずリストを非表示にする方法
  5. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールし…
PAGE TOP