ページを遅くしないサイズに画像を変える
カメラのファイルは、幅が5000ピクセルのことがよくあります。記事の段は720ピクセルです。あとから圧縮しても、カメラのファイルをそのまま配信すると通信量が無駄になります。ここで幅を上限にしてから書き出します。
- 速い
- 100%プライベート
- 常に無料
- どのブラウザでも
このページのどこにでも画像を置けます
JPG、PNG、WebP、GIF、SVG、HEIC、AVIF。写真はこの端末に残ります。
使うとき
ピクセルの枠がレイアウトに対して大きすぎるときは、サイズを変えます。枠は合っていて容量だけが大きいときは、圧縮します。
ブログ記事や商品カードなら、幅1200pxが安定した初期値です。同じ画像を2倍の画面でCSS上1200ピクセルとして見せるなら、2400にします。
Instagramの切り抜きやストーリーズには、ソーシャル向けのページを使います。あちらは決まった枠を埋めます。こちらの最大幅は、写真全体を残します。
JSONを整形する、またはトークンを公開サイトに貼らずに中身を見る作業もあるなら ToolBuddyを使います。そちらもブラウザの中で完結します。
手順
- 大きすぎる写真を置きます。
- 最大幅を1200か1600にします。比率で縮めたいとき以外、パーセントは空のままにします。
- 記事の写真なら、品質0.85前後のJPGかWebPで足ります。
- 結果をCMSに入れます。12MBの元ファイルを、同じ欄に一緒に置かないでください。
ヒント
- 400pxのロゴを1200まで拡大すると、ぼやけます。
- ギャラリーの幅がそろっていると、整って見えます。
- サイズを変えたあとも容量が大きいなら、圧縮するかWebPに変換します。
関連
質問
画像は切れますか?
切れません。最大幅は写真全体を残して縮小します。
高さはどうなりますか?
高さは自動で決まり、写真は引き伸ばされません。
縮小したファイルはそちらで預かりますか?
預かりません。ダウンロードして、自分のサイトに置きます。