Best Image Sizes for Blogs and Websites

Here is a question that sounds simple until you actually sit down to answer it: what size should my images be?

Not the file size. The pixel dimensions. The width and height of the actual image before you even think about compression.

Most guides throw a table of numbers at you and call it done. But a number without context is almost useless. A 1920-pixel wide image is correct for a homepage hero and completely wrong for an inline blog photo. Understanding why helps you make better decisions than any cheat sheet can.

So before the numbers, a short mental model. Then the numbers.

Why Dimensions Matter as Much as Compression

When you put an image on a web page, two things happen. First, the browser downloads the file. Then it renders it at whatever size your CSS says it should be. These two sizes are often wildly different.

A common situation: a photographer uploads a 4500x3000 pixel JPEG directly from their camera. The blog layout displays it at 800 pixels wide. The browser downloads 13.5 million pixels, throws away 11 million of them, and renders the remaining 2.4 million. Every visitor paid the bandwidth cost of the full file and got no visual benefit from it.

File size scales roughly with the square of the dimensions. That 4500-pixel wide image has about 31 times as many pixels as an 800-pixel wide version of the same photo. Resizing before uploading is often more impactful than compression alone, because you are reducing the raw amount of data rather than just encoding it more efficiently.

The practical rule: always resize your images to match approximately how large they will display on the page, before you upload them. Not exactly, because screens vary and responsive layouts scale, but approximately. A content column that is 800 pixels wide does not need a 4000-pixel image. A hero section that spans 1920 pixels does.

Hero Images

The hero image is usually the largest element on the page and almost always the LCP element, the one Google measures for Largest Contentful Paint. It gets the most attention and deserves the most care.

Dimensions: 1920x1080 pixels is the standard. This matches the most common desktop screen resolution and gives you a 16:9 aspect ratio. Some designers use slightly shorter heroes, around 1920x800 or 1920x600, to keep more content visible above the fold without scrolling. Both work. The width is what matters most, and 1920 covers virtually all desktop screens without upscaling.

For sites where many visitors use ultrawide monitors or 4K displays, going to 2560 pixels wide is defensible. But for most blogs and content sites, 1920 is the right ceiling.

File size: This is where most sites get it wrong. Hero images average 1-2MB on typical WordPress installations according to performance analysis from ShortPixel. After proper compression and format conversion, that same image should sit under 200KB. That is a 5-10x reduction with no visible quality difference at normal viewing distances. The hero image is directly responsible for your LCP score, and a 1.5MB hero will fail the 2.5-second threshold on almost any mobile connection.

Format: WebP. Convert your hero from JPEG or PNG to WebP before uploading. WebP produces files 25-35% smaller than JPEG at equivalent quality. AVIF goes further but is newer. Either format is fine for hero images. The JPG to WebP converter and PNG to WebP converter handle this in the browser with nothing uploaded.

One critical note: never apply lazy loading to your hero image. Lazy loading defers image loading until the image is near the viewport. Your hero image is already in the viewport. Applying lazy loading to it means the browser deliberately delays loading the most important image on the page, which directly hurts your LCP score. Load the hero immediately, lazy load everything else.

Blog Post Featured Images

Featured images, also called cover images, appear at the top of blog posts and in blog index grids. They also double as the image that shows up when the post is shared on social media, which makes the aspect ratio choice important.

Dimensions: 1200x630 pixels is the standard recommendation for blog featured images. The 1.91:1 aspect ratio is the Open Graph standard used by Facebook, LinkedIn, X (Twitter), Slack, and Discord. That means your featured image serves double duty: it works as the visual header on your post page, and it also renders correctly when someone shares your article on any major platform without needing a separate social sharing image.

If your blog layout calls for a different display ratio (some themes use a taller 4:3 crop, some use a wider cinematic ratio) you can size accordingly for display, but have a 1200x630 version ready for the Open Graph meta tag.

File size: Under 100KB is achievable and appropriate. A 1200x630 pixel image at WebP quality 80% typically lands between 40KB and 90KB depending on the subject matter. A photo of a person against a plain background compresses very differently from a complex outdoor scene, but both can usually reach under 100KB without visible loss.

Format: WebP, compressed to 75-85% quality. If you are still uploading JPEG, you are serving featured images that are unnecessarily large. The same 1200x630 photo that is 280KB as a JPEG is typically around 180KB as WebP quality 85, and around 120KB at quality 75. For the same output.

Inline Blog Content Images

These are the photos and illustrations within the body of an article. Diagrams, screenshots, product photos used as examples, charts. They sit inside your content column.

Dimensions: Match the column width. Most blog layouts have a content column between 680 and 900 pixels wide. An image that spans the full content width should be no wider than the column. If your column is 750 pixels wide, upload a 750-pixel wide image, or 1500 pixels wide if you want to serve a 2x version for Retina displays (more on that in a moment).

Inline images that are not full-width, side floats, callout boxes, or images that share horizontal space with text should be sized to their actual display width, which is often 300-500 pixels.

File size: Under 150KB for a full-width content image. Under 80KB for smaller inline images. These are not hero images. Nobody came to the page for these specifically. They should be as small as they can be while remaining clear.

Format: WebP for photos. SVG for diagrams, icons, and illustrations with flat colors. PNG is appropriate for screenshots where text sharpness matters, though converting screenshots to WebP still saves meaningful size without visible degradation at typical screen sizes.

Retina Displays and the 2x Question

Most modern smartphones, MacBooks, and many Windows laptops have high-density displays, commonly called Retina displays after Apple's marketing term. These screens pack two physical pixels into the space of one CSS pixel, which means a 400-pixel wide image displayed at 400 CSS pixels wide is actually rendered across 800 physical pixels. If you only supplied 400 pixels of data, the display interpolates, and the result looks slightly soft.

The implication: for images where sharpness matters, especially featured images and hero images, upload at 2x the display size. An image that displays at 1200 pixels wide should be 2400 pixels wide in the source file.

But do not do this for everything. A 2x image is four times as many pixels, which means significantly larger file sizes even with compression. The practical approach is to use the srcset attribute in HTML to serve different sizes to different screens. For a blog featured image displayed at 800 pixels wide, you provide an 800px version for standard screens and a 1600px version for Retina:

<img
  src="cover-800.webp"
  srcset="cover-800.webp 800w, cover-1600.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="..."
/>

This lets the browser pick the right version based on the actual screen. Standard displays download the smaller file. Retina displays get the sharper one. Both groups get an appropriate image.

If implementing srcset feels complex for your setup, a reasonable simplification is to upload at 1.5x the display size. An image displayed at 800 pixels uploaded at 1200 pixels looks sharp on most Retina displays while keeping file sizes manageable. Not technically optimal, but practical.

Thumbnail Images

Thumbnails appear in blog index pages, related post grids, search result pages, and sidebar widgets. They are small, they are numerous, and they add up.

Dimensions: 400x300 pixels for landscape thumbnails, 300x300 for square thumbnails. Some layouts use 600x400. The exact size depends on your grid design, but the general principle is to match the display size as closely as possible. Serving a 1200-pixel image in a 300-pixel thumbnail slot means downloading 16 times as many pixels as necessary.

File size: Under 30KB per thumbnail. At this size and quality, 20-25KB is achievable for most subjects. A blog index page with 12 thumbnails and each image at 30KB adds 360KB of images total. The same index with unoptimized 300KB thumbnails adds 3.6MB. The difference in load time is visible and measurable.

Format: WebP. Thumbnails benefit from modern format compression more than any other image type because of how many exist on a single page and how much they stack up in total.

Open Graph Images

Open Graph images are the pictures that appear when someone shares a link to your page on social media. They are not displayed on your actual web page. They are embedded in meta tags and retrieved by the social platform when generating a link preview.

Dimensions: 1200x630 pixels. This is the specification recommended by Facebook and accepted by LinkedIn, X, Slack, Discord, and essentially every other platform that renders link previews. The 1.91:1 aspect ratio works without cropping on all major platforms.

If your featured image is already 1200x630 pixels, you can use the same image for both purposes. That is the practical reason the 1200x630 standard exists for featured images: one correctly sized image serves both roles.

Keep your face and important content within the center safe zone. Most platforms apply circular or rectangular crops at various sizes. Important elements positioned at the extreme edges can get cut off in smaller preview contexts.

File size: Under 300KB. Open Graph images are retrieved by social platform crawlers, not rendered as part of your page load. File size matters less here for page performance, but oversized Open Graph images can fail to generate previews entirely. Some crawler implementations time out on large files. Under 300KB gives you a safe margin.

Background Images

Background images span the full page width and often the full viewport height. They are decorative in most cases, which changes the quality calculation. A photo used purely as a textured background behind text can be compressed more aggressively than a feature photo where sharpness is the point.

Dimensions: 1920x1080 pixels covers all standard desktop displays. If you expect a significant portion of your visitors to use 4K monitors or ultrawide screens, 2560 pixels wide is more appropriate. For most content sites, 1920 is sufficient.

File size: Under 200KB, and lower is better. Background images are full-page but often relatively uniform in texture, which means they compress well. A typical office interior or abstract texture background that is 800KB as JPEG can often come down to 130KB as WebP quality 75 with no perceptible change to the background appearance.

Heavy backgrounds are a common culprit on landing pages and portfolio sites. A beautiful full-screen photo background that looks impressive in a design mockup becomes a multi-second page load in production when nobody thought about the file size.

Product Images for E-Commerce

Product photos live on their own category because the requirements differ from content images. A product photo needs to be zoomed into. The quality floor is higher.

Dimensions: 800x800 pixels minimum for square product photos, 1000x1000 or 1200x1200 for anything that supports zoom functionality. Many e-commerce themes display product thumbnails at 300x300 and expand to 800x800 or full size on hover or click. Serving an 800x800 image that gets displayed at 300x300 is appropriate here, unlike the general rule of matching display size, because the larger version is what appears in the zoom view.

File size: 100-200KB for a standard product photo at 800x800. Higher-quality product images where fine texture matters (textiles, jewelry, detailed craftsmanship) can go up to 300KB, but pushing beyond that rarely serves visitors who are on mobile connections.

A Practical File Size Reference

Putting the targets together in one place:

Hero images at 1920x1080: under 200KB as WebP. Featured blog images at 1200x630: under 100KB as WebP. Inline content images at column width: under 150KB as WebP. Thumbnails at 300-400px: under 30KB as WebP. Background images at 1920x1080: under 200KB as WebP. Open Graph images at 1200x630: under 300KB as JPEG or WebP.

These are targets, not hard limits. A photo of a dense forest with fine detail in every pixel is going to compress less efficiently than a photo of a person against a plain wall. The targets give you a benchmark to measure against.

Before You Upload: The Right Order of Operations

The mistake most people make is uploading the original file and relying on their CMS or image hosting to handle the rest. WordPress does generate multiple sizes from an uploaded image, but it does so from whatever you gave it. Upload a 15MB RAW photo and WordPress will generate smaller sizes of a 15MB starting point, keeping the original at full size in your media library and potentially using it in the wrong contexts.

Better approach: resize to the appropriate dimensions first, then compress, then upload.

The image resize tool lets you set exact pixel dimensions. For the hero images at the exact sizes covered here, the specific tools save the step: 1920x1080, 1280x720, 1080x1080, and 800x600 all resize and prepare for download in the browser.

After resizing, compression brings the file size down to the targets above. The compression tools at ImgTweak run entirely in the browser with nothing uploaded to a server. Convert format, compress, and download. The image compression and Core Web Vitals guide covers why these file sizes matter for search rankings specifically if you want the SEO angle in detail.

For images that still look too large after compression, compressing to 100KB, 150KB, or 200KB directly gives you a specific target rather than guessing at quality settings.

The One Number to Remember

If you walk away with only one thing from this article, make it this: 1200 pixels wide covers almost every content image on a standard blog or website. Not hero images, which want 1920. Not thumbnails, which want 300-400. But for the bulk of what most sites serve, a well-compressed WebP image at 1200 pixels wide and under 150KB will look sharp on every device, pass Core Web Vitals, and cost your visitors almost nothing in bandwidth.

Most image size problems come down to uploading full camera resolution photos and never touching them again. Resize first. Compress after. Convert to WebP. That sequence, done consistently, puts you ahead of the majority of sites on the web.