JSON出力形式
メタデータは、画像を扱う際に強力なツールです。メタデータは、画像の寸法、DPI、カメラのEXIFデータなどを教えてくれます。これらのデータはすべて、imgixを使用して画像を最適に表示するために利用できる信号です。JSON出力形式（fm=json）を使用することで、これを実現できます。
他のimgix出力形式は、JPEG、GIF、PNG、WebPなどの画像形式であるか、自動コンテンツネゴシエーションによって自動的に決定されます。新しいJSON出力形式を使用すると、画像に関する情報をよく知っている構造化された形式で読み取ることができます。これにより、新しい可能性が広がります。
簡単に画像情報を取得する
imgix JSON出力形式を使用すると、画像リクエストが画像の代わりにJSONドキュメントを返します。このペイロードは、MIMEタイプapplication/jsonを持ち、入力画像のさまざまな側面を表します。これを行うには、imgix URLにfm=jsonを追加します。
JSON出力形式を使用すると、DPI、色深度、カラープロファイル情報、ピクセル寸法、EXIFデータなどをソース画像から読み取ることができます。デフォルトでは、imgixはサイズとプライバシーの問題のためにすべての画像メタデータを削除します。しかし、JSON出力形式を使用すると、そのデータは削除されず、レスポンスとしてフォーマットされます。以下は、シンプルなJPEG入力画像の例です：
{
"Exif": {
"ComponentsConfiguration": "1 2 3 0",
"FocalLengthIn35mmFilm": 51,
"MeteringMode": 5,
"CustomRendered": 0,
"InteroperabilityTag": 13424,
"GainControl": 1,
"ExposureProgram": 3,
"ExposureTime": 0.003125,
"DateTimeOriginal": "2014:09:14 16:34:09",
"FocalLength": 25,
"MaxApertureValue": 1,
"SceneType": "1",
"PixelXDimension": 4592,
"ExposureBiasValue": 0,
"DateTimeDigitized": "2014:09:14 16:34:09",
"Contrast": 0,
"ExposureMode": 0,
"ExifVersion": "0230",
"ISOSpeedRatings": 200,
"ColorSpace": 1,
"FileSource": "3",
"WhiteBalance": 1,
"FNumber": 1.6,
"SceneCaptureType": 0,
"FlashpixVersion": "48 49 48 48",
"SensingMethod": 2,
"SensitivityType": 1,
"Saturation": 0,
"Flash": 16,
"LightSource": 9,
"PixelYDimension": 3064,
"CompressedBitsPerPixel": 2,
"DigitalZoomRatio": 0,
"Sharpness": 0
},
"Orientation": 1,
"Content-Type": "image/jpeg",
"Output": {},
"Content-Length": "5680640",
"GPS": {},
"PixelHeight": 3064,
"PixelWidth": 4592,
"TIFF": {
"Make": "Panasonic",
"ExifTag": 634,
"ResolutionUnit": 2,
"YResolution": 180,
"DateTime": "2014:09:14 16:34:09",
"YCbCrPositioning": 2,
"XResolution": 180,
"Software": "Ver.1.0 ",
"Model": "DMC-GM1",
"Orientation": 1
},
"ProfileName": "sRGB IEC61966-2.1"
}異なる入力形式は、JSON出力ペイロードに異なるキーを含めます。ご自身の入力画像を使用して、出力ドキュメントに含まれるキーを確認してください。より複雑な例については、以下の画像をクリックしてください。
新しいJSON出力形式を使用することで、imgixで画像を操作するだけでなく、画像について考察することもできます。この機能を使用している顧客にとって、より豊かなアプリケーションが実現しています。
デモ：アスペクト比の維持
JSON出力形式の機能をいくつか紹介するために、いくつかのユーザー生成写真のアスペクト比を維持する方法を示すCodePenを作成しました。メタデータにアクセスできなければ、同じ結果を達成するために画像をダウンロードして寸法をサーバー側で保存する必要があります。
See the PenPicture Element & Art Direction with imgixby imgix (@imgix) onCodePen.
この例では、わずか数行のJavaScriptを使用して、サーバー側の処理なしで画像のアスペクト比を維持しています。画像がどのようにレンダリングされるかを決定する前に画像情報を読み取り、どのパラメーターを適用するかを判断することができます。