Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11There is no single pixel size that works for every website image. Choose dimensions for the image’s job and its displayed slot: a content image, thumbnail, logo, hero, and social preview may need different widths, heights, and crops. For a general social link preview, 1200 × 630 px is a useful cross-platform starting canvas; for ordinary page images, responsive variants are usually more useful than one fixed size.
How to choose website image dimensions
Start with where the image appears, how large it will render, and whether the destination crops it. Pixel dimensions describe the image file; they do not dictate how wide it appears in a responsive page. A 1200-pixel-wide image may render in a 600-pixel slot, while a small thumbnail may be displayed at a fraction of that size.
- Identify the placement. Is this a content image, thumbnail, logo, hero image, or social preview? These uses have different shapes and display needs.
- Check the rendered slot. Determine the largest width the layout uses at relevant breakpoints. For high-density displays, a source wider than the rendered slot can preserve detail, but needlessly oversized files add download weight.
- Choose the aspect ratio and crop. Keep the subject visible at the intended shape. A platform may crop an image that falls outside its supported ratio.
- Provide appropriate variants. For responsive page images, offer candidate widths and let the browser select an asset suited to the slot and display.
- Optimize and describe it. Use a suitable format and file weight, a descriptive filename, and concise alt text when the image conveys content.
Google’s guidance is about selection and implementation rather than a universal pixel recipe: it recommends an image that is relevant and representative of the page, and a high-resolution image when possible. Google Search Central’s image guidance also cautions that images can contribute substantially to page size.
Practical dimensions by placement
These figures are not interchangeable. LinkedIn’s value is its documented specification; the social-network sizes below are recommendations from a secondary reference, not universal website dimensions or official requirements for every placement.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Placement | Dimensions or guidance | What the figure means |
|---|---|---|
| Responsive content image | No fixed size established. Google’s example candidate widths are 320, 480, and 800 px. | Use widths that suit your layout; Google’s numbers are examples, not mandatory targets. Supply a fallback and responsive candidates. |
| General social link preview | 1200 × 630 px (about 1.91:1) | A practical cross-platform working canvas from URLpipe’s cross-platform guide, not a guarantee every service displays it identically. |
| LinkedIn website share | Minimum 1200 × 627 px; recommended 1.91:1; maximum file size 5 MB | LinkedIn Help’s documented guidance. It says images below 401 px wide display as thumbnails. The page labels itself as last updated two years before its 2026 access, so verify it for time-sensitive work. LinkedIn Help |
| Instagram feed post | 1080 px wide; ratios from 1.91:1 to 4:5 | Hootsuite’s September 2026 reference recommends this width and reports cropping outside the supported ratio range. Grid presentation can differ from the feed. Hootsuite’s social image sizes guide |
| Instagram Stories and Reels | 1080 × 1920 px (9:16) | Hootsuite’s September 2026 quick reference. Keep important content clear of interface overlays and safe-area edges. |
| Facebook feed post | Landscape 1080 × 566 px; portrait 1080 × 1359 px; square 1080 × 1080 px | Hootsuite’s recommendations vary by shape and placement. |
| X in-stream photo | Landscape 1280 × 720 px; vertical 720 × 1280 px; square 1080 × 1080 px | Hootsuite’s September 2026 secondary-reference figures, not an official current X specification. |
Do not apply a social-feed recommendation automatically to a site-builder preset, ad unit, CMS thumbnail, or banner. The right dimensions depend on the destination’s actual crop and display behavior; the figures above do not establish sizes for every such slot.
Make ordinary page images responsive
Responsive image markup lets a browser select among files at different widths instead of forcing every visitor to download the same large image. Put a usable fallback in src, list candidate files in srcset, and use sizes to describe the expected rendered width at different viewport sizes.
<img
src="/images/coast-800.jpg"
srcset="/images/coast-320.jpg 320w,
/images/coast-480.jpg 480w,
/images/coast-800.jpg 800w,
/images/coast-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 80vw,
800px"
width="1200"
height="800"
alt="Rocky coastline beside blue water"
>In this example, the width descriptors identify each candidate’s intrinsic width. The sizes value tells the browser that the image is expected to use the viewport width through 600 px, 80% of the viewport through 1000 px, and 800 px beyond that. Change those values to match the real layout; the sample is not a universal sizing rule. The width and height attributes describe the source dimensions and help the browser reserve the image’s aspect ratio.
Google documents srcset on img and the picture element as responsive options, while recommending a fallback URL in src because some browsers and crawlers may not understand responsive attributes. Use picture when the browser should receive grouped alternate sources, such as different image formats or art direction for different contexts. Google’s image guidance covers these patterns.
<picture>
<source type="image/avif" srcset="/images/coast-800.avif">
<source type="image/webp" srcset="/images/coast-800.webp">
<img src="/images/coast-800.jpg"
width="1200" height="800"
alt="Rocky coastline beside blue water">
</picture>This format example supplies one candidate per source. For width-based selection, provide appropriate srcset candidates and, where needed, sizes on the relevant source and fallback. Ensure each URL points to a real file whose extension matches its format.
Set a useful social preview image
A page’s social preview is separate from the responsive image shown in its article body. A practical starting point is a 1200 × 630 px image at about 1.91:1, but check the platform that matters: services can crop, compress, or impose different constraints. LinkedIn’s documented minimum and file limit are listed above; do not assume they define requirements for other networks.
Open Graph metadata can identify the preferred preview image:
<meta property="og:image" content="https://example.com/images/page-share.jpg">Replace the example URL with the publicly reachable image for the page. Google recommends that a preferred og:image or schema.org image be relevant and representative, avoiding generic choices such as a site logo or an image with text. It also recommends avoiding extreme ratios and using high resolution where possible. A social preview may be designed with text for a social platform, but do not assume that makes it the best representative image for search presentation.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteFormat, file weight, filenames, and alt text
Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF images referenced in an img element’s src. Choose a format that fits the image and your delivery needs; the guidance does not prescribe one format for every asset. Match the filename extension to the file’s actual type. Google’s supported image formats and guidance provide the relevant details.
Rank #3
- Keep downloads proportionate. Larger pixel dimensions and heavier encoding can increase page weight. Deliver enough detail for the rendered slot without sending a huge original to every visitor.
- Use clear filenames. A descriptive name can offer a useful clue about the image subject, but it is not a substitute for relevant content or alt text.
- Write useful alt text. Describe the image in context for people who cannot see it, including screen-reader users. Keep it concise and do not stuff it with keywords. Decorative images that add no meaningful information should not receive a needless description.
Or skip the browser setup
If you need a screenshot of a page rather than a resized image asset, ScreenshotNeo is a website screenshot API and MCP server for developers. Its API returns a PNG, JPEG, WebP, or PDF from one GET request. The image’s dimensions and crop still depend on the capture options you choose; a screenshot is not a replacement for selecting and serving appropriate responsive image files on your site.
For a simple capture, replace the example URL with the page you want and use your API key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for parameters and response details. Cookie banners, newsletter popups, and chat widgets are removed before the shot; those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Recommended Free Tools
Sign up free for 1,000 screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting image sizing problems
The image looks blurry
Check the rendered width against the selected file’s pixel width, especially on high-density displays. Confirm that the browser has candidate sources large enough for the slot, and that CSS is not enlarging a small thumbnail beyond its intended size.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The subject is cut off
Inspect the destination’s aspect ratio and crop, not just the source dimensions. For social feeds, use a ratio the platform supports; Hootsuite’s September 2026 Instagram reference reports that feed images outside 1.91:1 to 4:5 are cropped. Keep key subjects away from edges likely to be trimmed.
The browser downloads an unexpectedly large file
Check the candidate widths in srcset, the slot description in sizes, and the actual layout. If sizes claims an image occupies more screen width than it does, the browser may choose a larger candidate. Make variants that correspond to real display needs and inspect network requests at relevant viewport widths.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The image does not load or a format is missing
Verify that every candidate URL resolves, the server returns the correct content, and the extension matches the actual file type. Keep a working src fallback when using srcset or picture; do not assume all clients support every responsive attribute or format.
The social preview uses the wrong image
Check that the page’s og:image points to the intended, accessible image and that the image is representative of the page. Confirm dimensions, aspect ratio, and file size against the destination’s own documented guidance; a general 1200 × 630 px canvas does not guarantee identical rendering on every service.
FAQ
Should every image on a website be the same size?
No. Content images, thumbnails, logos, hero images, and social previews serve different layouts and can require different ratios and dimensions.
Is 1200 × 630 px an official requirement for every social platform?
No. It is a practical cross-platform recommendation from a secondary reference. Platform-specific specifications can differ; LinkedIn, for example, documents a 1200 × 627 px minimum and a 5 MB maximum.
Free tools Windows power users keep installed
One-click scans. No signup required.
Does a larger image always improve search visibility?
No such universal rule is established here. Google advises using a relevant, representative image and high resolution when possible, while also noting that images can contribute to page weight.
Which image formats does Google Search support?
Google lists BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF for images referenced in an img element’s src.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
