Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

画像サイズを制御する

Webアプリケーションやモバイルアプリの画像は、高い解像度と精密な表現を求めるデザイン会社によって作成されることが多いものです。そのため、画像のファイルサイズは大きくなります。また、モバイル/Webアプリケーション以外で利用するためにデータベースに保存していた既存の画像を使用するケースもよくあります。

こうした画像は、ターゲットとなる表示サイズに対して大きくなりすぎます。開発者は、単純に画像のHTML属性の幅と高さを調整することで問題を解決しようとしがちですが、本来は最適な時間で読み込める画像を作成すべきです。

影響

ブラウザにまだキャッシュされていないサイズの大きな画像は、画面の初回読み込み時に直接的な影響を及ぼします。また、画面の読み込みのたびに変更されるバナー画像についてはキャッシュを活用できません。モバイルデバイスではデバイス機能やネットワークレイテンシに制約があるため、この問題が重大化します。

ベストプラクティス

  • 画像サイズを表示サイズまで縮小します。

  • 見た目ではわからない範囲で、画像を最大限圧縮します。

  • 異なるフォームファクタに同じ画像を使用しないようにします。

  • フルサイズ表示とサムネイル表示で同じ画像を使用しないようにします。

  • Was this article helpful?