NOTE 13 / 見た目と音

写真をきれいに見せながら、読み込みを軽くする

完成写真を増やすほど重くなるゲームページ。寸法、形式、読み込む順番を分けて調整する手順です。

表示寸法から、必要な大きさを決める

画像の容量を減らす前に、どこへ何ピクセル程度で表示するかを決めます。小さな一覧カードへ巨大な原画像を配ると、見た目の差が小さいまま転送量だけ増えます。一覧用と完成品を大きく見る用途が違うなら、別のサイズを用意する方法があります。

高密度の画面では表示幅より大きい画像が役立つこともありますが、常に最大の解像度が必要なわけではありません。輪郭や文字のように劣化が目立つ部分を見ながら、実際の表示サイズで比較します。

形式と圧縮率は、一枚で決めない

写真、透過のある道具、文字入りの結果画像では、圧縮後に崩れやすい部分が違います。写真は細かい粒や湯気、道具は輪郭、文字入り画像は小さな文字を確認します。同じ圧縮設定を全素材へ一括適用する前に、代表的な数枚で見比べます。

  • 変換前後のファイルサイズを記録する。
  • 一番明るい部分と暗い部分に、不自然な帯が出ていないか見る。
  • 縁や細い線がにじんでいないか確認する。
  • 原本は編集用、公開ファイルは配信用として区別する。

今見える画像から読み込む

ページを開いた瞬間に見せる写真と、下へスクロールして初めて見る写真は優先度が違います。一覧の下の画像は遅延読み込みを使い、最初の一枚はすぐ表示できるようにします。すべてを一度に取得する作りにしないだけでも、初期表示の負担を整理できます。

確認は手元の高速回線だけで終えません。転送量、初期表示、画像の欠落を別々に見ます。軽くした結果、写真の種類が分からなくなっていれば圧縮しすぎです。容量の数字だけでなく、遊びに必要な情報が残っているかを基準にします。

青パーカー

小さなアプリとブラウザゲームを制作しています。記事はAIを下書き・整理の補助に使い、仕様と提案を区別して編集しています。

編集方針 · 訂正・お問い合わせ

続けて読む

記事一覧 →