Web ページの画像は、主に標準表示とプログレッシブ表示の 2 つのモードで表示されます。標準表示では、画像が上から下へ 1 行ずつ読み込まれて表示されます。プログレッシブ表示では、最初は低解像度の画像が表示され、データが読み込まれるにつれて徐々に鮮明になります。ネットワークパフォーマンスが低い場合や画像が大きい場合にユーザーエクスペリエンスを向上させるために、Object Storage Service (OSS) に保存されている画像をプログレッシブ表示用に設定できます。
パラメーター
アクション: interlace
次の表に、パラメーターとその値を示します。
パラメーター | 説明 | 値 |
[value] | 画像をプログレッシブモードで表示するかどうかを指定します。 |
|
メソッド
オブジェクト URL、OSS SDK、および OSS API 操作を使用して、画像処理 (IMG) パラメーターを設定できます。オブジェクト URL は、公開アクセス可能な画像の処理にのみ使用できます。非公開画像の IMG パラメーターを設定する場合は、OSS SDK を使用するか、API 操作を呼び出します。詳細については、「IMG の実装モード」をご参照ください。
公開読み取りまたは公開読み書き画像をプログレッシブ表示用に設定する
次の例は、パブリックバケットドメインが https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com であるバケットに保存されている example.jpg 画像と panda.png 画像をプログレッシブ表示する方法を示しています。
example.jpg 画像のサイズを幅 200 px に変更し、プログレッシブ表示に設定します
次のパラメーターを設定します。
ソース画像のサイズを幅 200 ピクセルに変更します: resize,w_200
画像をプログレッシブ表示に設定します:
interlace,1
上記のパラメーターを適用するために使用される URL は、https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_200/interlace,1 です。

