縦横比を保つサムネイルサイズ計算
このジェネレーターは、元画像の寸法からすぐに利用できるサムネイルサイズ一式を作成します。元の幅と高さ、必要な出力幅をすべて入力すると、対応する高さが入力順に返されます。各高さは元画像の縦横比に基づいて算出され、最も近い整数ピクセルに丸められます。レスポンシブ画像の設計、メディア要件の文書化、リサイズ処理の準備、チームや自動化フローにおける計算方法の統一に便利です。
無料で実行
元画像と必要な幅をご指定ください
元画像の幅と高さを、ピクセル単位の正の整数で入力してください。続いて、少なくとも1つの目標幅を含むリストをご指定ください。1回のリクエストで最大100件の幅を処理できるため、詳細なレスポンシブ画像セット、コンテンツ管理システムのプリセット、マーケットプレイス用素材一覧などにも十分対応でき、処理量が無制限になることもありません。入力順には意味があります。結果は指定された順序どおりに返され、同じ幅を複数回入力した場合もそのまま保持されます。そのため、既存のブレークポイント名や書き出しジョブの一覧と容易に対応付けられます。可能であれば、単純化した比率ではなく、元画像の実際のピクセル寸法をご使用ください。4032×3024の写真と4対3という比率は同じ形状を示しますが、実寸を使うことで依頼内容が明確になり、幅と高さを逆に指定する可能性も減らせます。すべての寸法には正の整数が必要です。0、負数、小数、文字列、未入力の寸法、空のリスト、上限を超えるリストは、暗黙に補正せずエラーとして扱います。
各サムネイルの高さの計算方法
目標幅ごとに、その値へ元画像の高さを掛け、元画像の幅で割ります。これにより両方の軸へ同一の拡大縮小率が適用されるため、元の縦横比が維持され、画像が縦長または横長に変形しません。ピクセル寸法は整数である必要があるため、算出した高さはJavaScriptの標準的な丸め規則に従い、最も近い整数へ丸めます。たとえば、1920×1080の元画像に800ピクセルの目標幅を指定すると、高さは450ピクセルになります。元画像の比率と目標幅によっては高さが小数になりますが、ラスター画像では整数化が必要なため、丸め後の比率にごく小さな差が生じる場合があります。レスポンスには元画像の寸法、幅と高さの数値比率、指定した各幅に対応するサムネイルレコードが含まれます。この機能が行うのは寸法計算のみです。画像のダウンロード、解析、切り抜き、圧縮、鮮鋭化、リサイズは行わず、小さな画像を拡大した際の画質も保証しません。
レスポンシブ制作や自動処理でご活用ください
返されたサムネイル配列は、画像処理キュー、ビルドスクリプト、デザインの引き渡し資料、コンテンツ管理システムの設定などへ入力できます。フロントエンドチームでは、レイアウトのブレークポイントに合う幅を指定し、算出された高さを使って画像読み込み前の表示領域を確保できます。編集チームでは、メディア素材と一緒にレコードを保存し、別のリサイズツールで作成すべき正確な寸法を担当者へ共有できます。API連携では、最初に寸法計画を生成して検証し、その後で各レコードを画像変換サービスへ送信できます。このアルゴリズムは決定的であり、ネットワーク、乱数、現在時刻を使用しないため、同じ有効な入力からは常に同じ結果が返されます。本ツールは元画像全体の形状を維持するものであり、正方形のアバターやSNS用プレビューカードなど、固定比率の切り抜きは作成しません。異なる比率で幅と高さを厳密に指定する必要がある場合は、切り抜き処理をご利用ください。API料金は、許可範囲内の目標幅の件数にかかわらず、1リクエストあたり$0.002です。
活用例
レスポンシブ画像セットの設計
srcset用の画像バリエーションを生成する前に、各ブレークポイントへ対応する高さを計算できます。
CMSのサムネイル設定
素材の縦横比と編集用の幅一覧から、統一された整数ピクセル寸法を作成できます。
一括リサイズ処理の準備
別の画像処理ツールが比率計算を繰り返さずに実行できる、順序付きの寸法計画を作成できます。
よくある質問
料金はいくらですか?
APIは1リクエストあたり$0.002で、ブラウザー上の計算機能もご利用いただけます。
各サムネイルの高さはどのように計算されますか?
目標幅に元画像の高さを掛け、元画像の幅で割った後、最も近い整数ピクセルへ丸めます。
このツールは画像自体をリサイズしますか?
いいえ。寸法計画のみを返し、画像ピクセルの読み込み、アップロード、切り抜き、変換は行いません。
空の目標幅リストを送信できますか?
いいえ。少なくとも1つの目標幅が必要であり、空のリストは無効な入力としてエラーになります。
重複した目標幅は削除されますか?
いいえ。各結果が指定リストへ直接対応するよう、入力順と重複値はそのまま保持されます。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/thumbnail-set \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":1920,"height":1080,"target_widths":[1200,800,320]}'const res = await fetch("https://api.kit.forhosting.com/image/thumbnail-set", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 1920,
"height": 1080,
"target_widths": [
1200,
800,
320
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/thumbnail-set",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 1920,
"height": 1080,
"target_widths": [
1200,
800,
320
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/thumbnail-set", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":1920,"height":1080,"target_widths":[1200,800,320]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":1920,"height":1080,"target_widths":[1200,800,320]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/thumbnail-set", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"width": 1920,
"height": 1080,
"target_widths": [
1200,
800,
320
]
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.thumbnail_set",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_mb | 15 |
max_megapixels | 12 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |