画像投稿・画像編集とアップロード方法と注意点

ブログで使う画像投稿や、画像の編集についてです。

ブログでは文字だけでなく、画像も活用するようにしましょう。

様々なソフト、編集・アップロード方法・注意点を解説していきます。

画像をブログで使うメリット・デメリット NEW!

まずはブログで画像を使う場合のメリットデメリットです。

メリット

• デザインが自由になる。
• 綺麗に見える。
• 文章ではわかりにくいものを表現できる。

デメリット

• 画像が多すぎるとページ表示速度が重くなる。
• カスタマイズや画像編集し直す時が面倒。

ブログの種類にも寄りますが、画像をたくさん使うととてもサイトの見栄えが良くなりますし、自由度も増します。

ただ、重い画像を読み込むのには時間がかかるため、時間がページを早く表示させる事に至っては、なるべく画像を使わないに越した事は無いです。
CSSなどで表現できる場合は、なるべく画像を使わないようにすると、表示速度は改善されると思います。

…かと言って画像が無いと見た目が殺伐とするので、バランスが大事になりますね。

画像中心のブログに関しては、惜しみなく使って行ってもOKだと思います。
要は無駄に画像を使わない事が大事って事ですね。

ページの表示が遅くなると、読者の離脱率が上がりますし、ユーザビリティが低下します。
1訪問あたりの単価も下がるのは間違いないでしょう。

また、ページの表示速度は検索エンジン最適化・SEOにも影響してくるため、意識すべき部分です。
SEO的に、ページ表示速度は速いに越した事はありません。

ページ表示速度に関してはこちらの記事にも書いてあるので参考にして下さい。
↓
◎ページ表示速度を改善してアクセスアップ

画像をブログにアップする際の注意点・圧縮のススメ

画像アップする際の注意点を先に書いておくと、ファイル名は必ず半角英数字で作ってUPする事。

日本語でファイル名の名前を書いてWeb上にUPする事はあまり望ましくありませんね。
後々ファイルをFTPで移動する時にエラーが起きやすいです。

あとは、なるべく無駄に大きい画像を使わない事。
また、画像をUPする場合は画像の圧縮もした方が良いでしょう。

画像の圧縮とは、見た目やサイズはそのままで見た目が変わらない位に画質を落として、サイズを落とす事です。

1つ1つ圧縮して使う事で、ページ表示速度に少しずつ影響するはずです。

以下に画像圧縮の例を出しておきますので見ておいてください。

画像圧縮例

実際圧縮した画像例です。

（左：元画像 174KB　　右：60％に圧縮 52KB）

左は元画像で174KBの容量に対し、右側の写真はフォトショップで画質60％で圧縮してます。
殆ど見た目は変わらないですが、容量は1/3以下になってます。

（左：元画像 174KB　　右：10％に圧縮 17KB）

こっちは右の画像を最大限にまで圧縮してみました。
左の元画像に比べて、右側の画像は画質が荒いのがわかるでしょうか？

ここまで画質を落とすと、サイズは1/10になります。
全く画質を気にしないのなら、このくらい圧縮してもいいですね。

ちなみに自分はいつも全ての画像をフォトショップで60％で圧縮してますね。

バナー工房など、下で説明している画像編集ソフトにも画像圧縮機能はあるので使ってください。

「画像　ブログ　圧縮”」で検索

「画像　バナー工房　圧縮”」で検索

画像編集ソフト　Photoshop Elements(フォトショップエレメンツ

画像編集ソフト、Photoshop Elements　フォトショップエレメンツの使い方。
さらにアップロード方法について説明していきます。

フォトショップは画像の切り抜き、合成、画質調整、などの高度な編集が可能です。
ブログで使うための画像の編集に最適のおすすめツールですね。

動画

おすすめの購入方法

最新版を買うなら、価格.comで安いのを買う方法がいいです。
◎価格.com　画像編集ソフト

PhotoshopはLightroomやElementsなど色んな製品があります。
違いは、検索すればすぐにわかると思います。
おすすめはベーシックなElementsですね。

「違い　種類　Photoshop”」で検索

安く買うにはヤフオクで中古を買うのがおすすめです。
ただし、不正規版のものもあるため、買う時は自己責任でお願いします。

「ヤフオク　Photoshop”」で検索

画像編集ソフト　paint.net ペイントドットネット

フォトショップに似たフリーソフトもいくつかあります。

画像編集のフリーソフト、paint.net（ペイントドットネット）などがそうですね。

画像の切り抜きや合成などの編集が可能となってます。

フォトショップほど高度な機能は無いですが、
ブログで使う画像くらいの簡単な編集なら十分だと思います。

ダウンロードはこちらから↓
◎「paint.net ペイントドットネット」をダウンロード

使い方についてはこちらを参考にして下さい。

・機能と使い方 | Paint.NET不完全マニュアル
・画像編集ソフト Paint.NET 使い方（動画マニュアル）

「Paint.NET　使い方”」で検索