写真の準備と使い方
HEIC写真をWebPにして、ブログやWebサイトに載せるには
iPhoneで撮った写真を記事に使おうとしたら、HEICを選べなかった。何枚も載せたいけれど、写真の容量が気になる。そんなときは、公開する分だけWebPに変換すると、掲載先に合わせて画像を用意できます。ここでは、写真のサイズと画質をどう決めるか、変換した画像のどこを見るかを、ブログに写真を載せる流れに沿って説明します。
HEICとWebPは、写真を使う場面で選ぶ
HEICはiPhoneの写真などで使われる画像形式です。写真アプリでは普通に見えていても、Webサイトの投稿画面が同じ形式を受け付けるとは限りません。WebPはWebページ向けの画像として使われる形式で、写真の見た目を確かめながらファイル容量を調整できます。HEICをWebPにする目的は、撮影した写真を掲載先で扱える画像に整えることです。
たとえば、旅行記に風景写真を何枚も載せる、お店のメニューを写真付きで紹介する、制作した作品をポートフォリオに並べる、といった場面で候補になります。ただし、投稿先がJPGやPNGだけを指定しているなら、WebPにしても登録できません。最初に、そのサイトの対応形式と画像サイズの案内を確認してください。JPG指定ならHEICからJPGへの変換を使えます。
HEICとWebPのどちらが常に小さい、という決まりはありません。HEICも圧縮された写真なので、同じ寸法のまま高い画質でWebPにすると容量が増える場合があります。また、写真の原本をWebPへ置き換える必要はありません。HEICは保管し、WebPは記事や商品ページに使うコピーとして分けておくと、後から別のサイズが必要になったときに作り直せます。
写真の幅は、ページで見せたい大きさから決める
最初に考えたいのは画質の数値よりも、掲載する写真の寸法です。撮影したままの大きな画像を小さく表示する場合、画面では使わない細部まで保存していることがあります。ブログの本文幅、一覧のサムネイル、クリックして拡大する写真では、必要な画素数が異なります。掲載先に推奨サイズがあるなら、それを出発点にしてください。
たとえば、4032×3024pxの横長写真を幅1600pxに縮め、縦横比を保つと、出力は1600×1200pxになります。画素数は約1,219万から192万へ減りますが、ファイル容量が同じ割合で減るわけではありません。写真の模様や圧縮設定も影響するからです。幅1600pxは計算例であり、どのサイトにも最適な値ではありません。
このツールでは、変換設定の「画像リサイズ」に幅または高さを入力できます。横長の写真を本文幅に合わせるなら、まず幅だけを入力し、「アスペクト比を維持」をオンにします。縦長写真も交じる場合、幅をそろえると縦の長さに大きな差が出るので、必要に応じて高さも含めた上限を考えます。縦横比を維持して両方を指定すると、その範囲に収まる寸法になります。指定した枠に合わせて写真を切り抜く機能ではありません。
記事内の小さな写真と、拡大して見せる作品写真を同じ設定で作る必要もありません。拡大表示に使う画像まで小さくすると、作品の質感が分かりにくくなります。逆に、小さい原本を数値だけ大きくしても、撮影時に写っていない細部は増えません。まず掲載用途を分けてから寸法を決めると、画質調整のやり直しを減らせます。
画質は数値だけで決めず、写真の一部分を見比べる
画質の初期値は90です。まずはこのまま1枚変換し、ファイル容量と見た目を確認してみてください。もう少し容量を減らしたいときは、同じ寸法で画質を80に下げるなど、一度に変える条件を一つにすると違いが分かります。この数値は、元の画質を何％残すか、容量を何％にするかを示すものではありません。
確認する場所は、写真の内容によって変えます。風景なら木の葉や草、空のなだらかな色の変化。料理なら細かな具材や皿の縁、湯気や光の反射。商品写真なら布の織り目、素材の質感、ラベルの小さな文字を見ると、圧縮の影響を見つけやすくなります。どの部分が大事かを決めて比較すれば、写真全体を何となく眺めるより判断しやすくなります。
変換後のプレビューは、向きや構図を素早く確認するための表示です。このページでは最大640pxのプレビューを作るため、大きな画像の細部を判断するときは、ダウンロードしたWebPを対応する画像ビューアで開いてください。実寸に近い表示で文字や輪郭を確認し、さらに実際の掲載サイズでも見ます。拡大したときだけ分かる差と、記事を読む大きさでも気になる差を分けて考えられます。
この画面には、WebPの可逆圧縮を選ぶ設定はありません。画質を100にしても、HEICの情報をすべて保つ原本保存用の変換にはなりません。画像がぼやける場合は画質を上げて比べますが、縮小しすぎて細部が消えているなら、先に寸法を見直してください。画質だけを上げ続けても、必要な画素が足りなければ改善しません。
写真を選んでから保存するまでの手順
上の選択欄からHEICファイルを追加するか、ファイルをドラッグしてください。複数枚を選べますが、最初は掲載予定の写真から代表的な1枚を試すと設定を決めやすくなります。暗い室内の写真と明るい屋外の写真では、同じ画質でも仕上がりや容量が異なることがあります。条件の違う写真を大量にまとめる前に、それぞれ少数ずつ確認すると安心です。
出力形式がWebPになっていることを確認し、必要なら幅・高さと画質を変更します。サイズを変えないときは幅と高さを空欄にします。撮影情報をどう扱うかは、次の項目で説明する「Exif/メタデータを保持する」で選べます。設定後に「変換を開始する」を押すと、ファイルごとの処理状況が一覧に表示されます。
変換が終わったら、一覧に出る変換前後の容量とプレビューを確認して保存します。複数の結果はZIPにまとめることもできます。ZIPはファイルを一つにまとめる入れ物なので、投稿先には通常、展開した中のWebP画像を指定します。ZIPのまま画像選択欄へ入れても、写真として登録できるとは限りません。
設定を変えて試し直すときは、元のHEICから再変換します。作成したWebPをさらに読み込み直して圧縮すると、前の処理で失われた細部が戻らないまま、もう一度圧縮をかけることになります。使いたい結果をダウンロードしてからページを閉じてください。選択中の画像や変換結果は、このサイトのアカウントへ保存されるものではありません。
公開する写真では、位置情報と写り込みも確認する
写真には、目に見える画像のほかに、撮影日時、カメラ情報、撮影場所などが記録されている場合があります。これらを扱う設定が「Exif/メタデータを保持する」です。初期状態ではオンになっており、読み取れた情報を可能な範囲でWebPへ引き継ぎます。記録用に日時を残したい写真と、不特定多数に公開する写真では、必要な情報が違います。
自宅や生活圏の写真を公開するなど、撮影場所を引き継ぎたくない場合は、この設定をオフにしてから変換します。一方、オンにした場合でも、HEICのすべての情報が元どおり残るとは限りません。原本と同じ撮影記録が必要な用途では、HEIC自体を保管してください。保存したWebPに何が残っているかは、必要に応じてExif確認ツールでも確認できます。
メタデータを引き継がない設定にしても、写真に写っている住所、名札、車のナンバーなどは消えません。WebPへの形式変換には、写り込みを隠したり背景を切り抜いたりする機能はありません。公開前に写真そのものを見直し、必要な編集を済ませてから掲載用の画像を作ります。
このツールで選択した画像は、変換のためにサーバーへ送信せず、ブラウザ内で処理します。その後、ご自身でブログや商品ページへ画像を登録すると、その掲載先へファイルが送られます。ここでの変換と、投稿先での公開は別の操作です。公開範囲や画像の扱いは、掲載するサービス側でも確認してください。
HEICを読み込めないときに切り分けること
このツールのHEIC読み込みは、利用中のブラウザがその画像を開けることを前提にしています。端末の写真アプリで表示できても、同じ端末のブラウザ内で読み込めるとは限りません。ファイルを追加した直後に失敗する場合は、画質を下げる前に、HEICの読み込みに対応する環境かを確かめてください。画質設定は読み込み後の圧縮に使うため、入力形式への対応は変わりません。
まず、元のファイルが写真アプリなどで開けるか確認します。クラウド上だけにある写真なら、原本の取得が完了しているかも見直してください。HEICを開ける写真ソフトからJPGやPNGで書き出し、その画像をJPG→WebPまたはPNG→WebPで変換する方法もあります。JPGを経由すると圧縮が一段増えるため、細かな文字や模様が重要な写真では、中間画像の見た目も確認します。
数枚は変換できるのに大量の写真で止まる場合は、枚数を減らして試してください。ブラウザ内では、圧縮されたファイルを画素に展開して処理するため、元ファイルの容量より多くのメモリを使います。リサイズを指定していても、元画像の読み込みは必要です。何度も同じ大きな組み合わせを実行するより、写真を分けて、どのファイルで失敗するか確認するほうが原因を絞れます。
また、HEICには写真の表示以外の情報が含まれることがあります。このツールが出力するのは1枚の静止画で、Live Photosの動きやポートレートの深度情報を移す機能ではありません。撮影後の編集機能も含めて残したい場合は、WebPだけを保存して元の写真を削除しないでください。
ブログへの掲載後に、もう一度確認したいこと
WebPを保存できたら、記事の下書きに実際に貼り付けます。手元のプレビューで問題がなくても、投稿先が画像を縮小したり再圧縮したりすると、表示が変わる場合があります。パソコンの本文幅とスマートフォンの縦画面で、重要な部分が読めるか、意図しない切り抜きがないかを確認します。画像ファイルの問題なのか、ページの表示設定なのかを分けて見られます。
写真の色や明るさが原本と違って見える場合も、画質の数値だけを原因と決めつけないでください。HEICのHDR表示や色の扱いが、変換処理や閲覧環境で同じように再現されるとは限りません。このツールは、撮影時の色表現を完全に保ったまま移す用途を保証していません。商品の色が重要な写真では、原本、ダウンロードしたWebP、掲載後の表示を同じ画面で見比べてください。
写真が複数ある記事では、一覧用と本文用でファイル名を分けておくと、差し替え時に取り違えにくくなります。たとえば同じ風景でも、サムネイル用の小さい画像と、本文用の大きい画像を区別して保存します。後で違う用途に使うときは、小さいWebPを拡大するのではなく、保管したHEICから必要な寸法で作り直せます。
最後は、ファイル容量が減ったかだけでなく、読者に見せたい内容が伝わるかで選びます。旅行記なら風景の雰囲気、料理の記事なら食材の質感、作品紹介なら細部の見やすさが判断材料です。掲載先で使える形式にし、用途に合う寸法を選び、その写真で大切な部分を確認する。この順番で進めると、無理に圧縮しすぎず、Web用の写真を用意できます。