カメラ

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 )は必ず入力する

 

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

 

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

関連記事

  1. ガッツポーズする男性

    WEB

    アドセンスのサイト追加審査に一発合格したブログの詳細を公開!!

    2018年10月頃までは、一度アドセンスのアカウントを取得してしまえば…

  2. チェーン

    WEB

    footer を最下部に固定したい場合のコード

    ウェブサイトを制作中に、footer が浮き上がってきて困ったことはあ…

  3. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighter』

    「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができ…

  4. パン

    WEB

    MAGでトップページのみ、パンくずリストを非表示にする方法

    TCDさんのテーマ『MAG』は、デフォルトのままだとトップページにもパ…

  5. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

    ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマ…

  6. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法

    一生懸命作ったブログのロゴ画像。残念ながらそのままアップしても、Mac…



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

wordpress

よく読まれている記事

  1. 窓
  2. 海に浮かぶ男性
  3. ドアに差し込まれた封筒
  4. いいえ、結構です。
  5. 歩道を歩く男性
  6. mistake
  7. 広告
  8. 腕を交差させる草原に座った男性
  9. コントローラー
  10. cyclists

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

アフィリエイトサイトにはDiverもお勧め!!

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

パソコンを覗き込む二人の女子
  1. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の…
  2. Google Search Console

    WEB

    【2019年】『Google Search Console』でプロパティの追加と…
  3. ペンを持つ手

    WordPress

    TCDさんのテーマ『MAG』を愛用する理由
  4. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
  5. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法
PAGE TOP