画像をパーセントでリサイズ
パーセンテージ・リサイズ計算ツールは、画像処理で最もシンプルな問いに答えます。この画像を40パーセントに縮小すると、幅と高さは何ピクセルになるのか?元の幅と高さ、そしてパーセンテージを入力するだけで、整数ピクセルに丸められた結果の寸法と、最終的なメガピクセル数が返されます。純粋な算術処理であり、画像のアップロード・加工・保存は一切行われないため、ブラウザ上で瞬時に動作します。また、ビルドスクリプト、サムネイル生成パイプライン、画像がまだ存在しない段階で占有するボックスの正確なサイズを知る必要があるレイアウト計算の中でも、API経由でまったく同じ結果が得られます。
無料で実行
パーセンテージ・リサイズが見た目ほど単純ではない理由
画像をパーセンテージで拡大縮小する処理は一見すると掛け算1回に見えますが、レイアウトが崩れるかどうかは細部で決まります。640.5ピクセルというものは存在しないため、各辺は独立にスケーリングし、整数ピクセルに丸める必要があります。1920を33パーセントで安直に計算すると633.6になり、どのレンダラーも受け付けませんが、この計算ツールは634を返します。丸めのルールが最も重要になるのは小さな画像です。11ピクセルのアイコンを15パーセントに縮小すると1.65ピクセルとなり、正直な答えは2であって、アスペクト比を密かに歪めてしまう切り捨ての1ではありません。画像に触れる前にこれらの数値を得ることで、サムネイル処理で正しいキャンバスサイズを事前に確保したり、画像読み込み時にページが再レイアウトされないようHTMLに正しいwidth属性とheight属性を記述したり、バッチリサイザーが要求どおりの出力を生成したかを検証したりできます。画像をパーセンテージでリサイズするこのツールは、この計算を決定論的に実行するため、ブラウザで表示される答えは、APIがコードに返す答えと完全に一致します。
計算の仕組み
計算式は1次元につき1行です。新しい辺の長さは、元の辺にパーセンテージを掛けて100で割り、最も近い整数ピクセルに丸めた値です。パーセンテージが50なら画像は半分に、100なら変更なし、250なら2.5倍に拡大されます。幅と高さの両方に同じ係数が使われるため、アスペクト比が保たれます。整数ピクセルでは正確な比率を表現できない場合に生じるサブピクセル単位の丸め誤差は避けられませんが、それを除けば比率は維持されます。結果には出力画像のメガピクセル数も含まれます。これはファイルサイズとメモリコストを実際に予測する数値です。50パーセントへの縮小はピクセル数を半分にするのではなく4分の1にします。面積は辺の二乗で増減するからです。パーセンテージは正の値である必要があり、ゼロや負の値は無効な入力として拒否されます。寸法ゼロの画像を黙って生成することはなく、計算結果の辺が1ピクセルを下回ることもありません。このページの例はすべて実際のハンドラーを実行して生成されているため、読んだものがそのまま得られる結果です。
実際のワークフローでの位置づけ
フロントエンド開発者は、レスポンシブなsrcsetエントリーの計算にこのツールを使います。2400ピクセルのマスター画像から、25、50、75パーセントのバリアントはそれぞれ600、1200、1800ピクセルとなり、その数値がそのままマークアップに書き込まれます。デザイナーは、クライアントからニュースレター用に写真を30パーセントで求められた際に、結果がメールテンプレートの最小幅を満たしているか確認するために使います。バックエンドエンジニアはパイプラインのチェック内でAPIを呼び出し、リサイザーが生成した寸法と生成されるべきだった寸法を比較し、一致しなければジョブを失敗させます。この機能はファイル処理を伴わない純粋な数学処理なので、何度実行してもコストはかかりません。このページのブラウザ版は無料で無制限に利用でき、自動化する場合のAPIも1回の呼び出しにつき$0.002だけです。寸法の計算ではなくピクセルそのものを変換する必要がある場合は、別の機能になります。この機能は、計画の段階が正確で高速、そしてバッチ内のすべての画像に対して実行できるほど安価であるために存在しています。
活用例
レスポンシブなsrcsetバリアントの計画
マスター画像から25%、50%、75%の各バリアントの正確なピクセル幅を、マークアップを書く前に算出します。
バッチリサイズ処理の検証
サムネイルパイプラインが生成した寸法と、パーセンテージから導かれるべき寸法を比較し、不一致ならジョブを失敗させます。
クライアントからの依頼に正確に回答
ニュースレター用に写真を30パーセントで、という依頼。書き出す前に、結果がテンプレートの最小幅を満たすか確認します。
よくある質問
料金はいくらですか?
このページのブラウザ版は無料で無制限です。API経由の場合は1回の呼び出しにつき$0.002です。
画像をアップロードする必要がありますか?
いいえ。幅、高さ、パーセンテージを入力するだけです。アップロード、加工、保存されるものは何もありません。
寸法はどのように丸められますか?
各辺にパーセンテージが掛けられ、最も近い整数ピクセルに丸められます。結果が1ピクセルを下回ることはありません。
縮小だけでなく拡大もできますか?
はい。100を超えるパーセンテージは画像を拡大します。200で各辺が2倍に、250なら2.5倍になります。
パーセンテージが拒否されたのはなぜですか?
パーセンテージは正の数値である必要があります。ゼロや負の値は無効な入力であり、呼び出し料金は発生しません。
50%にリサイズするとピクセル数は半分になりますか?
いいえ。各辺が半分になるため、面積は辺の二乗で変化し、合計ピクセル数は4分の1になります。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/resize-percentage \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":1920,"height":1080,"percentage":50}'const res = await fetch("https://api.kit.forhosting.com/image/resize-percentage", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 1920,
"height": 1080,
"percentage": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/resize-percentage",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 1920,
"height": 1080,
"percentage": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/resize-percentage", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":1920,"height":1080,"percentage":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":1920,"height":1080,"percentage":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/resize-percentage", 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,
"percentage": 50
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.resize_percentage",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |