Become a HubSpot power user — join us for HubSpot Training Day 2017.

COS-General

画像の自動サイズ変更とは何ですか?

更新日時 October 21, 2016

画像の自動サイズ変更は、デフォルトで、すべてのHubSpotポータルで有効になっている機能です。この機能を使用すると、画像を最適化し、ブラウザーの読み込み時間を短縮し、Google PageSpeedのスコアを改善することができます。

画像の自動サイズ変更では、画像の元のサイズが大きい場合に、ウェブサイト上に表示するサイズに応じて画像を最適化することができます。これにより、ブラウザーがページ上のその画像を読み込むのにかかる時間を大幅に短縮できます。たとえば、ユーザーがアップロードした画像のサイズが5000×5000ピクセルで、ウェブサイトでは500×500ピクセルでしか表示されない場合、ブラウザーではまずその画像全体をダウンロードしてから、実際に表示されるサイズに縮小するという余分な処理が発生します。画像の自動サイズ変更により、ページのHTMLでheight(高さ)とwidth(幅)の属性が指定されている場合、ページを初めて読み込むときに画像のサイズが自動的に変更され、サイズ変更済みの画像のキャッシュがCDN上に保存されます。2回目以降にページが読み込まれる際には、ページ上の画像の表示に影響しない不要なコンテンツをエンドユーザーがダウンロードする必要がなくなります。

実際の例で、どのようになるか見てみましょう。

適用前:

ユーザー追加画像
ユーザー追加画像

適用後:

ユーザー追加画像
ユーザー追加画像

この機能があっても、オフラインで画像のサイズを変更しておく必要がありますか。

はい。画像のサイズを表示サイズに変更しておくことで、表示の際に処理するよりも画像の品質が良くなります。Photoshopや、OS Xのプレビューアプリでも非常に優れた、画像のサイズを変更するアルゴリズムを備えていて、元のサイズより非常に小さな割合に縮小しても、本当にきれいに表示されます。ファイルマネージャに組み込みのエディターを使用して画像のサイズを変更した場合も、良い結果が得られます。

Retinaへの対応はどうなっていますか。

高精細ディスプレイ(標準的な視距離にもよりますが一般に200dpiを超えるもの)のデバイスで、ネイティブの解像度で画像を表示すると、非常に小さく表示されます。Safariなど、Retinaディスプレイ対応のブラウザーでは、比率に応じて画像が大きく表示されますが、それにより画像がぼやけることがあります。この問題を解消する1つの方法は、Retina以外のディスプレイで表示される解像度の2倍の解像度の画像をアップロードしておいて、これをブラウザーでサイズ変更することです。これは、あまり優れた方法ではありません。ほとんどのユーザーが必要以上に大きな画像をダウンロードしなければならないからです(画像サイズが2倍なので、バイト数は4倍になります)。Retina用に意図的にサイズを2倍にした画像には、noresize(サイズ変更なし)のパラメータをつける方法がありますが、もっと良い方法があります。Retina.jsというちょっとしたJavaScriptで、Retinaディスプレイの場合にのみ、Retina用の画像に置き換えます。CSSを使用して同じ処理を行うこともできます。これについては、Apple社の開発者向けの記事で詳しく説明されています。

画像の自動サイズ変更を無効にすることはできますか。

場合によっては、この機能を無効にしたい場合もあるでしょう。無効にするには、画像のURLにnoresizeというクエリパラメータを加えます