image-orientationプロパティは何をしますか？

image-orientationプロパティは、画像のEXIF情報に含まれる向き（Orientation）メタデータを参照し、画像の表示方向を自動調整します。

image-orientationの値にはどんなものがありますか？

image-orientationには、from-image（デフォルト）、none、および回転角度（0deg、90deg、180deg、270degなどの値があります。

image-orientationを使用する際の注意点は何ですか？

画像のEXIFメタデータに依存するため、メタデータが存在しない画像には効果がありません。また、一部のブラウザでサポート状況が異なります。

【CSS】image-orientationプロパティの使い方

概要

image-orientationプロパティは、CSSで画像の向き（回転）を制御するためのプロパティです。特に、スマートフォンやデジタルカメラで撮影した写真に含まれるEXIF（Exchangeable Image File Format）の向き情報を参照し、画像を正しい向きで表示できます。

なぜ必要なのか

スマートフォンで縦向きや横向きに撮影した写真は、EXIF情報に撮影時の向きが記録されています。しかし、ブラウザがこの情報を無視すると、画像が意図しない向きで表示されることがあります。image-orientationプロパティを使用することで、このような問題を解決できます。

構文と基本的な使い方

image-orientation: from-image | none | <angle>;

パラメータ詳細

from-image（デフォルト）画像のEXIFメタデータに含まれる向き情報を自動的に適用します。最も一般的な使用方法です。
none EXIFの向き情報を無視し、画像をそのまま表示します。
<angle> 画像を指定した角度で回転させます。0deg、90deg、180deg、270degなどの値が使用できます。

基本的な使用例

/* すべての画像にEXIF向き情報を適用 */
img {
    image-orientation: from-image;
}

/* 特定のクラスの画像のみEXIF情報を無視 */
.no-orientation {
    image-orientation: none;
}

/* 画像を90度回転 */
.rotate-90 {
    image-orientation: 90deg;
}

実践的な使用例

スマートフォン写真の自動補正

スマートフォンで撮影したユーザーアップロード画像を正しい向きで表示する場合：

<div class="photo-gallery">
  <img src="smartphone-photo-1.jpg" alt="縦向きで撮影した写真" class="user-photo">
  <img src="smartphone-photo-2.jpg" alt="横向きで撮影した写真" class="user-photo">
</div>

.user-photo {
    image-orientation: from-image;
    max-width: 100%;
    height: auto;
}

この設定により、撮影時の向きに関わらず、写真が正しい向きで表示されます。

手動で画像を回転させる

/* 画像を180度反転 */
.upside-down {
    image-orientation: 180deg;
}

/* 画像を90度右回転 */
.rotate-right {
    image-orientation: 90deg;
}

/* 画像を270度回転（90度左回転と同等） */
.rotate-left {
    image-orientation: 270deg;
}

ユーザープロフィール画像での活用

<div class="profile">
  <img src="user-avatar.jpg" alt="プロフィール画像" class="avatar">
</div>

.avatar {
    image-orientation: from-image;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

ブラウザサポート状況

image-orientationプロパティのサポート状況：

Chrome/Edge: バージョン81以降でサポート
Firefox: バージョン26以降でサポート
Safari: バージョン13.1以降でサポート
Opera: バージョン68以降でサポート

モダンブラウザでは広くサポートされていますが、古いブラウザでは動作しない可能性があります。

フォールバック対策

/* 古いブラウザ向けのフォールバック */
img {
    /* 古いブラウザでは無視される */
    image-orientation: from-image;

    /* transformを併用する場合 */
    /* transform: rotate(0deg); */
}

注意点と制限事項

1. EXIFメタデータへの依存

from-image値を使用する場合、画像ファイルにEXIF情報が含まれている必要があります。以下の画像には効果がありません：

Web用に最適化されてEXIFが削除された画像
SVG画像やPNG画像（EXIFをサポートしていない形式）
スクリーンショット画像

2. パフォーマンスへの影響

画像の回転処理はブラウザのレンダリングエンジンで行われるため、大量の画像に適用する場合は若干のパフォーマンス影響があります。

3. レイアウトへの影響

画像を回転させると、元の幅と高さが入れ替わる可能性があります。レスポンシブデザインでは、以下のように対応します：

.responsive-image {
    image-orientation: from-image;
    max-width: 100%;
    height: auto;
    display: block;
}

4. transformプロパティとの違い

image-orientationとtransform: rotate()は異なる動作をします：

/* image-orientation: 回転後のサイズが自動調整される */
.with-orientation {
    image-orientation: 90deg;
}

/* transform: 元のサイズが保持され、視覚的にのみ回転 */
.with-transform {
    transform: rotate(90deg);
}

よくあるユースケース

ユーザーアップロード画像の表示

.upload-preview img {
    image-orientation: from-image;
    max-width: 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

写真ギャラリー

.gallery-item {
    image-orientation: from-image;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

レスポンシブな画像表示

@media (max-width: 768px) {
    .mobile-image {
        image-orientation: from-image;
        width: 100%;
        height: auto;
    }
}

まとめ

image-orientationプロパティは、画像のEXIF向き情報を活用して、写真を正しい向きで表示するための重要なCSSプロパティです。特にスマートフォンで撮影されたユーザーアップロード画像を扱う際に非常に便利です。

使用時のポイント

デフォルト値のfrom-imageを使用すれば、EXIF情報に基づいた自動回転が可能
モダンブラウザでは広くサポートされているが、古いブラウザでは動作しない可能性がある
EXIFメタデータが存在しない画像には効果がない
レスポンシブデザインと組み合わせることで、柔軟な画像表示が実現できる

適切に使用することで、ユーザー体験を大きく向上させることができます。

概要