画像って◯種類あんねん

公式レジストリはこれらしい
https://www.iana.org/assignments/media-types/media-types.xhtml

そんでimageがこれ。ちゃんと数えてないけど100くらいありそう？
https://www.iana.org/assignments/media-types/media-types.xhtml#image

今回の用途的にはMDN見てれば良さそう。

Common MIME Typeをimageで検索すると、下記の9種類がひっかかる。

• image/avif
• image/bmp
• image/gif
• image/vnd.microsoft.icon
• image/jpeg
• image/png
• image/svg+xml
• image/tiff
• image/webp

というわけでタイトルの回答は、「（一般的な）画像って9種類あんねん」ってことになるのかな

一旦それぞれの特徴が知りたい。brieflyにAIに聞くか。

image/avif (AVIF or AV1 Image File Format)

This is a newer image format developed by the Alliance for Open Media. It uses the AV1 video codec and offers a superior compression algorithm compared to JPEG or WebP, which results in smaller file sizes for the same image quality. AVIF supports High Dynamic Range (HDR) and Wide Color Gamut (WCG), which provides enhanced color reproduction.

とりあえずここらへんが目につく。

• JPEGやWebPよりも優れた圧縮アルゴリズムを提供するため、同じ画質でファイルサイズが小さくなる
• ハイダイナミックレンジ（HDR）と広色域（WCG）をサポートしており、色再現性がよい

HDRとWCGもAIに聞いちゃう

High Dynamic Range (HDR)

This term refers to a technique used in imaging and photography to reproduce a greater dynamic range of luminosity than what is possible with standard digital imaging or photographic techniques. In simple terms, it means that HDR images can display more contrast between the lightest and darkest areas of an image than non-HDR images. This allows for more detail in both bright and dark areas of the photo. HDR is often used in photography and video to create more realistic representations of scenes, particularly those with challenging lighting conditions.

簡単に言うと、HDR画像は非HDR画像に比べて、画像の最も明るい部分と最も暗い部分のコントラストをより強く表示できる

Wide Color Gamut (WCG)

A color gamut refers to the entire range of colors that can be reproduced by a device, such as a display, printer, or camera. A wide color gamut means that the device can reproduce a larger range of colors, often closer to the full spectrum of colors that the human eye can perceive. This results in images that are more vibrant and lifelike. WCG is becoming more common in TVs and monitors, and image formats that support WCG can take advantage of these displays to show more vibrant and accurate colors.

• 色域とは、ディスプレイ、プリンタ、カメラなどのデバイスで再現できる色の全範囲を指す
• WCGは、デバイスが再現できる色の範囲が広いということで、多くの場合、人間の目が知覚できる色の全スペクトルに近い
• WCGはテレビやモニターで一般的になりつつある

image/bmp (Bitmap)

BMP is a raster graphics image file format used to store bitmap digital images independently of the display device. It was developed by Microsoft and is characterized by its large file size and lack of compression. Bitmaps are uncompressed, and so they're large and lossless, meaning their quality is high at the expense of file size.

• ビットマップデジタル画像を表示装置に依存せずに保存するために使用される
• ファイルサイズが大きく、圧縮されていない

rasterってvectorの対義語として考えてもいいのかな？とにかく圧縮されないrasterらしい。他のbitmapの原型？

image/gif (Graphics Interchange Format)

GIFs are a bit-mapped graphics file format. They use lossless compression that doesn't degrade the quality of the image, however, they're limited to 256 colors. GIFs also support animations and are widely used on the web for that purpose.

• 画像の質を落とさない可逆圧縮を使用しているが、256色に制限されている
• アニメーションにも対応

image/vnd.microsoft.icon (ICO)

ICO is a file format used for icon images in Microsoft Windows. These files contain one or more small images at multiple sizes and color depths, so that they may be scaled appropriately.

• 複数のサイズと色深度で一つ以上の小さな画像を含むため、適切にスケーリングできる

favicon.icoとかのあれ？

image/jpeg (Joint Photographic Experts Group)

