オンラインでの画像サイズ変更と最適化

素晴らしい写真がたくさんあるなら、きっとウェブサイトでクライアントと共有したくなるでしょう。素敵なスライドショーを作ったり、ギャラリーを作ったり、あるいはページやブログに画像を挿入したりすることも可能です。どのオプションを選ぶにせよ、専門外のコンテンツエディターで必ず遭遇する難題が一つあります。それは、画像のサイズ変更です。.

以下に、画像のサイズ変更に関する役立つ推奨事項をいくつか示します。.

コンテンツに合わせてサイズを調整します

画像のサイズは、常にコンテンツのサイズまたは幅に合わせて変更してください。例えば、コンテンツ領域の幅が650ピクセルに制限されている場合、ページに表示されるのは最大650ピクセルまでなので、画像のサイズを650ピクセル以上にする必要はありません。画像サイズプロパティがコンテナよりも小さかったり大きかったりすると、表示品質が低下します。

画像の解像度をWebに適応させる

ウェブサイトのレイアウトには「1インチあたり」の表示は一切ありません。PPI （1インチあたりのピクセル数）やDPI（1インチあたりのドット数）は、メール、ブログ、ソーシャルメディアでの共有など、画像を編集したりサイズを変更したりする際には、全く関係ありません。印刷や画面表示以外では、画像の特徴や品質の違いを区別することはできません。

これは特にPDFに当てはまります。72dpiを超える解像度の画像を含むPDFをWebで閲覧できるようにすることは避けてください。このような場合、 ImageRecycle PDFオプティマイザーが役立ちます。300dpiの画像を含むPDFを最適化することで、Webで閲覧するのに最適な品質を保ちながら、PDFサイズを98%削減できます。

ImageRecycleで最高のJPGエクスポート品質

Photoshopを使用する場合、Web用JPEG画像は最大20%の圧縮率で保存することをお勧めします。様々なJPEG画質でテストし、自分に最適な画質を見つけるのも良いでしょう。グローバル圧縮の適用は、サイズと画質のバランスが重要です。.

ImageRecycle 画像最適化アルゴリズムでは、処理は全く異なります。ImageRecycle ImageRecycle 現在の画像圧縮率を検出し、それに基づいて画像を最適化します。画像全体に圧縮が適用されないため、以下のテストにはきっと驚かれることでしょう。.

留意点: 元の画像が圧縮される量が少ないほど、最適化され、サイズも小さくなります。.

以下の例では、Photoshopを使用して4枚のjpg画像を品質レベル60% | 80% | 90% | 100%でエクスポートしました
ImageRecycleを使用して画像を最適化しました。サイズの結果がこちらです。品質に関しては、90%/100%のほうが他の2つよりも少し優れています。ここでの教訓は、jpg画像をできるだけ圧縮せずにエクスポートすれば、 ImageRecycle残りの処理をしてくれるということです。

最終画像を最適化する

運営しているウェブサイトによっては、同じ画像が異なるサイズで異なるページに表示されることがあります。これは、スライダー、商品リスト、商品詳細などを備えたeコマースサイトでよく見られる現象です。
リサイズ処理は通常、GDなどのオンラインPHPライブラリによって行われます。元の画像と最終的なユーザー画像の品質とサイズを確認してください。オンラインライブラリやキャッシュジェネレーターを信頼すると、品質とサイズの問題が発生する可能性があります。帯域幅とページ読み込み時間を節約するために、元の画像が既に最適化されている場合（品質、色、圧縮率を微調整するなど）、一部のWeb拡張機能リサイズライブラリを使用すると、それらの最適化がすべて失われる可能性があります。

解決策:

• 最終的なクライアントブラウザに表示される画像に最適化を適用します。画像ごとに、またサイズごとに手動で最適化することも、APIまたはCMS拡張機能 ImageRecycle を使用して最終画像が保存されているフォルダを選択することもできます。その後、そのフォルダに対して自動最適化を実行します。.
• オリジナル画像には、リサイズツールをご利用ください。サーバーのストレージ容量を節約し、画像の操作を高速化できます。また、通常、最終的な表示サイズが1600ピクセルを超える画像は必要ありません。

次はHTML5と<picture>要素

メディアクエリを含むレスポンシブデザイン手法は、Webデザイナーがデスクトップからスマートフォンまで、幅広いデバイスにサイトのレイアウトを適応させ、常に美しく表示するための方法です。ここで問題となるのは表示ではなくパフォーマンスです。つまり、スマートフォンやタブレットではデスクトップの画像が表示され、読み込まれるということです。

その<picture>HTML5要素はこの問題を解決しようとしています。ネイティブに最適化された画像リソースの利点は読み込み時間です。これは特に低速のモバイルインターネット接続を利用するユーザーにとって重要です。<picture>要素を使用すると、ブラウザに HTML 命令を与えるだけで、実際に動的なサイズ変更が可能になります。.

コードの抜粋:

現時点での制限は、正常に動作させるにはChromeの最新バージョン（39）とJavaScriptが必要なことです。近い将来、この技術と画像最適化ツールを組み合わせることで、ウェブサイトの読み込み時間を大幅に短縮できると期待しています。.