AIと一緒に、お知らせやブログのような「画像つきの記事を更新するアプリ」をつくる。画面ができて、画像も出て、「いい感じ」と思ったところで、ふと気づくことがあります。
「…なんか、表示が重くない？」
この記事では、その原因になりやすい「画像の大きさ」と、自動で最適化するという考え方をまとめます。私が小さな実験をして、「へえ」と思った数字も載せます。
こんな場面、ありませんか？
- 記事の一覧を開くと、画像がじわじわ読み込まれていく
- スマホだと、画面が真っ白のまま待たされる
- 更新する人が、「画像は小さくしてからアップしてね」と毎回言われている
- 画像を差し替えるたびに、サイズ違いを何枚も作っている
原因の多くは、必要以上に大きい画像を、そのまま配っていることです。
荷物にたとえると、小さな箱に収まるものを、巨大な梱包のまま送っているようなものです。受け取る側（お客さまのスマホ）は、重くて大変です。
どれくらい違うの？私の実験
私は、3200×2000ピクセル（約570KB）のサンプル画像を1枚用意して、出し方を変えてデータ量を測ってみました。
| 出し方 | データ量 |
|---|---|
| 元の画像そのまま | 約570 KB |
| 幅800の大きさに変換 | 約14 KB |
| 幅400の大きさに変換 | 約5.6 KB |
| 幅400・画質を少し下げる | 約3.0 KB |
表示する大きさに合わせるだけで、元の1〜2%くらいまで小さくなりました。
ただし、正直に書いておきます。このサンプルは、私が生成した絵で、色が平らな部分が多いものです。実際の写真だと、ここまでは小さくなりません。数字は「こんなふうに変わるんだ」という目安として読んでください。
「自動で最適化」とは
考え方はシンプルです。
- 元の画像は、1枚だけ保管する
- 出すときに、表示する場所に合わせて、サイズや形式を変える
- 一覧では小さく、記事本文では中くらい、大きく見せる画面では大きく
更新する人は、元の画像を1回アップロードするだけ。サイズ違いを作る手間がなくなります。これが「更新の手間を減らす」の意味です。
さらに、画像の形式（ファイルの種類）も、受け取る側に合わせて軽い形式に自動で変える仕組みがあります。見た目はほとんど同じで、データ量だけ減らせます。
私が実際に試して、驚いたこと
驚き① 「幅だけ指定」したら、画像が切り取られた
「幅を400にしてね」と頼んだら、縦長の帯のように切り取られた画像が返ってきました。縮小されると思っていたので、びっくりしました。
原因は、「枠をぴったり埋める」が初期設定だったことです。「全体が収まるように縮小する」と、はっきり指定すると、思った通りになりました。
こういう「初期設定の動き」は、使ってみないとわかりません。AIに頼むときも、「縦横の比率を保って縮小してほしい」とはっきり伝えるのが大切です。
驚き② 画面の説明と、実際の動きが違った
この機能は、私が読んだ説明では「有料プランで使える」とされていました。設定画面でも、私の無料のプロジェクトでは「有料プランにすると使えます」と表示されていました。
ところが、実際に試すと、動きました。何度やっても再現しました。理由は、私にはわかりません。
これは、小さいけれど大事な学びでした。
「画面に書いてあること」と「実際に動くこと」が違うことがある。 特に、料金やプランに関わる部分は、最新の情報を自分の目で確かめて、あとで請求が来て驚かないようにする。
私は課金はしていません。でも、本番で使うなら、「今動いている」を根拠にせず、サービスの料金ページをよく読むのが安全だと思います。
使う前に気をつけたい4つのこと
① 縦横の比率 片方のサイズだけ指定すると、画像が切り取られることがありました。「全体を収める」指定を使います。
② 元の画像は消さない 変換は、元の画像から作られます。元を消すと、すべてのサイズが作れなくなります。
③ 誰でも見られる？ 公開の置き場所にある画像は、URLを知っていれば誰でも見られます。お客さまの個人情報が写った画像などは、公開の置き場所に置かないでください。
④ 料金・プラン 変換の機能は、プランや使用量で扱いが変わることがあります。最新の情報で確認します。
画像の最適化を、いつやる？
大きく2つの方法があります。
| 出すときに変える（自動） | アップロード前に小さくする（手動） | |
|---|---|---|
| 手間 | 更新する人は何もしなくていい | 毎回、誰かが小さくする |
| 柔軟さ | 使う場所ごとにサイズを変えられる | 一度小さくしたら、大きくは戻せない |
| 注意 | 仕組みの設定・料金を確認する | 元画像を別に残しておく |
私が試したのは「出すときに変える」方です。更新する人の手間を減らしたいときに向いていると感じました。ただし、どちらが正解というより、更新する人の数・画像の枚数・予算で決めるものだと思います。
AIに頼むときの言葉
- 「画像を表示する大きさに合わせて配りたい。一覧は小さく、記事は中くらいに」
- 「更新する人は元の画像を1回アップロードするだけで済むようにしたい」
- 「縦横の比率は保って縮小してほしい。切り取られないか確認してほしい」
- 「画像は公開してもよいものだけ？ 公開したくない画像はどう扱う？」
- 「この機能の料金・プランの条件を、最新の情報で教えてほしい」
私が確かめられていないこと
- 実際の写真での、データ量の変化（私のサンプルは生成した絵です）
- 画像の見た目の劣化が、どのくらい気になるか（画質を下げたときの見え方は、ほぼ同じに見えましたが、細かい比較はしていません）
- 非公開の画像を、期限付きで見せる方法
- 画像がたくさん（数千枚）あるときの、速度や料金
- 実際のスマホ・回線での、体感の表示速度
まとめ
- 表示が重い原因の多くは、必要以上に大きい画像を、そのまま配っていること
- 元画像は1枚だけ保管して、出すときに表示サイズに合わせると、軽く・速く、そして更新の手間も減る
- 私の実験では、元の1〜2%までデータ量が減った（ただし、生成した絵なので、写真では目安）
- 落とし穴：比率の指定、元画像は消さない、公開範囲、料金・プラン
- 「画面の説明」と「実際の動き」が違うこともある。料金は最新の情報を自分で確認する
画像は、小さな工夫で、アプリの印象が大きく変わる部分です。まずは1枚だけ、試してみてください。
もっと詳しく知りたい方へ（技術編・Qiita）
実際に手を動かした記録を、Qiitaに書きました。
Leave a Reply