JPEG is a commonly used method of lossy compression for digital images, particularly those produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.

• 圧縮度を調節でき、ストレージサイズと画像品質の間のトレードオフを選択可能
• 通常10:1の圧縮を達成し、画像品質の劣化はほとんど感じられない

image/png (Portable Network Graphics)

PNG is a raster-graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF). It supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A] images (with or without alpha channel).

• GIFの改良版で特許のない代替品として作成された
• パレットベースの画像（24ビットRGBまたは32ビットRGBA色のパレット）、グレースケール画像（アルファチャンネルありまたはなし）、全色非パレットベースのRGB[A]画像（アルファチャンネルありまたはなし）をサポートしている

GIFの改良版だったのかお前？

そうらしい

GIF形式が進化した次の形式であるPNGは、GIFが普及してから8年後に初めて登場しました。特許ライセンスを取得する必要があり、使用できるのが256色に限られているなど、GIFには、いくつかのデメリットがあり、絶えず改良されているコンピューター画面の解像度の進歩に対応していませんでした。これらの問題を回避するために、PNGファイルは、作成後に特許が取得されず、はるかに色数の多いカラーパレットを備えています。GIFとは異なり、PNGは単一画像形式であり、アニメーションをサポートしていません。

https://www.adobe.com/jp/creativecloud/file-types/image/raster/png-file.html

image/svg+xml (Scalable Vector Graphics)

SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are often created with drawing software.

• XMLテキストファイルで定義されるため、検索、インデックス化、スクリプト化、圧縮が可能

image/tiff (Tagged Image File Format)

TIFF is a computer file format for storing raster graphics images, popular among graphic artists, the publishing industry, and photographers. TIFF is widely supported by scanning, faxing, word processing, optical character recognition, image manipulation, desktop publishing, and page-layout applications. The format was created by Aldus Corporation for use in desktop publishing.

• グラフィックアーティスト、出版業界、写真家の間で人気
• スキャン、ファクス、ワードプロセッサ、光学式文字認識、画像操作、デスクトップ出版、ページレイアウトアプリケーションに広く対応している
• Aldus Corporationによりデスクトップパブリッシング用に作成された形式

実態がつかめない

TIFF（Tag Image File Format）は、ラスターグラフィックや画像情報の保存に使用するコンピューターファイルです。非可逆圧縮を避け、編集前の高品質な画像を保存できる便利な形式のため、写真家に人気があります。

Adobeのこのシリーズありがたすぎ

https://www.adobe.com/jp/creativecloud/file-types/image/raster/tiff-file.html

image/webp (WebP)

WebP is an image format developed by Google. It provides superior lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. It also supports animations similar to a GIF.

• 圧縮がイケてる
  • WebPロスレス画像は、PNGと比較してサイズが26％小さい
  • WebPロスあり画像は、同等のSSIM品質指数のJPEG画像と比較して25〜34％小さい
• GIFと同様にアニメーションをサポートしている

WebPアニメーションいけたんか

これか
https://nextjs.org/docs/pages/api-reference/components/image#dangerouslyallowsvg

Second, SVG has many of the same features as HTML/CSS, which can lead to vulnerabilities without proper Content Security Policy (CSP) headers.

In addition, it is strongly recommended to also set contentDispositionType to force the browser to download the image, as well as contentSecurityPolicy to prevent scripts embedded in the image from executing.

設定例が書いてある

  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

The first parameter in the HTTP context is either inline (default value, indicating it can be displayed inside the Web page, or as the Web page) or attachment (indicating it should be downloaded; most browsers presenting a 'Save as' dialog, prefilled with the value of the filename parameters if present).

インライン表示できちゃったら、Web pageとして開いたときに、XMLに悪意のあるスクリプトが紛れ込んでたときに大変ってことか。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox

The HTTP Content-Security-Policy (CSP) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. It applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy.

サニタイズとか調べたけどもよく分からなかった。画像として取り扱えば概ね大丈夫そう？