18歳未満の方は入場をご遠慮下さい。

htmlの画像表示のトラブルを解決

　htmlでブラウザの画像表示に写真の縦横がおかしくなる問題が生じたときの対応方法をわかりやすく纏めました。ＰＣで表示の場合でもって話を進めます。
　画像を２つ掲げます。最初の画像(左)をＡ、次の画像をＢとします。
　どちらかが横倒しになっていると思いますが、ともに原画像は長いほうが794ピクセル、短いほうが519ピクセルです。それをこのページでは縦横問わず画面上の横幅を 519ピクセルで表示します。横倒しになった画像は面積が小さくなりました。（私はスマホがないのでスマホでどう見えるかは存じません）

　ＡはキャノンEOS M 1800万画素 でカメラを90度回転して撮影したものをそのままＰＣに取り込み、縮小処理だけしました。Ｂはこれを office picture managerで90度回転し、このソフトの上で正しく見られるようにしたものです。
　私は撮影した写真をoffice picture managerで観るから、カメラを90度回転して撮影した画像は、取り込んでから90度回転させて保存するのが通例です。
　この２つがどのように見えるかを表にして纏めます。
　なお、下表で画像処理ソフトとは office picture manager と JTrim.exeを言います。
エクスプローラー 画像処理ソフト htmlに嵌め込んでブラウザで見る
表示は大アイコン Google Chrome Edge／Firefox
Ａ 縦横が正しい 90度倒れている 縦横が正しい 90度倒れている
Ｂ 90度倒れている 縦横が正しい 90度倒れている 縦横が正しい
　office picture managerで向きを直した画像をhtmlで表示するものがいつの間にかGoogle Chrome ではうまく見られなくなりました。横倒しになったことに気がついたのは2020年になってからです。
　従って、キャノンEOS で撮った画像で縦長のものをサイトに載せた場合は、Chromeでその多くが『縦横が狂う』ことになりました。
　私は写真のExif情報に手を入れればこの不具合が直ると考えて、Exifが編集できるソフトのF6Exif（無料公開）を入れていろいろ試みたのですが、EdgeとChromeで扱い方が違うのだから、どのように画像の方向の定義を変えたって無駄でした。
　次の写真はEdgeでもChromeでもきちんと縦長に表示されるはずです。
　やり方はExif情報の削除です。
　私はフリーソフトのJTrim で削除します。
　いつも使っている画像処理ソフトは２つで、使用方法も掲げます。
office picture manager JTrim
写真を眺めて楽しむ
90度回転、画像の縮小、色の補整、明るさとコントラストの手直し、トリミングの処理
撮影日等プロパティの確認
一覧確認に使用（エクスプローラーの大アイコンより使いやすい）		 多彩な加工処理を活用する（シャープにする、ガウスぼかし、ガラス処理、ブロック処理など）
巧妙な編集機能を活用する（連結、合成貼り付け、文字入れ）
Exif情報の自動削除
(注) JTrimで開く画像はサイトに載せるものだけにしている。
　JTrimで Exif情報の削除は次のようにやります。
　　メニューの「ファイル」→保存オプション→「Exif情報を保持する」を無効にする
　JTrimで 画像を開いて、上書き保存すればExif情報が消えるから簡単です。

　私はエクスプローラーの当該画像のプロパティを開いて
　　「詳細」→プロパティや個人情報を削除→このファイルから次のプロパティを削除→all選択
　これで Exif情報が消せると勘違いしたから苦労しました。
　Exif情報の削除 でググると、プロパティから「プロパティや個人情報を削除」のやり方が示されます。しかし、これでやっても画像方向のデータは必要な基本情報として残されるのです。
　html 写真の縦横がおかしくなる でググるといろんなアドバイスサイトが出てきますが、ブラウザによって扱いが違うようになっては、Exif情報を削除せずに対応するにはかなりのＩＴ技術が要ります。
　難しいことはせずに、Exif情報の削除（特に画像方向のデータ）が一番の解決方法です。
　なお、私がこの問題で一番格闘した原因は画像のキャッシュに邪魔されたことです。Exif情報を削除した画像を上げてもちっとも表示が直りません。ローカルではうまく行っているので、この違いに途方に暮れました。
　ブラウザの設定画面でキャッシュを削除することが必要です。ページ本体はリロードすれば大体は改まりますが、画像のキャッシュはリロードでは改まらないことがあります。
　なお、本稿を書き終えた後たまたま リロード でググると──スーパーリロード：Ctrl＋F5 で「キャッシュを無視して更新処理」──というのがあるとわかりました。
　それで実験しました。
　右の写真はWindows10のアイコンでは縦に表示されていました。
　office picture managerでは横倒しになるので縦になるよう向きを直してから <IMG SRC="〜.jpg" WIDTH="266" HEIGHT="413">でここに組み込みました。
　ブラウザで横倒しになったから、この画像をJTrimで保存しました。（ついでに文字入れをした）
　直した画像を上げてからページを見ると通常のリロードで画像が改まっていました。どうしてだろう。

【参考】
　　「JTrim」簡単に使える定番のレタッチソフト
　　F6 Exif 〜EXIF編集ソフト〜
　　Exif、メタデータとは？削除できる？
　　写真・画像のexif/メタデータ等情報確認・削除【無料】
　　ネットワークチェックツール【無料で確認】

　私は本作を上げるに当たって、冒頭のＡの写真から撮影位置情報が取れるのではないかと心配しました。これまで基本的に JTrim.exeで画像に手を加えたからExif情報が消されています。しかし、Ａの画像はそれをしないから大丈夫かと不安でした。
　紹介した５つのサイトの最後のもので位置情報が取れないことを確認しました。まあ考えれば、ＧＰＳを使わない普通のデジカメで撮ったのだから当たり前です。
　スマホで撮った画像の扱いは本当に注意する必要があります。
　それにしてもスマホって恐ろしいです。スマホの位置データで名古屋駅前の５月のある日の通行人の量が２月のある日と比べて何％減ったかわかるなんてねえ。
　新型コロナ対策の給付金10万円の申請をスマホでして、通信会社と政府が密かに結託したら、何月何日に金津園の土地に行ったことがばれてしまいますね、
　犯罪の嫌疑がかかれば通信会社は個人情報を渡さねばならなくなるから、犯罪をする可能性が将来ないとは言えない人はスマホを使ってはならないでしょう。
　コロナ給付金とe-Taxと マイナンバーカードと銀行預金者データとスマホユーザーとキャッシュレスのシステムと自動車運転免許データと全部繋がるのが物理的に可能では恐いです。
えろえろ考察　　日記　　秘密の愉しみ　　トップページ
（千戸拾倍　著）