Recommended Free Tools
There is no single pixel size that works for every website slider. Measure the slider at its desktop, tablet, and mobile breakpoints, decide how much cropping is acceptable, then provide responsive image candidates so the browser can choose a suitable file for each display.
What image dimensions should a website slider use?
Size the image to the space in which it actually appears—not to a supposed universal slider preset. The right source dimensions depend on the slider’s rendered width and height, its aspect ratio, whether it crops the image, and the pixel density of the display. A large image sent to every visitor can waste bytes; an image that is too small for a large or high-density display can look soft.
Start with the frame’s dimensions at each important breakpoint. If the frame is 1200 pixels wide when rendered, for example, account for whether the design must look sharp at a device pixel ratio above 1. That does not mean every visitor needs a file twice as wide: use responsive candidates and let the browser select from them based on the slot and display. The web.dev guidance is to consider screen size, resolution, and page layout when choosing an image (responsive image guidance).
WordPress likewise recommends avoiding a fixed height unless the image must fit a specific design, because fixed heights can be harder to control across screen sizes (WordPress image block documentation). A fixed ratio can still be right for a deliberately designed banner; make that choice explicitly rather than assuming a particular pixel preset is standard.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Measure the slider before preparing images
- Inspect the rendered frame. In your browser’s developer tools, select the slider image or its frame and note its rendered width and height at desktop, tablet, and mobile sizes.
- Record each ratio. Divide width by height for each frame. If the layout keeps the same ratio, the image can scale proportionally. If the frame becomes much taller or changes composition on mobile, plan a separate crop.
- Choose a crop policy. Use a full-image fit when every part must remain visible, or edge-to-edge cropping when filling the frame matters more than preserving the edges.
- Set the largest candidate. Base it on the largest rendered slot and the density you need to support. Add smaller width candidates for narrower slots rather than serving one oversized file everywhere.
- Check the result in the actual layout. Confirm that the browser’s selected file is appropriate for the slot and that the crop keeps the important subject visible.
There is no evidence-based universal slider width or height to substitute for these measurements. Two sliders with different frame shapes, layouts, or crop requirements should not automatically use the same source dimensions.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose between proportional scaling and a mobile crop
Keep one composition when it works at every size
If the subject and composition remain clear as the frame narrows, keep the same image and aspect ratio. The image can scale proportionally without a special mobile version. This is the simpler choice and avoids maintaining unnecessary assets.
Use art direction when mobile needs a different composition
When a wide desktop image becomes cramped, crops out the subject, or leaves an unhelpful composition on a narrow screen, supply a deliberately different mobile crop with the HTML <picture> element. Art direction means choosing a different image or crop for a display condition, not merely shrinking the same source.
Use <picture> for that deliberate change. Use srcset and sizes to offer multiple widths of an image for the same composition. These solve related but different problems: art direction chooses which composition to show, while responsive candidates help the browser choose a suitable file size.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsUse cover or contain according to the design
cover: fill the frame, accepting a crop
With object-fit: cover, the image fills the frame while keeping its proportions, so some edges may be cropped. This is useful for decorative, edge-to-edge slider imagery. If the subject must remain visible, set a focal point and check it at every breakpoint; a crop that works on desktop may cut into the subject on mobile.
Rank #2
contain: show the whole image, accepting empty space
With object-fit: contain, the whole image remains visible, but the frame may show empty space around it. This is appropriate when cropping would remove meaningful content, such as a graphic that must be seen in full. The layout must account for the remaining space rather than treating it as an image failure.
WordPress’s image controls document crop and focal-point options for its editor; the precise controls available depend on the editing context (WordPress image block documentation).
Serve responsive candidates with srcset and sizes
For an image that keeps the same composition, give the browser width candidates in srcset and describe the displayed slot with sizes. The values below are illustrative: replace the widths, file names, and slot expression with candidates you actually generate and the dimensions your layout really uses.
<img
src="/images/slider-1200.jpg"
srcset="/images/slider-480.jpg 480w,
/images/slider-800.jpg 800w,
/images/slider-1200.jpg 1200w,
/images/slider-1800.jpg 1800w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 90vw,
1200px"
width="1200"
height="675"
alt="A team reviewing a design on a large screen">The width descriptors (such as 800w) tell the browser the actual width of each candidate. The sizes expression describes the slot width under the stated conditions; it is not a list of image widths. Make it reflect the real layout. If the slider is only 90% of the viewport at a breakpoint, saying 100vw there may lead the browser to select a larger candidate than the slot needs.
The width and height attributes above describe the image’s intrinsic dimensions and ratio. They do not force the rendered image to stay 1200 pixels wide when responsive CSS is applied. Use a meaningful alt description for informative images; for purely decorative images, use empty alt text (alt=""). The web.dev responsive-image guidance covers responsive markup and alternative text.
Use picture for a different mobile crop
This example serves a portrait-oriented crop at a narrow viewport and a wide composition elsewhere. The file names and breakpoints are examples, not recommended universal settings; use your measured layout and generated assets.
<picture>
<source
media="(max-width: 600px)"
srcset="/images/slider-mobile-480.jpg 480w,
/images/slider-mobile-800.jpg 800w"
sizes="100vw">
<img
src="/images/slider-desktop-1200.jpg"
srcset="/images/slider-desktop-800.jpg 800w,
/images/slider-desktop-1200.jpg 1200w,
/images/slider-desktop-1800.jpg 1800w"
sizes="(max-width: 1000px) 90vw, 1200px"
width="1200"
height="675"
alt="A team reviewing a design on a large screen">
</picture>For art-directed sources with a different ratio, ensure the layout reserves the correct mobile frame ratio too. Do not assume the desktop image’s intrinsic dimensions describe a differently shaped mobile crop. The web.dev guidance explains responsive image markup and the role of <picture>.
Reserve space so the slider does not jump
When the browser does not know an image’s dimensions before it loads, later layout can shift content. Give the image intrinsic width and height attributes, or reserve the frame with CSS aspect-ratio. The declared ratio should match the intended frame; for art-directed mobile crops, use breakpoint-specific frame sizing where needed.
Rank #4
.slider-frame {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.slider-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}This example deliberately imposes a 16:9 frame and fills it with a crop. If your design needs the full image, use object-fit: contain instead and account for any empty space. If the frame should grow naturally with the image, do not force a ratio just to make this example fit. web.dev recommends proper width and height attributes so the browser can allocate layout space before loading (image dimensions and responsive markup); CSS aspect-ratio is another way to express the frame shape.
Reduce bytes without sacrificing the intended appearance
Responsive delivery is a practical balance: the browser needs a candidate wide enough for the rendered slot and display density, but sending the largest file to every screen wastes data. Generate candidates that correspond to the sizes your layout actually presents, then verify selection in developer tools. A file much wider than a fixed content area may disrupt layout, and serving correctly sized images avoids unnecessary transfer (WordPress image block documentation; web.dev responsive image guidance).
Check the loaded image’s natural dimensions, its rendered dimensions, and the selected source in the browser’s network and element panels. If a mobile visitor receives the largest desktop asset despite a smaller slot, inspect the sizes expression and the candidate list. If the selected file is too small for the slot and looks soft, add a suitable larger candidate. Avoid adding many near-duplicate widths without a layout need: variants are useful when they give the browser meaningful choices.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
WordPress and other CMS workflows
WordPress generates multiple image sizes and can emit responsive image markup. That does not remove the need to check the theme’s layout: its sizes value should describe the actual slider slot, not a generic content width. Inspect the rendered HTML and test the selected candidate at each breakpoint. For other content systems, look for equivalent controls for image variants, focal points, crop behavior, and responsive markup; names and capabilities differ by product and theme.
Common slider image sizing problems
- The subject is cut off. The frame is using a crop, often through
cover. Adjust the focal point or provide a different mobile crop with<picture>. - Empty bands appear around the image. The image is being contained within a differently shaped frame, or the source and frame ratios differ. Keep the full image only if that space is acceptable; otherwise choose an intentional crop.
- The image looks soft on a large display. Check the rendered slot, device density, and selected candidate. Add a larger width candidate if none adequately serves that combination.
- The page shifts when the image arrives. Reserve the correct space using intrinsic dimensions or
aspect-ratio; ensure the chosen ratio matches the active crop and breakpoint. - Mobile downloads an unnecessarily large image. Verify that
sizesdescribes the mobile slot accurately and that narrower candidates are included insrcset. - The image’s dimensions distort the layout. Check the frame CSS and whether fixed width or height is overriding the intended proportion. Use proportional scaling or a deliberate ratio and crop policy.
Or skip the browser setup
If you need a screenshot of how a page currently renders while checking a slider, ScreenshotNeo is a website screenshot API and MCP server. It can capture a URL as PNG, JPEG, WebP, or PDF; it does not replace measuring the layout or preparing responsive image assets.
One GET request returns the capture. This cURL example saves a WebP screenshot of the target page:
Quick Recap
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 request options. Cookie and consent banners are accepted and removed before capture, along with 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response identifies the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan.
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.
