We've been making changes to how we organize and display our docs. Our work isn't done but we'd love your feedback.
Getting started
Basics
Domains & Origins
Performance

Configuration
Basics
Conditions
Dictionaries
Domains & Origins
Request settings
Cache settings
Headers
Responses
Performance
Custom VCL
Image optimization
Video

Security
Access Control Lists
Monitoring and testing
Securing communications
TLS
Web Application Firewall

Integrations
Logging endpoints
Non-Fastly services

Diagnostics
Streaming logs
Debugging techniques
Common errors

Account info
Account management
Billing
User access and control

Reference

    イメージの配信

      Last updated March 18, 2019

    既存のイメージファイルをリクエストするURLに URL API クエリパラメーターを追加することによって、イメージファイルをリサイズ、クロッピング (切り抜き)、回転、圧縮、または別のフォーマットへの変換を行い、パフォーマンスを改善することが出来ます。また、イメージオプティマイザーで画像を変換することで、画像コンテンツを表示するさまざまなデバイスのサイズと特性をサポートするために同じ画像の複数のバージョンを作成、管理する必要がなくなります。

    画像変換の例

    画像の横幅を 200px にリサイズする。

    <img src="https://www.fastly.io/image.jpg?width=200"/>

    変換処理の順序

    URL API パラメーターは任意の順序で指定することが可能ですが、どのような順序で指定しても変換処理は次の順番に行われます。:

    1. trim
    2. crop
    3. orientation
    4. width height dpr fit resize-filter disable
    5. pad canvas bg-color
    6. overlay
    7. brightness contrast saturation
    8. sharpen
    9. blur
    10. format quality

    入力、出力フォーマット

    以下の画像フォーマットが変換前のフォーマットとして利用可能です:

    GIFPNGJPEGWEBP

    変換後の画像は以下のフォーマットで出力することが可能です:

    GIF, PNG, JPEG, WEBP

    入力、出力フォーマットの制限

    デフォルトの品質レベル

    jpgpjpg、または webp に対して出力品質レベルが指定されていない場合、 コントロールパネルのイメージオプティマイザーで設定されているデフォルトが出力イメージに適用されます。

    メタデータの除去

    画像を最適化するにあたって、全てのメタデータ (EXIF、XMP、ICCなど) はファイルサイズを削減するために削除されます。画像に ICC プロファイルが含まれている場合、正しい色で出力されるようにデータは画像に直接適用されます。ICC プロファイルが含まれていない場合、デフォルトのプロファイルが追加されます。

    WebP のサポート

    auto=webp パラメーターを利用するかまたは、コントロールパネルのイメージオプティマイザーの Auto WebP を適用することにより WebP をサポートしているブラウザに WebP 画像を配信することができます。

    イメージのアップスケール

    イメージのアップスケールはデフォルトでは無効化されています。イメージをアップスケールするとファイルサイズが増加し、配信に必要な時間も長くなりますが、エンドユーザー側での表示品質の改善にはつながりません。アップスケールが必要な場合は、クライアント側(ウェブブラウザ、CSS、アプリなど)で画像の横幅や高さを指定することで対応することを推奨します。

    デバッグ

    イメージオプティマイザーから配信する画像をデバッグするため、変換結果により以下の HTTP ヘッダーがレスポンスヘッダーに出力されます。

    fastly-io-info

    fastly-io-info ヘッダーはオプティマイザー処理が成功した画像すべてに追加されます。各ヘッダーの値は、オリジナル画像とオプティマイザー処理された画像のサイズ、ディメンション、フォーマットを比較するために利用可能です。ヘッダーは、6個のキーと値の対 (例、ifsz=3076875 idim=4000x3000 ifmt=png ofsz=83179 odim=893x670 ofmt=jpeg) から生成されます。 各キーの定義は以下のとおりです。:

    Key Description
    ifsz Input image file size
    idim Input image dimensions
    ifmt Input image format
    ofsz Output image file size
    odim Output image dimensions
    ofmt Output image format

    fastly-io-warning

    オリジナル画像が致命的でないエラーに遭遇した場合に fastly-io-warning ヘッダーが追加されます。

    fastly-io-error

    fastly-io-error ヘッダーは、以下の場合に追加されます。:

    This article describes a product that may use third-party cloud infrastructure to process or store content or requests for content. For more information, see our cloud infrastructure security and compliance program.
    Back to Top

    Additional resources: