Webサイト用画像トリミングツール
オンライン画像トリミング：ヒーロー、シェア画像、正方形サイズ | We.Inc
1200×630のシェア画像、16:9のヒーロー、正方形、縦長など、Webサイト用のサイズにブラウザー内で画像を切り抜けます。WebP、JPG、PNGで書き出し、ファイルサイズも表示します。アップロードは不要です。
Webサイト用画像トリミングツール
1200×630のシェア画像、16:9のヒーロー、正方形の商品写真などの形を選び、画像をドロップして、使いたい部分に枠をドラッグしてダウンロードします。トリミングはブラウザー内で行われるため写真が端末の外に出ることはなく、WebP、JPG、PNGで保存できます。
Webサイトでよく使うトリミング
- リンクプレビュー（Open Graph）
- 1200 × 630px
Webサイトで使うサイズを中心に作ったトリミングツールです。プリセットを選び、枠を動かしてサイズを変え、形式と画質を設定すると、正確な出力サイズとファイル容量が分かります。複数の画像をまとめて同じ形に切り抜くこともできます。
- トリミングの形を選びます。各プリセットで比率と出力サイズが決まり、「自由」なら任意の長方形をドラッグできます。
- 1枚以上の画像を枠にドロップするか、クリックして選びます。一度に20枚まで開け、どれもアップロードされません。
- トリミング枠をドラッグして構図を決め、青い点をドラッグして大きさを変えます。枠にフォーカスがある状態では矢印キーで少しずつ動かせ、Shiftを押すと速く動きます。
- WebP、JPG、PNG（ブラウザーが作成できればAVIFも）を選び、画質を設定し、必要に応じて最大幅を指定します。
- 「トリミングしてダウンロード」をクリックします。複数の画像を開いている場合、「すべてトリミング」で各画像の同じ位置を中心に同じ形を適用します。
- シェア画像では、顔や文字を端に寄せないようにしましょう。リンクプレビューを正方形に切ったり角を丸めたりするアプリがあります。
- 画質80%前後のWebPは、同じ見た目の画質のJPGより大幅に小さいことが多く、現行のすべてのブラウザーで動作します。
- PNGは、スクリーンショット、ロゴ、単色や透過のあるグラフィックにだけ使いましょう。写真をPNGで保存すると、数倍の大きさになることがよくあります。
- ヒーロー画像は、モバイルで必要な幅より広めに切り抜き、CSSでobject-positionを指定して、狭い画面でも被写体が見えるようにしましょう。
- 画像が拡大されるという警告が出た場合、切り抜いた範囲のピクセル数が目標サイズより少ない状態です。ぼやけた結果で妥協せず、より大きな元画像から始めましょう。
よくある質問
画像はアップロードされますか？
いいえ。画像はあなたの端末上のブラウザーで開かれ、切り抜かれ、保存されます。アップロードの工程はなく、当社のサーバーには何も保存されません。
シェア画像はどのサイズにすべきですか？
1200 × 630ピクセル、比率にして約1.91対1が、ほとんどのリンクプレビューが前提としているサイズです。「シェア画像」プリセットを選べば、ちょうどそのサイズに切り抜けます。
Webサイトの画像に最適な形式は何ですか？
写真にはWebPが無難な標準です。ファイルが小さく、現行のすべてのブラウザーで対応しています。AVIFはさらに小さくできますが、エンコードに時間がかかり、すべてのブラウザーのcanvasで使えるわけではありません。くっきりした輪郭や透過が必要なグラフィックにはPNGを使いましょう。
複数の画像を同じサイズに切り抜けますか？
はい。複数の画像を開き、1枚目の構図を決めてから「すべてトリミング」を使います。各画像は、1枚目のトリミングと同じ相対位置を中心に、同じ形と出力サイズで切り抜かれます。
切り抜いたファイルがぼやけて見えるのはなぜですか？
切り抜いた範囲のピクセル数が出力サイズより少なかったため、拡大されたからです。そうなる場合、ツールは警告を表示します。より大きな元画像を使うか、切り抜く範囲を広げるか、最大幅を小さくしてください。
先に切り抜き、それから圧縮する
- Webサイトで大きすぎる画像のほとんどは、圧縮が悪いのではなく、単にサイズが大きすぎるのです。スマートフォンの写真は幅4000ピクセルもあることが多いのに、ヒーローバナーで1920を超えることはまれで、カード画像なら約1200で足ります。ページで使う形とサイズに切り抜けば、圧縮する前に容量の大半を減らせます。
- 切り抜いた後は、画像圧縮ツールでファイルをもう少し小さくでき、WebP変換ツールならフォルダーごとまとめて処理できます。
適切な形を選ぶ
- 画像がページ上で埋める枠に合わせて切り抜きましょう。テーマが商品写真を正方形のタイルで表示するなら、CSSに予測できない形で端を切らせるのではなく、自分で正方形に切り抜きます。テーマが16:9のヒーローを使うなら、4:5の縦長写真は大きく切られてしまうので、横長の写真を選ぶか、ここで構図を決め直しましょう。
- シェア画像は、プレビューカードを小さなポスターと考えましょう。はっきりした被写体、多くても数語の大きな文字、そして端の近くには大事なものを置かないことです。
ツールに組み込まれたトリミングの形
- 自由
- 切り抜いた範囲そのままのサイズ
- ドラッグした任意の形
- シェア画像 1200×630
- 1200 × 630px
- Open Graphのリンクプレビュー
- ヒーロー 16:9
- 1920 × 1080px
- 全幅バナーや動画のポスター
- ワイドヒーロー 21:9
- 2560 × 1097px
- 低めで映画的なページヘッダー
- 正方形 1:1
- 1080 × 1080px
- 商品写真、アバター、グリッド投稿
- 縦長 4:5
- 1080 × 1350px
- 縦長のフィード投稿や商品写真
- ストーリー 9:16
- 1080 × 1920px
- スマートフォン全画面のストーリー
- カード 3:2
- 1200 × 800px
- ブログや一覧のカード画像
- ファビコン 512
- 512 × 512px
- サイトアイコンの元画像
自由
ドラッグした任意の形
シェア画像 1200×630
Open Graphのリンクプレビュー
ヒーロー 16:9
全幅バナーや動画のポスター
ワイドヒーロー 21:9
低めで映画的なページヘッダー
正方形 1:1
商品写真、アバター、グリッド投稿
縦長 4:5
縦長のフィード投稿や商品写真
ストーリー 9:16
スマートフォン全画面のストーリー
カード 3:2
ブログや一覧のカード画像
ファビコン 512
サイトアイコンの元画像
{name}を画像として読み込めませんでした。
{n}枚の画像を読み込みました。何もアップロードされていません。
{n}枚の画像を読み込みました。何もアップロードされていません。
このブラウザーはその形式で保存できません。WebP、JPG、PNGのいずれかを選んでください。
{w} × {h}の{ext}を保存しました（{size}）。
{n}枚の画像を保存しました（合計{size}）。それぞれこの画像と同じ位置を中心に切り抜いています。
トリミング
トリミングの形
ここに画像をドロップするか、クリックして選択
JPG、PNG、WebP、GIF、AVIFに対応。一度に20枚まで。画像は端末から出ません。
トリミング中の画像：{name}
トリミング範囲。ドラッグするか矢印キーで移動します。
位置 {x}, {y}、{w} × {h}ピクセルで切り抜き
{name}：{iw} × {ih}px。({pos})から{size}を切り抜き。枠をドラッグして移動、青い点で大きさを変更、またはフォーカスして矢印キーで操作できます。
書き出し
形式
画質 {value}
（PNGは可逆圧縮）
最大幅（px、任意）
切り抜きサイズを維持
出力：
· 切り抜いた範囲がこれより小さいため拡大され、ぼやけて見える可能性があります。大きめの写真を使うか、サイズを小さくしてください。
トリミングしてダウンロード
{n}枚すべてを同じようにトリミング
画像を追加
クリア
トリミング結果、{w} × {h}ピクセル、{size}
トリミングの形
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る