概要

このマニュアルは、画像変換サービスの利用者向けに、画像を効率的かつ効果的に変換する方法について詳しく説明します。画像変換の基本から応用まで、幅広い操作をカバーしており、以下の主要な機能に焦点を当てています。

拡大・縮小

画像のサイズを変更する方法と、特定のサイズ要件に合わせて適切に調整するテクニック。

フォーマット変換

画像ファイルの形式を変更し、用途に応じた最適なフォーマットに変換する方法。

画質指定

画像の品質を調整し、ファイルサイズとのバランスを取りながら最適な表示を実現する方法。

アップロード

サービスに画像をアップロードする際の指針と、対応する画像フォーマットやサイズの制限事項。

これらの機能を利用することで、ウェブサイトやアプリケーションでの使用に最適化することができます。各セクションでは、実践的な例を用いて、具体的な操作方法とその効果を解説します。

1. 拡大・縮小

画像のサイズ変更は、ウェブサイトやアプリケーション上で画像を最適に表示するための基本的なステップです。このセクションでは、画像を拡大・縮小するさまざまな方法と、それぞれの用途に合わせた選択肢を解説します。

1.1. 基本的なサイズ変更

画像を拡大・縮小する最も直接的な方法は、幅(w)または高さ(h)を指定することです。この操作では、指定された寸法に合わせて画像の一辺を調整し、もう一辺は元の画像の縦横比を維持しながら自動的に調整されます。

幅指定

URLの末尾に w_{幅} を追加します。例: https://img.resizing.net/…​/w_300 は画像の幅を300ピクセルに設定します。

高さ指定

URLの末尾に h_{高さ} を追加します。例: https://img.resizing.net/…​/h_200 は画像の高さを200ピクセルに設定します。

幅と高さの両方を指定することで、画像を特定のサイズに正確にフィットさせることが可能です。ただし、この方法では元の縦横比が保持されないため、画像が歪む可能性があります。

1.2. 実践例

幅を300ピクセルに設定したい場合

https://img.resizing.net/…​/w_300
w 300

高さを100ピクセルに設定したい場合

https://img.resizing.net/…​/w_100
h 100

幅と高さを同時に指定したい場合

https://img.resizing.net/…​/w_300,h_100
w 300,h 100

このセクションでは、画像を拡大・縮小する基本的な方法について説明しました。 次のセクションでは、縦横比を保持しつつ画像サイズを調整する方法について詳しく見ていきます。

Note

指定できる画像のサイズには制限があります。 以下の制限を超える画像は、エラーが発生します

幅(w)

最大4000px

高さ(h)

最大4000px

1.3. 縦横比を維持するサイズ変更

画像の縦横比を維持しながらサイズを変更するには、c_fitc_limitc_fill などのオプションを使用します。これらのオプションを組み合わせることで、画像の縦横比を保持しつつ、指定されたサイズに合わせて画像を調整することができます。

c_fit

指定された幅と高さの中で最大限に収まるように画像を拡大・縮小します。この方法では、画像の縦横比が保持され、指定された寸法からはみ出さないように調整されます。

c_limit

元の画像サイズが指定された幅や高さよりも大きい場合にのみ、縦横比を保持しながら縮小します。元の画像が指定サイズより小さい場合、画像はそのままのサイズで保持されます。

1.4. 実践例

300x200のサイズに収めたい場合

https://img.resizing.net/…​/c_fit,w_300,h_200
c fit,w 300,h 200

300x200のサイズに収めたいが、元画像が小さい場合はそのまま使用したい場合

https://img.resizing.net/…​/c_limit,w_300,h_200
c limit,w 300,h 200

Note

指定できる画像のサイズには制限があります。 以下の制限を超える画像は、エラーが発生します

幅(w)

最大4000px

高さ(h)

最大4000px

2. 画像を指定サイズにし、元画像を中央に配置

