Monday 17 October 2022

[ Chromebook]写真のサイズを縮小する色々な方法 ＆ Web上での画像ファイルの取り扱い

  October 17, 2022    はな

Webサイトに写真を載せる時、Windows や Mac なら画像加工に便利なソフトがあるので、そんなに悩まないかもしれません。でも Chromebook ユーザの人は迷うかもしれませんね。そんな時に役立つ機能やアプリをご紹介しながら、画像ファイルの扱いについて書いて行きます。


Contents

  1. 画像の形式 ： JPEG, PNG など
    • ファイル形式が、スマホやカメラ専用の場合
  2. 画像のサイズと解像度 ： 〜 KB／〜 dpi など
    • ファイルサイズが、バカでかすぎる
    • WordPress の画像編集機能は、「おまけ」的な感じ
    • Chromebook の Gallery で、簡単にリサイズも
  3. 画像加工の具体的な手順
  4. 画像の著作権


ファイル形式が、スマホやカメラ専用の場合

最初の 2 つは、スマホで撮った画像を使う場合に失敗しやすい点。

Web 上で使用する画像には、基本 JPEG、画質を保ちたいものには PNG を使用します。

  • 写真は JPEG
  • 文字やロゴ、グラフィックは PNG

ところがスマホの設定によっては、保存されている画像が Web 上で取り扱えない形式となっている場合があります(HEIC 形式)。そのままではサイトへアップロードする際にファイルを選択することすらできないので、ファイル形式を変換しましょう。

  • HEIC は Web では使えない

リモートワークツールの記事に、Google Drive を経由させる HEIC → JPEG 変換の方法を書きました。オンライン処理なら、Chromebook ユーザでも使えますよ。

https://miraino.space/2019/10/31/%E3%83%95%E3%83%AB%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%95%E3%83%AA%E3%83%BC%E3%83%A9%E3%83%B3%E3%82%B9%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8B%E3%81%8A%E4%BB%95%E4%BA%8B%E3%83%84%E3%83%BC%E3%83%AB/#heic


ファイルサイズが、バカでかすぎる

スマホ・カメラで撮った写真は解像度が高く、ファイルサイズも 1 〜 3MB くらいあったりします。

私は Web ページに載せる画像のファイルサイズは、数 10 〜 数百(大きくて 200 〜 300)KB 程度を目安に縮小しています。

  • ファイルサイズは 100KB 前後に抑える

解像度は、Web なら 72 dpi 〜 96 dpi 程度が推奨されています。利用端末の画面解像度に依存します。印刷に使う場合でも 300 〜 350 dpi 程度。

ファイルサイズをあまり小さくしすぎると、解像度が閲覧に耐えられなくなってしまうので、そこは自分で調整します。Squooshなら、劣化具合いを目で確認しながら、リサイズ＆解像度を落とせます。

https://squoosh.app/　(Google のアプリです)

Web サーバの契約容量にも制限があるし、それだけではなく、重いページは読込スピードが遅くなります。遅いページだと back ボタンで去る人も多いですよね。Google に検索順位も下げられ、良いことがありません。


WordPress の画像編集機能は、「おまけ」的な感じ

WordPress を使っている場合、スマホで写真をアップロードする時に画像サイズを選ぶこともできます。

そのまま上げようとすると、”元のサイズ： 3 MB” などとバカでかい数字が表示されているので、ここで変えられます。「大」「中」「小」と、大雑把な 3 つの選択肢から選びます。元画像にもよりますが、アイキャッチ画像に使うなら「大」、文中に使うなら「中」、アイコンなら「小」を選ぶと良いかな。

既にアップロードした画像も、WordPress の [ダッシュボード] → [メディア] の「画像編集」から、サイズ変更が可能です。画像のトリミングや回転なども可能です。

ただ、この方法は面倒くさいし、上手く行かないことがあります。

トリミングはトリミングのみで一旦編集を保存しなければならず面倒だし。

画像の回転が上手く行かず、本当は 90 度だけ回転したいのに、どうしても 180 度回転してしまう、といったことも。これは画像が持つ Exif 情報(Exchangeable image file メタデータ)の中に、"Auto-rotation" が含まれていることがあるからです。

後述しますが Exif 情報は最終的に消しておきたいので、トリミングはともかく、「向き」は、アップロード前に正しい状態にしておきましょう。

既に上げてしまったものは、プラグインで直す方法もあります。


Chromebook の Gallery で、簡単にリサイズも

Chromebook 標準の写真プレビュー機能ですが、そこで画像の編集もできます。

※後で手順を載せますね


画像加工の具体的な手順

SEO 上も画像は重要な要素。Google 検索は「画像が何か」だけでなく、その「美しさ」「わかりやすさ」も見ています。単純作業で面倒だなと思いますが、なるべく丁寧にやりたい部分です。

  1. 画像の選定と加工
  2. サイズを Web 用に調整
  3. alt 属性を設定
  4. メタデータ削除


1. 画像の選定と加工

画像はなるべく「明るく、きれいで、見やすい」ものを使用しましょう。


2. サイズを Web 用に調整

アイキャッチ画像： 横 1200 px

文中：横 1000 px (モバイルなら 750 px)

アイコン： 縦横 32 px

容量は 100 KB 前後以内に。


3. alt 属性を設定

それと、「alt 属性」は設定しておいた方が良いです。画像が読み込めない事態も稀に発生するので、そんな時に画像の代わりに表示される文字列です。

「どのような画像を使うべきか」「どのような代替テキストを入れるべきか」は、以下のドキュメントが参考になります。

Google 画像検索に関するおすすめの方法 - Search Console ヘルプ


4. メタデータ (Exif 情報) 削除

スマホやカメラで撮った写真には、「日時」や「場所」、先ほど出てきた「自動回転」などの情報が記録されています。このデータを削除しておくことは、セキュリティ面でも大切です。データを削除することで、ファイルサイズも小さくなります。

知識として一応、書きましたが・・・

実は 2 〜 4 は WordPress の場合、アップロード後に一括でやってくれる”プラグイン”があります。色々ありますが、私はこちらを使っています。

https://wordpress.org/plugins/wp-smushit/

「1.画像加工」だけは、自分で好みに調整する必要がありますね。今はスマホアプリで簡単にできます。そちらはまた別の機会に。


画像の著作権

最後に、訴えられないために必要な「著作権」について。

画像は自分で用意するか、「著作権フリー」のものを使わせていただく、有償のものにはキチンと代金を払う、引用する場合に必要に応じてその旨を記載するなど、"ルールを守って" 楽しい Web 生活を送りましょう！

  

  No Comments

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)