panda.png 画像を JPG に変換し、JPG 画像をプログレッシブ表示に設定します
次のパラメーターを設定します。
ソース画像の形式を JPG に変換します:
format,jpg画像をプログレッシブ表示に設定します:
interlace,1
上記のパラメーターを適用するために使用される URL は、https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/panda.png?x-oss-process=image/format,jpg/interlace,1 です。
非公開画像をプログレッシブ表示に設定する
OSS SDK と OSS API を使用して、非公開画像をプログレッシブ表示に設定できます。
OSS SDK を使用する
次のサンプルコードは、一般的なプログラミング言語用の OSS SDK を使用して、非公開画像のプログレッシブ表示を設定します。他のプログラミング言語用の OSS SDK を使用してプログレッシブ表示を設定する方法については、「概要」をご参照ください。
Java
OSS SDK for Java V3.17.4 以降が必要です。
import com.aliyun.oss.*;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.common.comm.SignVersion;
import com.aliyun.oss.model.GetObjectRequest;
import java.io.File;
public class Demo {
public static void main(String[] args) throws Throwable {
// リージョンのエンドポイントを指定します。この例では、中国 (杭州) リージョンのエンドポイントを使用しています。実際のエンドポイントを指定してください。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// バケットが配置されているリージョンを指定します。例: cn-hangzhou。
String region = "cn-hangzhou";
// 環境変数からアクセス認証情報を取得します。サンプルコードを実行する前に、OSS_ACCESS_KEY_ID および OSS_ACCESS_KEY_SECRET 環境変数が設定されていることを確認してください。
EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
// バケットの名前を指定します。例: examplebucket。
String bucketName = "examplebucket";
// 処理するオブジェクトの完全なパスを指定します。完全なパスにバケット名を含めないでください。
String objectName = "example.jpg";
// ローカルファイルの完全なパスを指定します。例: D:\\dest.jpg。パスに同じ名前の画像が既に存在する場合、処理された画像は画像を上書きします。それ以外の場合、処理された画像はパスに保存されます。
String pathName = "D:\\dest.jpg";
// OSSClient インスタンスを作成します。
// OSSClient が不要になったら、shutdown メソッドを呼び出してリソースを解放します。
ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
OSS ossClient = OSSClientBuilder.create()
.endpoint(endpoint)
.credentialsProvider(credentialsProvider)
.clientConfiguration(clientBuilderConfiguration)
.region(region)
.build();
try {
// 画像のサイズを幅 200 ピクセルに変更し、プログレッシブ表示に設定します。
String image = "image/resize,w_200/interlace,1";
GetObjectRequest request = new GetObjectRequest(bucketName, objectName);
request.setProcess(image);
// 処理された画像の名前を dest.jpg に設定し、ローカルコンピューターに保存します。
// 処理された画像のローカルパスを指定せずに、dest.jpg などの処理された画像の名前のみを指定すると、処理された画像はサンプルプログラムが属するプロジェクトのローカルパスに保存されます。
ossClient.getObject(request, new File("D:\\dest.jpg"));
} catch (OSSException oe) {
System.out.println("Caught an OSSException, which means your request made it to OSS, "
+ "but was rejected with an error response for some reason.");
System.out.println("Error Message:" + oe.getErrorMessage());
System.out.println("Error Code:" + oe.getErrorCode());
System.out.println("Request ID:" + oe.getRequestId());
System.out.println("Host ID:" + oe.getHostId());
} catch (ClientException ce) {
System.out.println("Caught an ClientException, which means the client encountered "
+ "a serious internal problem while trying to communicate with OSS, "
+ "such as not being able to access the network.");
System.out.println("Error Message:" + ce.getMessage());
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
}PHP
OSS SDK for PHP V2.7.0 以降が必要です。
<?php
if (is_file(__DIR__ . '/../autoload.php')) {
require_once __DIR__ . '/../autoload.php';
}
if (is_file(__DIR__ . '/../vendor/autoload.php')) {
require_once __DIR__ . '/../vendor/autoload.php';
}
use OSS\Credentials\EnvironmentVariableCredentialsProvider;
use OSS\OssClient;
// 環境変数からアクセス認証情報を取得します。サンプルコードを実行する前に、OSS_ACCESS_KEY_ID および OSS_ACCESS_KEY_SECRET 環境変数が設定されていることを確認してください。
$provider = new EnvironmentVariableCredentialsProvider();
// バケットが配置されているリージョンのエンドポイントを指定します。たとえば、バケットが中国 (杭州) リージョンにある場合は、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。
$endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// バケットの名前を指定します。例: examplebucket。
$bucket= "examplebucket";
// 処理するオブジェクトの完全なパスを指定します。完全なパスにバケット名を含めないでください。
$object = "example.jpg";
// ローカルファイルの完全なパスを指定します。例: D:\\dest.jpg。パスに同じ名前の画像が既に存在する場合、処理された画像は画像を上書きします。そうでない場合、処理された画像はパスに保存されます。
// ローカルパスを指定せずに、dest.jpg などの処理された画像の名前のみを指定すると、処理された画像はサンプルプログラムが属するプロジェクトのローカルパスに保存されます。
$download_file = "D:\\dest.jpg";
$config = array(
"provider" => $provider,
"endpoint" => $endpoint,
"signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4,
// バケットが配置されているAlibaba Cloud リージョンの ID を指定します。
"region" => "cn-hangzhou"
);
$ossClient = new OssClient($config);
// 画像のサイズを幅 200 ピクセルに変更し、プログレッシブ表示に設定します。
$image = "image/resize,w_200/interlace,1";
$options = array(
OssClient::OSS_FILE_DOWNLOAD => $download_file,
OssClient::OSS_PROCESS => $image);
// 処理された画像をローカルコンピューターに保存します。
$ossClient->getObject($bucket, $object, $options); Python
OSS SDK for Python V2.18.4 以降が必要です。
# -*- coding: utf-8 -*-
import oss2
from oss2.credentials import EnvironmentVariableCredentialsProvider
# 環境変数からアクセス認証情報を取得します。サンプルコードを実行する前に、OSS_ACCESS_KEY_ID および OSS_ACCESS_KEY_SECRET 環境変数が設定されていることを確認してください。
auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
// バケットが配置されているリージョンのエンドポイントを指定します。たとえば、バケットが中国 (杭州) リージョンにある場合は、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。
// バケットが配置されているリージョンのエンドポイントを指定します。たとえば、バケットが中国 (杭州) リージョンにある場合は、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。
endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
# バケットが配置されているAlibaba Cloud リージョンの ID を指定します。
region = 'cn-hangzhou'
bucket = oss2.Bucket(auth, endpoint, 'examplebucket', region=region)
# 処理する画像の名前を指定します。ソース画像がバケットのルートディレクトリに保存されていない場合は、画像の完全なパスを含める必要があります。例: exampledir/src.gif。
key = 'example.jpg'
# 処理された画像の名前を指定します。
new_pic = 'D:\\dest.jpg'
# 画像のサイズを幅 200 ピクセルに変更し、プログレッシブ表示に設定します。
image = 'image/resize,w_200/interlace,1'
bucket.get_object_to_file(key, new_pic, process=image)Go
OSS SDK for Go V3.0.2 以降が必要です。
package main
import (
"fmt"
"os"
"github.com/aliyun/aliyun-oss-go-sdk/oss"
)
func HandleError(err error) {
fmt.Println("Error:", err)
os.Exit(-1)
}
func main() {
// 環境変数からアクセス認証情報を取得します。サンプルコードを実行する前に、OSS_ACCESS_KEY_ID および OSS_ACCESS_KEY_SECRET 環境変数が設定されていることを確認してください。
provider, err := oss.NewEnvironmentVariableCredentialsProvider()
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
// OSSClient インスタンスを作成します。
// バケットが配置されているリージョンのエンドポイントを指定します。たとえば、バケットが中国 (杭州) リージョンにある場合は、エンドポイントを https://oss-cn-hangzhou.aliyuncs.com に設定します。実際のエンドポイントを指定してください。
client, err := oss.New("https://oss-cn-hangzhou.aliyuncs.com", "", "", oss.SetCredentialsProvider(&provider), oss.AuthVersion(oss.AuthV4), oss.Region("cn-hangzhou"))
if err != nil {
HandleError(err)
}
// ソース画像が保存されているバケットの名前を指定します。例: examplebucket。
bucketName := "examplebucket"
bucket, err := client.Bucket(bucketName)
if err != nil {
HandleError(err)
}
// 処理する画像の名前を指定します。画像がバケットのルートディレクトリに保存されていない場合は、画像の完全なパスを含める必要があります。例: exampledir/src.gif。
sourceImageName := "example.jpg"
// 処理された画像の名前を指定します。
targetImageName := "D://dest.jpg"
// 画像のサイズを幅 200 ピクセルに変更し、プログレッシブ表示に設定します。
image := "image/resize,w_200/interlace,1"
err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
if err != nil {
HandleError(err)
}
}RESTful API を使用する
ビジネスで高度なカスタマイズが必要な場合は、OSS RESTful API を直接呼び出すことができます。API を直接呼び出すには、コードに署名計算を含める必要があります。詳細については、「(推奨) V4 署名を含める」をご参照ください。
GetObject リクエストに interlace パラメーターを含めることで、画像の表示モードを設定できます。
GET /oss.jpg?x-oss-process=image/format,jpg/interlace,1 HTTP/1.1
Host: oss-example.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: OSS4-HMAC-SHA256 Credential=LTAI********************/20250417/cn-hangzhou/oss/aliyun_v4_request,Signature=a7c3554c729d71929e0b84489addee6b2e8d5cb48595adfc51868c299c0c218e