特定のサイズ要件を満たしつつ、画像の縦横比を保持する必要がある場合、c_padオプションが有効です。このオプションを使用すると、元の画像はそのままのサイズで保持され、余白部分は指定した背景色で塗りつぶされます。これにより、画像を中央に配置し、指定されたサイズのキャンバス内に適切に収めることができます。

c_pad

画像を指定サイズにし、元画像を中央に配置します。余白部分は指定した背景色で塗りつぶされます。

2.1. 指定方法

c_padオプションでは、末尾に c_pad,w_{幅},h_{高さ} を指定し、必要に応じて b_{背景色} で背景色も指定できます。背景色はカラーコードまたは特定の色の名称で指定可能です。さらに、背景に特定のエフェクトを適用することもできます。

幅と高さの指定

画像を指定したサイズのキャンバス中央に配置します。

背景色の指定

画像とキャンバスの間の空白部分を指定した色で塗りつぶします。

色の名称: 例えば、b_white、b_blackなど。
HEXコード: b_ffffff(白)、b_000000(黒)など。
エフェクト: b_blurを指定すると、画像自体をぼやけさせた背景として使用できます。

2.2. 実践例

画像を幅350に縮小→400x270のサイズに設定、背景色を灰色に

https://img.resizing.net/…​/w_350/c_pad,w_400,h_270,b_gray
c pad,w 400,h 270,b gray

c_padオプションを使用することで、画像のサイズ変更が必要な場合でも、その品質や縦横比を維持しつつ、デザインの要件を満たすことが可能です。背景色やエフェクトの選択によって、画像の視覚的な魅力をさらに高めることができます。

Note

指定できる画像のサイズには制限があります。 以下の制限を超える画像は、エラーが発生します

幅(w)

最大4000px

高さ(h)

最大4000px

3. 画像内の顔を検出し、検出した顔を中心にクロップ

ウェブサイトやアプリケーション上で人物の画像を扱う際、顔を中心に画像をクロップすることで、より人物に焦点を当てた表示が可能になります。c_faceオプションは、画像内の顔を自動的に検出し、それを中心に画像をクロップする機能を提供します。これにより、手動での調整が不要となり、大量の画像を効率的に処理できます

3.1. 指定方法

c_face オプションを使用するには、URLの末尾に c_face を追加します。必要に応じて、クロップ後の画像サイズをw_{幅}やh_{高さ}で指定することもできます。このオプションは、特にプロフィール画像や人物をメインとした写真集に最適です。

3.2. 実践例

元画像

595cf0ab 03e1 437f b7e0 46087068de67

顔検出してクロップ

https://img.resizing.net/…​/c_face
c face

さらに幅を200pxにリサイズ

https://img.resizing.net/…​/c_face/w_200
w 200

c_faceオプションを使用することで、人物写真を扱う際の画像処理が格段に容易になります。自動で顔を検出し、それを中心に画像をクロップすることで、視覚的に魅力的な結果を得ることができます。

4. フォーマット変換

ウェブやアプリケーションでの画像表示を最適化するためには、画像のフォーマット変換が欠かせません。適切なフォーマットを選択することで、画像のロード時間を短縮し、ユーザーエクスペリエンスを向上させることができます。このセクションでは、サポートされている画像フォーマットと、それぞれの利点について説明します。

4.1. サポートされているフォーマット

画像を変換できる主なフォーマットには、以下のものがあります

JPG

広くサポートされており、バランスの取れた品質とファイルサイズで一般的な用途に適しています。

WEBP

Googleによって開発されたフォーマットで、JPGよりも小さなファイルサイズで同等またはそれ以上の画質を実現できます。最新のブラウザで広くサポートされています。

AVIF

最新の画像圧縮技術を使用し、非常に高い圧縮率を実現しながらも高画質を維持できる新しいフォーマットです。

PNG

透明度をサポートし、細部まで鮮明な画質を保持できるため、ウェブデザインやロゴなどに適しています。

GIF

アニメーションやシンプルなイラストなど、動的なコンテンツに適しています。

