WordPressに限らずアメブロなどの無料ブログやFacebook・Twitterなどに使う画像についての提案です。
ただある写真をアップロードして表示するというのは、あまり感心いたしません。
スマホで撮った写真でも今は2MBを超える時代、大きさやファイルサイズには気をつけたいものです。
WiFiが5Gになった今日でも接続速度が常に速いということはありませんから大きいサイズでばかりアップロードすると表示速度はどんどん遅くなるばかりです。
今は高額なアプリなどがなくても無料のWEBサービスでリサイズやファイルサイズを抑えることができます。
今回は、そういったことについて紹介させていただきます。
クイックナビ
サービス /ブログ /プライバシーポリシー /お問い合わせ
WordPressでの画像のリサイズ
WordPressであれば他社サイトにいかなくてもリサイズや切抜き程度はできる機能があるのです。
意外と知らない方も多いみたいですが・・・
WordPressでの記事が表示されるスペースは、サイドバーが右か左にある場合は、700px～800pxほどです。
ということは、それ以上に大きい画像って詳しく見せない場合は、必要ありません。
というのも画像が大きいと表示するまでにかかる時間も多くかかります。
であれば、表示できる大きさにすることでファイルサイズを小さくすることができてファイルサイズが小さいので表示もその分早くなるということなのです。
上記画像は、Pixabayからダウンロードした画像ですが、そのまま使うにはあまりに大きいサイズの画像なのです。
これをリサイズした時にどのくらいのファイルサイズになるのか？
元画像は、3000px X 2121px でファイルサイズは、362kbです。
横幅を750pxにしてファイルサイズは、98kbになりました。
操作は、数字を入れるだけなので簡単です。
詳しくは、下記の記事を参考にしてください。
画像加工サイトでのカスタマイズ
Pixlrなどのサイトで画像加工ができるサイトがあります。
簡単に使えることとWindowsでもMacでも同じように使えるので別の説明がいらないことですね。
先ほどと同じようにリサイズなども簡単に出来ます。
OGP画像の元画像 1400px X 933px
上記画像をPixlrで開きます。
Pixlr Xをクリックして左側にある画像を開くというボタンをクリックしたら画像を選択して上記画像になります。赤枠のプロパティをクリックしたら次へ
「画像サイズを変更」ボタンをクリックして次へ
幅の数値を1200に変更します。
比率をキープした状態なので1200px X 800px になります。
OGP画像のサイズである1200px X 630px にするためには切り抜き(トリミング)する必要がありますね。
1番左の赤丸のトリミングのアイコンをクリックします。高さを630に設定したらドラッグアンドドロップで上下に選択範囲をスライドさせて1番いいと思ったところで「申し込む」ボタンをクリックした後に「セーブ」ボタンをクリックします。
ファイル名とファイルタイプ・品質を確認してOKなら「ダウンロード」ボタンをクリックします。
WindowsでもMacでも特に触ってなければダウンロードフォルダに画像が保管されているはずです。
画像を指定サイズに合わせて調整するには、画像サイズ変更と画像をカットする方法を知る必要があります。最低限この２つだけ覚えてください。
詳しくは、下記の記事を参考にしてください。
WordPressでのファイルアップロードサイズの変更
WordPressは、基本的にアップロードファイルサイズが2MBとなっています。エックスサーバーやさくらインターネットのサーバーでは違うこともありますが・・・
アメブロもアップロードできる画像のファイルサイズは、2MBだったと思いましたが・・・
WordPressは、すべてのファイルサイズが2MBなのです。画像だけでなくテーマやプラグイン・PDFファイルについてもです。
筆者としては、5MBくらいあってもいいと思うのですが、テーマやプラグインについてはFTPを使えばファイルサイズの制限を受けることはありませんが、画像やPDFファイルについてはアップロードできますがデータベースには入らないので詳しくない人ではちょっと使いづらいですね。
基本的には、PHPの設定ファイルで決まっているのでそれを書き換えると大きいファイルでもアップロードOKになります。
しかし、それをやる前にセキュリティが大丈夫なのか確認してください。
乗っ取りされるとメールの踏み台にされたりよからぬファイルをアップロードされたりします。
詳しくは、下記の記事を参考にしてください。
記事の表示速度を考える
GoogleのサービスでPageSpeed Insightsってご存知ですか？
ページの表示時間がわかるのですが、それほど表示時間って大事なんです。
HTMLでページを作成していた頃は、7秒で開かないサイトはダメだしされていましたね。
1番手っ取り早いのは画像のファイルサイズを抑えることです。
できるだけMB(メガ)サイズの画像をなくすことです。
それは、WordPressだけでなくアメブロでも同じことが言えます。
やってるサイトとやってないサイトでは開くスピードも違います。
表示速度にも関心をもってファイルサイズを抑えるということを1度考えて実践することも大事です。
アメブロ関連ツール
WordPress Tool
アメブロ 目次付きテンプレート使っている記事紹介
ブログをはじめる前にしておくこと
記事を書くときに気をつけること
- レスポンシブデザインって何？
- 端末やモニターによる見え方の違い
- SSLにしたときのリンク先アドレス
- 入力方法について
- 音声入力と辞書登録について
- タグやハッシュタグの使い方
- アメブロやFC2ブログでのスマホ表示
- 初心者が今すぐできるブログ記事タイトルの５つの改善ポイント
- ブログの中でOGP画像って何？
- アメブロ記事の文字数制限について
- アメブロで記事下に表示したい項目
- アメンバー記事ってどんな時に使うのか？
記事構成について
ソーシャルメディアとの連携
ワードプレスのテーマを知る前にブログのことも知っておいてほしいと思います。
クイックナビ
サービス /ブログ /プライバシーポリシー /お問い合わせ
アメブロ用目次付きテンプレートを無料で配布しています！
YouTubeチャンネル登録お願いします！
また、ALiSには、ブログ全般に関することを掲載しています。
アメブロの記事の増加とともにメルマガもスタートします。スタートは、2月の予定なので事前に登録していただけると幸いです。
アメブロやWordPressに関するお問い合わせは、下記よりお気軽に・・・
