schwapps.
← All guides

Best Image Size for a Website Blog Post

Choose blog image dimensions that stay sharp without making pages unnecessarily heavy.

There is no single best image size for every blog post. The right size is the size the image will actually occupy on your page, with enough extra detail for high-density screens. Start with the layout, then choose dimensions and a file format that suit the image.

For a standard content column, 1200 × 675 pixels is a practical starting point for a 16:9 feature image. It is wide enough for many article layouts and social previews without being enormous. A full-width hero can need 1600 × 900; an inline image that displays at about 600 pixels wide often works well at 1200 pixels wide. Keep the same aspect ratio when you resize so people and important details do not look stretched.

Choose dimensions from the displayed width

  1. Find the image’s largest displayed width in your page layout. A content image might display at 700 pixels on desktop.
  2. Multiply that width by roughly two for a crisp version on a high-density display. In this example, export a 1400-pixel-wide source.
  3. Keep the intended ratio. For a 16:9 image at 1400 pixels wide, the height is about 788 pixels.
  4. Test the page on a phone as well as a desktop. A responsive site should scale the image down without cropping the subject unexpectedly.
Displayed width: 700px
Screen density:  2x
Source width:    1400px
16:9 result:     1400 × 788px

That calculation is a useful rule of thumb, not a demand to upload a huge original every time. A small logo or screenshot needs only the detail that visitors can see. A wide photo may need more. If your site supports responsive image sources, provide a few widths and let the browser select an appropriate one for the visitor’s screen.

Use the right format and keep the file light

JPEG is usually a sensible choice for photographs. PNG suits screenshots, diagrams, and images that need transparent areas, though it can be much larger. WebP can be a good option where your publishing setup supports it. After resizing, look at the result at normal page size: if it still looks clear, reduce quality or dimensions before uploading.

Use the Schwapps image resizer to set the exact width and height while keeping proportions. It accepts PNG, JPEG, and WebP files up to 20 MB and 40 million pixels; resized output is limited to 16,384 pixels per side. Keep your original file too, so you can make another crop or size later.

Try the 1400-pixel example

Open the resizer and choose a 2400 × 1350 image. Leave Keep proportions checked and enter 1400 in Width (px). Height becomes 788 after rounding. Select Process image, download the result, and preview it in your 700-pixel content column.

If your original has a different ratio, the height will differ. Do not force both dimensions unless you intend to stretch the image; crop separately when your layout requires another shape. Enlarging a small original cannot recover missing detail.

Pixel dimensions and file size are different measurements. Check the downloaded file’s bytes as well as its appearance. The resizer has no quality slider; use the image compressor if you need to adjust JPEG or WebP quality. Write alt text appropriate to the image’s purpose and check the finished page on a phone.

Further reading: MDN’s guide to responsive images.

Open image resizer ↗