4.2. フォーマット変換方法

画像のフォーマット変換は、URLの末尾に f_{フォーマット名} を追加することで行えます。以下に例を示します:

4.3. フォーマット選択のポイント

フォーマットを選択する際には、以下のポイントを考慮することが重要です

互換性

使用するブラウザやデバイスでサポートされているフォーマットを選ぶ。

用途

画像の用途に応じて、画質とファイルサイズのバランスを考える。例えば、高品質な画像が必要な場合はWEBPやAVIFが適しています。

パフォーマンス

特にウェブサイトでの使用を考える場合、画像のロード時間に大きく影響するため、ファイルサイズが小さいフォーマットが望ましい。

画像フォーマットの変換を適切に行うことで、画像の品質を維持しつつ、ウェブページやアプリケーションのパフォーマンスを向上させることが可能です。

5. 画質指定

ウェブページやアプリケーション上での画像表示を最適化するためには、適切な画質の選択が重要です。画質を調整することで、ファイルサイズを削減しつつ、視覚的な品質を維持することが可能になります。このセクションでは、画質を指定する方法と、その影響について説明します。

5.1. 画質指定方法

画質は、URLの末尾に q_{品質} の形式で指定します。ここで {品質} は0から100までの数値で、数値が大きいほど高画質となります。例えば、q_80 は品質を80%に設定します。

高画質

画像の詳細を重視する場合や、高解像度での表示が求められる場合に適しています。ただし、ファイルサイズが大きくなる可能性があります。

中画質

一般的なウェブ用途に適しており、バランスの取れた画質とファイルサイズを実現します。

低画質

ファイルサイズを可能な限り小さくしたい場合に選択します。視覚的な品質は低下しますが、ロード時間の短縮に貢献します。

5.2. 画質とファイルサイズのバランス

画質の指定は、画像の用途に応じて慎重に行う必要があります。高画質で保存すると、画像は美しく鮮明に表示されますが、ファイルサイズが大きくなり、ウェブページのローディング時間が増加する可能性があります。一方で、低画質で保存すると、ファイルサイズは小さくなりますが、画像の細部が失われることがあります。

一般的には、ウェブ用画像では q_70 から q_90 の範囲が、画質とファイルサイズの良好なバランスを提供します。実際の数値は、画像の内容や表示される環境に応じて調整することが重要です。

5.3. 実践例

最高画質(q_100, 178 KB)

https://img.resizing.net/…​/f_jpg/q_100 q 100

ウェブ用途の一般的な画像(q_90, 73 KB)

https://img.resizing.net/…​/f_jpg/q_90 q 90

背景画像やサムネイル(q_70, 48 KB)

https://img.resizing.net/…​/f_jpg/q_70 q 70

画質の指定によって、画像の視覚的な品質とウェブパフォーマンスのバランスを最適化できます。適切な画質設定を行うことで、ユーザーにとって快適なブラウジング体験を提供しつつ、ウェブリソースの効率的な使用を実現することができます。 また画像形式によってもqualityの数値が与える影響が異なるため、実際の画像を用いて検証してください。

Note

qualityの指定には0が指定できます。0を指定した場合はデフォルト値が使用されます
デフォルト値は出力フォーマットによって異なります

6. アップロード

高品質な画像コンテンツの提供は、ウェブサイトやアプリケーションのユーザーエクスペリエンスを大きく向上させます。画像をアップロードする際には、対応するフォーマットやサイズの制限を理解し、適切に準備することが重要です。

6.1. アップロード可能なフォーマット

  • BMP

  • GIF

  • HEIC

  • JPG

  • PNG

  • PDF

  • WEBP

  • AVIF

6.2. アップロード時の制限

アップロード時には、画像のサイズやファイルサイズに特定の制限があります。これらの制限を超える画像は、アップロードプロセス中に自動的にリサイズされるか、エラーメッセージが表示される場合があります。

最大8000px

高さ

最大8000px

ファイルサイズ

最大20MByte