あなたの画像をオンラインで最もよく提示する方法
公開: 2013-12-18
あなたが持っているウェブサイトの種類が何であれ、あなたのコンテンツはテキストと画像の混合物である可能性があります。 写真家、アーティスト、その他のクリエイティブにとって、ウェブサイト上の画像はおそらくコンテンツの最も重要な部分を形成しているため、それらを適切に表示する方法を知ることが重要です。
もちろん、WordPressダッシュボードを介して写真やグラフィックをアップロードすることはできますが、Webサイトの読み込みが速く、読みやすく、検索エンジン向けに最適化されていることを確認したい場合は、これを読むとよいでしょう。 Webサイトで画像を使用する場合のベストプラクティスの短いガイド。
画像の保存とアップロード
WordPressを使用すると、巨大な画像をコンピューターから直接アップロードして、ブログの幅に合わせて自動的に表示することができますが、未処理の画像をアップロードすることはお勧めしません。
どのWebブラウザーでも、コードで指示されている場合、実際よりも小さいサイズで画像を表示できますが、実際のファイルサイズを縮小することにはなりません。 全幅と高さの50％で表示される500kbの画像は、引き続き500kbになります。 HTMLやWordPressに精通していないブロガーは、画像が画面に大きく表示されないため、すぐにダウンロードできると思い込んでいる可能性がありますが、必ずしもそうとは限りません。
画像のサイズを確認するには、ブログ内の画像を右クリックまたはControlキーを押しながらクリックし、メニューから[画像の表示/開く]を選択します（使用しているブラウザによって表現が若干異なります）。 開いた画像がブログに表示されている画像よりもはるかに大きい場合は、画像のサイズが適切でないことを意味します。
画像が多いブログを持っていて、アップロードする前に画像のサイズを変更しない場合、Webページの合計サイズが不必要に大きくなる可能性があります。
画像をアップロードする前に、画像のサイズを変更して圧縮するために、さらに数分かかる価値があります。 これは、Photoshopまたは使用している他の画像編集ソフトウェアで簡単に実行できます。 PicMonkeyやDynamicDriveのImageOptimizerなどの無料のオンラインツールを使用することもできます。
画像のサイズを手動で変更すると、圧縮を完全に制御でき、アップロード時間が大幅に短縮されますが、必要に応じて、WordPressがアップロードごとに自動的に生成するサイズ変更された画像を使用することもできます。 投稿に画像を挿入する場合、フルサイズ、大、中、またはサムネイルサイズの画像を挿入するオプションがあります。 これらのサイズは、 [設定]>[メディア]でブログのデザインに合わせて編集できます。 この方法を選択すると、元のフルサイズの画像を誰でもWebサイトから自由にダウンロードできるようになります。これは、写真家やイラストレーターにとって最適なオプションではありません。
画像の最適化と使いやすさ
画像のサイズが適切で、ページの読み込み時間に合わせて最適化されていることを確認するだけでなく、SEO（検索エンジン最適化）用に画像が適切にマークアップされていることも確認する必要があります。 SEOを使用すると、検索エンジンがサイトを見つけてインデックスを作成しやすくなります。優れたSEO手法を利用しているサイトは、最適化されていないサイトと比較して、検索エンジンの結果ページの上位に表示される可能性があります。
SEOの完全な議論はこの記事の範囲を超えています（とにかく多くのWordPressテーマは箱から出してすぐにSEOに適しています）が、画像メタ情報を最適化することはあなたのオンサイトSEOを少し後押しする簡単な方法ですGoogle画像検索やその他の画像ベースの検索エンジンを介して人々があなたのサイトを見つけるのを助けることができます。
特に画像が重要な情報を示している場合は、画像を適切にマークアップすることも使いやすさにとって重要です。 画像が読み込まれない、または表示されない場合（インターネット接続が遅い、画像がオフになっている、または視覚障害のあるユーザーの場合）、代替テキストの説明を提供する必要があります。
1.ファイル名
まず、画像を保存するときは、わかりやすいファイル名が付いていることを確認してください。 IMG_013445.jpgという名前の画像を残したり、カメラから外れたときに画像が何であれ、検索エンジンに何を描いているかについての手がかりを与えることはできません。 ハイフンで区切った適切な説明キーワードを使用します（例：children-playing-ocean.jpg）
2.代替テキスト
メディアアップローダーを介して画像をアップロードする場合、WordPressにはファイルの説明用のいくつかのフィールドがあります。 これらは空白のままにすることができますが（そして多くのブロガーは時間を節約するためにそうします）、入力するフィールドが多いほど、SEOと使いやすさが向上します。 これらの中で最も重要なのは、「代替テキスト」の略である代替テキストです。
これは、画像がオフになっている場合やその他の理由で表示できない場合に表示されるテキストであるため、画像の説明として機能する必要があります。 検索エンジンもこのテキストを読み、それを使用して、ページの内容と、リストのどこにサイトを配置するかを決定します。 たとえば、テキサスを拠点とする結婚式の写真家の場合、すべてのブログ画像の代替テキストに、「結婚式の写真家」や「結婚式の写真のテキサス」などのキーワードを含む多くの説明テキストが含まれていることを確認する必要があります。 警告されますが、ブログのテキストと同様に、画像の説明にキーワードを詰め込みすぎないことが重要です。
時間を節約するために、同じ代替テキストをすべての画像にコピーして貼り付けたくなるかもしれませんが、理想的には、各画像に適切に説明する一意の代替テキストが必要です。
3.画像タイトル
画像のタイトルは代替テキストに似ていますが、目的が少し異なります。 タイトルは、画像に代替情報を提供するのではなく、追加情報を提供する必要があります。 画像のタイトルは、画像にカーソルを合わせるとポップアップボックスに表示される「ツールチップ」のテキストです。 このテキストは、使いやすさとSEOの両方にとって重要であり、画像または画像がリンクされている場所に関する迅速で関連性のある情報を提供する必要があります。
画像のタイトルは代替テキストとは少し異なり、画像ごとに一意である必要があります。
4.画像キャプション
キャプションは、通常は画像の下に表示されるテキストであり、追加の説明または補足テキストを提供します。 キャプションの使用はオプションですが、画像に関する追加情報を提供したり、別のサイトの画像を使用している場合はソースを引用したりするのに便利です。 キャプションは、アートギャラリーの展示会の情報ラベルのようなものだと考えてください。
画像リンク
デフォルトでは、画像をページまたは投稿に挿入すると、WordPressはその画像だけを含む新しいページにリンクします。 これには本当の理由はなく、SEOの観点からサイトに損害を与える可能性さえあります。
また、ユーザビリティの大きな問題になる可能性もあります。ユーザーが画像にカーソルを合わせてリンクであることがわかった場合、ユーザーは画像が有用な情報のあるページにリンクしていると見なす可能性があります。 これらの画像のみのページをクリックすることは、訪問者にとって時間の無駄であり、訪問者を失う可能性さえあります。
この問題を解決するには、WordPressで画像をアップロードするときに、実際に特定のページにリンクする場合を除いて、[リンクURL]フィールドとして[なし]を選択するだけです。 これを行う場合は、画像のタイトルまたはキャプションを使用して、画像がリンクしている場所を示してください。
画像の配置
画像がSEOに最適化され、ユーザーフレンドリーであることを確認するだけでなく、美的および読みやすさの理由から、画像がテキスト内にどのように収まるかを考えることも重要です。
インライン画像（メインの列よりも小さいため、テキストが列を折り返す）、全幅の画像、または両方の組み合わせを使用することをお勧めします。 避けるべきことは、全幅ではないスタンドアロンの画像、またはさまざまな幅の一連の画像を使用することです。これは、専門的で魅力的ではないように見えるためです。
これを実現するには、ポートレート画像がランドスケープ画像と同じ幅であることを確認する必要があります。 画像の高さに注意してください。画像が高すぎると、小さい解像度の画面でオーバーフローする可能性があります。 これにより、ユーザーは画像全体を表示するためにスクロールする必要がありますが、これは避ける必要があります。 画像が大きすぎて縦向きで全幅表示できない場合は、2つ以上の縦向き画像を並べてコラージュすることができます。
インライン画像は、コンテンツに少し多様性を与え、テキストの大きな壁を壊すのに役立ちます。 また、全幅での表示に適していない小さい画像や狭い画像にも適しています。
インライン画像を使用する場合も、視覚的な一貫性を保つために設定された幅を決定するのが最善です。 これより広い画像はテキストを圧縮しすぎて読みにくくなるため、これはテキスト列の幅の半分以下にする必要があります。
インライン画像は、左マージンを壊して読みやすさを低下させないように、常にテキストの左ではなく右に揃える必要があります。
画像でブログを美しくする
画像を使用することは、興味深く視覚的に魅力的なブログを作成するために重要であり、クリエイティブビジネスのマーケティングに関してはさらに重要です。
最適化され、適切に表示された画像については、この記事で説明したヒントに従ってください。ウェブサイトは見た目が美しいだけでなく、すばやく読み込まれ、読みやすく、検索エンジンにとって魅力的です。 ハッピーパブリッシング！