ウェブ用の画像を保存することは、常に多くの人にとって謎のビットでした。 重い画像をアップロードする（5000px幅で元の画像のサイジング、最適化されていない画像）は、サイトのユーザーエクスペリエンスに問題が生じるだけでなく、SEO,
この記事では、web用に画像を準備する方法について知っておく必要があるすべてのものをカバーするいくつかの部分に分かれています。 ポストの最初の部分では、あなたのFlothemesサイトの推奨画像サイズをリストアップします。 次に、この記事では、webにアップロードする前に、画像の正しいサイズを特定するために、ウェブサイトのさまざまなセクションを検査する方法につい また、画像を正しくエクスポート/保存する方法についても説明しますので、速度に最適化されています。,
最後に、画像を保存するときに正しくタイトルを付ける方法と、ALTタグを使用するとSEOが改善される理由について、画像SEOのヒントをいくつか提 あなたのサイトに既にアップロードされた画像のために、私たちはあまりにも大きく、あなたのサイトを遅くしている画像を識別する方法を紹介し 始めよう！
画像のサイズとサイトのパフォーマンスが重要なのはなぜですか？
最適化されていない画像は、ウェブサイトを遅くします。 遅いwebサイト=悪いユーザー体験、低のチャンスにランクのGoogle検索最終的に以下の問い合わせおります。,
適切な寸法で画像を保存し、web用の画像を最適化することは、いくつかのことを助けることができます：
- 速度–Googleが行った調査によると、webページが5秒以上読み込まれると、モバイルユーザーがそのページを離れる確率は90％増加します。 リサイズを削減できる画像サイズ、ウェブサイトのページになります。
- ユーザーエクスペリエン, これらの画像を最適化し、高速に読み込むことにより、訪問者がサイトに多くの時間を費やしてコンテンツを探索する動機となる、シームレスでスムーズな体験を確保できます。
- SEOのランキング–サイトの速度は、ランキング要因です。 より速くあなたの場所は、よりよい可能性としてはランク付けできる。 Webページを最適化した画像の負荷もっと早くもデスクトップおよび携帯デバイス
- 販売–より速い読み込み時間とより良いSEOは、問い合わせや予約されているのあなたのチャンスを増加させるあなたのサイトにより多くのユーザー,
注：画像サイズについて話すとき、ピクセル単位の画像サイズを意味します。
ウェブとFlothemesに最適なサイズの画像は何ですか？
ウェブに画像をアップロードするときには、使用する画像は何か、ファイルの大きさ、サイト上のさまざまな領域に使用する画像の種類など、考慮す,
画像の使用とタイプ
サイトのさまざまな領域に異なる画像サイズを使用する場合はさまざまなケースがありますが、以下では最も一般的な領域とそれぞれに使用できるサイズオプションについて説明します。 これらは、ユーザーの大半がモバイルまたは13-15インチの平均サイズのいずれかであるデバイス上でサイトを表示することを考慮すると、網膜に優しい、 ただし、サイトを27インチモニター（本当に高解像度）に最適に見せることを目指している場合は、潜在的なクライアントが使用するものではないかもしれないことに注意してください。,
ユーザーがサイトとポートフォリオをどのように表示するかをより正確にするには、Googleアナリティクスを介してサイトにアクセスするために使用されるデバイスを確認し(Audience–Technology–Browser&OS–Screen resolutionに移動します)、推奨サイズを平均的なユーザーの必要な割合に合わせて調整します。
全幅画像
2400x1600px、jpeg、web用に保存、最適化
サイト全体で、画面全体を左から右にカバーする全幅画像を使用する必要があるセクションがあります。, これらの領域のヒーロー画像、全画面スライドショー、バナー画像. 全幅の画像が大きくても小さくてもデバイス全体でよく見えるようにするには、推奨サイズは2400x1600pxです。 注意機器の異なる比率で撮影のできごと画像が切り出された時に見えます。 として推薦しての撮影の幅広いシュートに通常よりもお客様のwebコンテンツのため、作の重要な画像です。,
コンテンツ画像内部
水平–最大幅1500px、jpeg、ウェブ用に保存され、最適化された
垂直–最大幅1000px、jpeg、ウェブ用に保存され、最適化された
サイトページには、画像、テキストエリア、アクションボタンなどからなるセクションがあります。 基本的に、これらは画像が内部コンテンツの一部であるセクションです（”全角ではありません”と読みます）。, このような場合、Flothemesブロックのいくつかのように推奨されるサイズが指定されていない限り、水平および垂直画像については上記の推奨事項に従うことができます。 比率に基づいて、画像を保存するときに高さがそれに応じて調整されます。,ギャラリーを表示する：水平または垂直であるかどうかにかかわらず、彼らはすべて同じ高さが推奨1500pxであることを確認してください
ブログ投稿画像
- ブログ投稿の中にアップロードする画像を準備している場合は、それらがすべて同じ幅であることを確認してください、推奨1500pxそれらが水平または垂直であるかどうかにかかわらず、
注目の画像
注目の画像には3種類があります：肖像画、風景、ヒーロー画像。, 縦長および横長の画像のサイズは、コンテンツ内の画像と同じ推奨サイズに従いますが、ヒーロー画像の推奨サイズは全幅の画像で覆われます。 優れた機能を備えた画像を持つための鍵は、一貫性です。 すべてのポートレートを使用する場合は、同じサイズであることを確認してください。 石積みグリッドを使用している場合、上記のサイズはそれほど関連性がないので、画像の幅が少なくとも1000pxであることを確認してください。,
画像のサイズ変更に問題がある場合は、Flothemes設定の画像のサイズ変更オプションを見て、正しく設定されていることを確認してください。
画像のサイズ変更オプションを確認してください。
ウェブの正しい画像サイズを見つける方法
特定のレイアウトのために、上記の推奨サイズがニーズに合わない可能性があります。 正しい画像の寸法がわからない場合は、ありがたいことに、ウェブサイトの画像を簡単に検査し、サイトの各要素に必要な正しいサイズを特定するのに役立ついくつかの方法があります。,
覚えておくべき重要なことは、網膜デバイスの場合、画像のピクセル密度を倍にする必要があることです。 それが意味することは、網膜デバイスの倍のサイズの画像が必要なので、素敵で鮮明に見えることです。 だから、あなたのサイト上の各セクションの正しい画像サイズを見つけたら、あなたはそれらのサイズを倍増し、だけにしてエクスポートし、あなたのサ
a., 画像サイズ情報拡張機能の使用
サイトの画像サイズを見つける最初の方法は、Chromeの画像サイズ情報拡張機能を使用することです（コンピューターでChromeを使用しない場合は、サイトの作成中に使用することを強くお勧めします）。 拡張機能をインストールすると、このツールを使用すると、サイト上のすべての画像要素の画像サイズを見つけることができます。
あなたのサイト上の画像をチェックアウトし、メモを作り、その後、この知識を使用すると、彼らはテーマのデザインで意図されているように、スペースに合わせて写真を正確に調整することができます。, ただ、網膜の画面では、意図したスペースの倍の大きさにあなたのイメージを必要としない、覚えています。 したがって、750x500pxの画像スペースがある場合、retinaの場合は、WordPress（または他のプラットフォーム）にアップロードするときは1500x1000pxにする必要があります。
たとえば、この拡張子を持つ画像を検査すると、780x520pxで表示されますが、実際のサイズは1560x1040pxです。 これは、画像を検査するときに網膜スクリーンを使用しているためです。 この場合、寸法サイズを使用して画像サイズを選択できます。,
retina以外のデバイスでは、表示されるサイズとサイズは同じままです。 この場合、数字を倍にして、そのサイズの画像をアップロードします。
このツールの主な制限は、背景画像をサイズ変更するために検査できないことです。 多くのテーマでは、画像を表示するときにより柔軟であるため、画像HTML要素の代わりに背景画像が使用されます。 背景画像であるために画像を検査できない場合は、次の方法を使用してサイトの画像サイズを確認できます。
b., インスペクタツールを使用して
ChromeとSafariでは、開発者インスペクタツールを使用して、サイト上の画像サイズを見つけることもできます。 原理は以前と同じで、サイト上のさまざまな要素を検査し、サイズをメモします。 網膜デバイスの画像サイズを倍増し、それらがweb用に最適化され、SEOのために正しくタイトル付けされたら、WordPressにアップロードします。
この方法の制限は、サイトがREM値に設定されたいくつかの応答要素を使用している場合、同じウィンドウでインスペクタを使用すると画像が縮, サイトでもレスポンシブ要素を使用している場合は、大きな画面では大きくなり、他の画面では小さくなります。 サイトをチェックするときは、可能な限り大きな画面を使用することをお勧めします。 いずれにせよ、この方法を使用すると、あなたのサイトのサイズをよく示し、より注意してあなたのウェブサイトに画像を追加することができます。
Chrome
Chromeは開発者ツールを組み込んでいるため、開発者やデザイナーにとってウェブ上で最も人気のあるブラウザです。, 次のビデオでは、サイト上の画像を検査してサイズを調べる方法について説明します。
Firefox
Firefoxでは、chromeと同じように、サイトの画像をチェックできるインスペクタツールが組み込まれています。
Safari
Safariを使用している場合は、インスペクタツールを使用して画像のサイズを確認できます。 開発者ツールを有効にする方法については、次のガ,
これで、サイトのさまざまなセクションに移動して画像のサイズを準備できます。
ギャラリーの場合、画像の高さは一般的に高さによって制約されるため（widthはautoに設定できます）、画像の高さを見たいと思うでしょう。
ブログ記事の場合、画像の幅は幅によって制約されるため（高さは自動にすることができます）、画像の幅に注意してください。,
サイトの残りの要素については、上記の方法を使用して正しい寸法を取得し、サイトに最適な寸法でアップロードする必要があります。
サイト上のすべての要素に必要なサイズがわかったので、すべての画像をサイズに最適化する方法を説明します。 画像のファイルサイズもwebにとって非常に重要です。 アップロード鹿島事業所では、”あるべき姿”重画像をウェブサイトはひずみのサーバ資源を遅く、本サイトおよび効果を負ユーザー体験です。,
ウェブ用の画像の最適化と保存
ウェブ用の画像を最適化して保存するときに考慮すべき点はいくつかあります。 目的に応じて、使用するファイルタイプ、JPG、PNG、またはGIFを検討する必要があります。 SEOの目的のために画像に正しくラベルを付け、適切な色形式（web用sRGB）で保存する必要があります。
目的に応じて、次のいずれかの形式で画像を保存する必要があります。jpg、。gif、または。pngです。 JPG最も共通の形式で保存する場合の画像のためのポートフォリオサイトにていかなければなりませんの中で最も軽いものです。,
ファイル名については、特定の画像またはブログ投稿ごとに適切であることを確認してください。 文字、数字、アンダースコア、およびハイフンのみを使用してください。 英語の文字のみを使用してみてください。 文字から、その他の言語の質問マーク、空間、年号が正しくアップロードが予期せぬ挙動にギャラリーやブログにします。
たとえば、Biltmore Santa Barbaraで自由奔放に生きる結婚式を行ったばかりの場合は、画像にboho-wedding-biltmore-santa-barbara_0001というラベルを付けます。jpgこれは友好的な大いにより多くのSEOでありあなたの場所によりよいランキングを提供できる。,
Lightroomで画像を最適化する
それに直面してみましょう、選択するさまざまな設定と入力する数字の無限の組み合わせがたくさんあります。 ただし、画像形式と必要なファイル画像のサイズがすでにわかっている場合は、はるかに簡単です。
Lightroomでは、エクスポートダイアログを3つの方法で表示できます。
ハイライトとエクスポート
Lightroomライブラリから任意の写真を強調表示/選択し、写真を右クリックするだけです。 ポップアップメニューか,
ファイルとエクスポート
第二の方法は、ファイルに移動することです->エクスポート
キーボードショートカットを使用して
第三に、最も速い方法は、キーボードショートカットを使用することです：
shift+command+e(ε+ε+e)
それはあなたがそこに着く方法は問題ではありません。 これらの作業で選べるのが最も簡単な使い方できると思います、覚えておいてください。,
Lightroom Export Dialog
web用に画像をエクスポートする方法がわかったので、Lightroom exportダイアログで選択する4つのセクションとさまざまなオプションについて説明し、web用に最適化された画像をエクスポートできるようにします。
1. ファイルの名前付け
各エクスポートには、独自の名前変更の設定があります。 デフォルトのオプションに固執すると、画像は元のファイルと同じ名前になり、JPEG画像として保存されます。, ただし、”名前の変更”ボックスにチェックを入れ、Lightroomがエクスポートした画像をカスタマイズするために提供する多くの名前の変更テンプレートのいずれ ファイルの命名では、カスタムテキストがブログ投稿のタイトルまたはブログ投稿のキーワードに密接に関連している”カスタム名–シーケンス”に画像ファイル名を変更しました。
2. ファイル設定
で、画像形式がJPEGに設定されていることを確認してください。 これは最もwebに優しいオプションです。 あなたの品質は65未満でなければなりません。, 通常は75に設定します。 あなたの色空間はsRGBである必要があります。 これはwebで使用されるカラースペースなので、最適にレンダリングされます。 チェックボックス”Limit File Size to:”をオンにしないでください。 ることをチェックボックスが減少ファイルの品質できます。要約すると、画像を保存するときには、次の設定を使用します。
- 75％品質
- 。jpegフォーマット(.ロゴおよびアイコンのためのpng）
- sRGB色
3. 画像のサイズ変更
チェックボックスに合わせてサイズ変更をオンにし、幅を選択します&高さ。, ボックスW：H：W（ピクセル単位の幅）を必要な値に指定します（ブログ記事の場合は1500px、スライドショーの場合は2880）。 H（height）の値を空白のままにすると、自動サイズ変更に設定されます。
ギャラリーの場合、Wを空白のままにして、h（Height）を1500pxに設定することができます。
上記のサイズはすでにretinaデバイス用に最適化されています。
4. Output Sharpening
“Sharpen For”の横にあるチェックボックスにチェックを入れ、”High”にする量を選択します。
画像をエクスポートし、画像をエクスポートするときはいつでもこのプロセスに従うことができます。,
画質設定
写真家の夢の世界では、常に最高品質で画像をエクスポートします。 現実には、我々は最高品質の輸出が必要ではないことがわかります。 Webサイズでは、品質の違いはしばしば知覚するのが難しく、それは我々が大幅にファイルサイズを減らす、わずかに品質を減らすことができることを意
画像が柔らかくない限り、あなたのクライアントはあなたが撮った画像とあなたのサイトに表示されている画像の違いを知らないでしょう。
これは画像の色にも適用されます。, それは画質を台無しにしない限り、すべての人の画面が異なって校正されるので、ブラウザと選択した編集ツールで画像の間の小さなカラーバリエーションを気にすることは、時間の無駄です。
品質スケールの上端には、リターンが減少しています。 75％と100％の品質設定の間の知覚品質の違いは見にくいですが、ファイルサイズが大幅に増加します。
上記の結果を考えると、65-75品質のエクスポートを選択します。, これは、品質と最適な画像ファイルサイズの正しいバランスを打つ。
ファイルの名前を変更し、ウェブ用にエクスポートし、ウェブ用に保存すると、ウェブ用に最適化された画像がいくつか得られます。
ボーナスステップ：あなたのサイトにアップロードする前に画像を最適化
あなたが大幅にあなたの画像から余分なデータを削除し、ファイルサイズを減らすことができる一つの最後のステップがあります–私たちは、JPEGminiやTinyJPGなどのツールについて話しています。
これらのツールは、画像をさらに最適化するのに役立ちます。, いずれかを選択し、それを介してあなたの画像を実行します：
- JPEGmini–このアプリは、あなたの画像を圧縮し、画像の品質に目に見える影響を与えることなく、そのファイルサイズを小さくすることができます。 あなたがProバージョンを持っている場合は、エクスポート時に自動的にこれを行いますLightroomの拡張機能があります–任意の写真家のための強くお勧めのツーTinyJPGまたはTinyPNG–tinyJPGまたはtinyPNGを介して画像を実行して、画像をさらに圧縮することができます。 しかし、2つの制限があります。, このツールの無料版では、一度に20枚の画像しか圧縮できず、画像あたりのファイルサイズは5MB未満にする必要があります。
これは、あなたのサイトの速度を速く保つために、高速なweb最適化された画像を作成する最後のステップになり、画像は見栄えが良くなります！
あなたのWordPressサイトの画像を最適化する方法については、この包括的なガイドを読んで、より多くを学びます。
画像SEO
今、あなたはあなたのサイトに最適化され、アップロードされた画像を持っていること–今、あなたはALTタグを追加したいと思うでしょう！ これはSEOの目的のために最適化された画像を作成する最後のステップです。, ALTタグは、検索エンジンが画像を読むために使用するものです。 それらがなければ、あなたのイメージはウェブ上ではほとんど存在しません。
あWordPressできるお-メディアライブラリー後のアップロード、ラベルの各イメージです。, あなたはすぐにこれを行うことができます一つの素晴らしいプラグインはWPメタSEOです,追加されたとき、あなたはWPメタSEOに行くことができます>画像情報とそれが存在しない任意の画像にALTタグを追加します,一度完了したプラグインは、非活性化することができます:
ALTタグを自動的に追加するプラグインもいくつかあります。 ランク数学は、単にそれをインストールし、それが自動的に画像の説明、またはタイトルからのアップロード時にALTタグを追加し、このための良いプラグ,
より多くのヒントやトリックを発見し、あなたが検索結果であなたの画像を最大限に活用することを確認するには、この画像SEOガイドをお読み
だから、それは人々です。 あなたのウェブサイトの画像を最適化する3つのステップ。
あなたの画像の寸法を考え出すことから始め、その後、webのために正しく保存し、適切なタイトルを追加し、そのサイズを最適化します。 最後に、wordpressを介してSEOを改善するためにaltタグを追加します（すべてのコンテンツ管理システムにALTタグを追加したり、ドキュメントを参照して方法,
最適化されていない画像を見つける
すでにサイトに画像をアップロードしており、ページが遅くなっている画像を見つける方法を知りたい場合は、次のビデオをチェックしてください。 GTMetrixやPingdomなどのツール、またはブラウザコンソールを使用すると、webには大きすぎる画像を簡単に見つけることができます。
速度のためにサイトを最適化する方法の詳細については、この便利なガイドをチェックしてください。
フロテーム
あなたに力を与える
Leave a Reply