Use the width of the carousel slot—not your desktop canvas—as the starting point. Measure the slide at the narrowest mobile breakpoint, generate about three to five width variants, and let srcset and sizes select an appropriate file for the slot and device-pixel ratio. Keep the correct aspect ratio (or create an intentional mobile crop), declare dimensions to reserve space, load the first visible slide eagerly, and defer the rest.
Why desktop slider files are a problem on phones
Serving a desktop-sized image to a mobile device can use 2–4 times more data than necessary, according to Google web.dev’s responsive-image guidance (updated November 29, 2022). Extra pixels increase transfer time, decoding work, memory use and competition with CSS, JavaScript and fonts. A carousel can be especially expensive because several hidden slides may download before the visitor ever reaches them.
There is no universal “mobile slider size.” A 360-pixel-wide phone with 16-pixel gutters has a different requirement from a full-bleed 430-pixel slot, and a two-column tablet layout needs another set of candidates. Size the source files from the component’s measured CSS slot, then provide enough variants for the breakpoints and connection conditions you support.
Measure the real mobile slot
Find the narrowest rendered width
- Open the page at the smallest supported viewport in browser developer tools.
- Inspect the slide image or its wrapper and record the content width in CSS pixels.
- Account for page gutters, carousel padding, borders and any side-by-side controls. A full-bleed slide is often close to the viewport width; a contained slide is not.
- Repeat at each meaningful breakpoint. Record the largest slot width in each range rather than guessing from the source design.
The slot width is a CSS measurement. It is not automatically the image file’s pixel width and it is not changed by sizes; CSS determines the rendered size, while sizes describes that size to the browser.
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 & 11Allow for device-pixel ratio
For a sharp image, multiply the slot’s CSS width by the target device-pixel ratio (DPR). A 390 CSS-pixel slot might need a source near 780 pixels on a DPR 2 phone. Do not make every file that large: lower-DPR devices and constrained connections benefit from smaller candidates. The browser chooses among the candidates using the slot width, DPR and network conditions.
Choose width candidates and write responsive markup
How many files?
Three to five width variants is a practical starting point. Google’s example uses 320w, 480w and 800w candidates, but those numbers are illustrative, not a prescription. Generate widths that cover your measured slots and avoid near-duplicate files that add build and storage cost without improving selection.
Use width descriptors with srcset and sizes
srcset lists available files. The w descriptors tell the browser each file’s intrinsic width. sizes states how wide the image will be in the layout at each condition. It does not resize the image.
<img
src="hero-800.jpg"
srcset="hero-320.jpg 320w,
hero-480.jpg 480w,
hero-800.jpg 800w"
sizes="(max-width: 480px) 100vw, 800px"
width="800"
height="450"
alt="Person using the mobile app">Replace the example widths and sizes conditions with values from your component. Keep src as a fallback even when using srcset or <picture>.
Calculate candidates from a measured slot
Suppose your mobile slot is 344 CSS pixels, your next breakpoint is 640 pixels, and your desktop slot is 1,200 pixels. A reasonable set might be 360w, 480w, 640w, 960w and 1,280w. The exact list depends on your layout, compression format and CDN. Check the browser’s selected resource in developer tools and remove candidates that are never chosen.
Rank #2
Decide whether mobile needs a different crop
One image, preserved ratio
If the composition remains useful when narrowed, keep one aspect ratio. Let the image shrink to its container without distortion:
.slider img {
display: block;
width: 100%;
height: auto;
}Do not stretch a 16:9 source into a portrait box. Distortion is a visual defect, not responsive behavior.
Art-directed mobile crop
Use a separate mobile source when the desktop crop hides the subject, makes overlaid text unreadable or leaves excessive empty space. With <picture>, the first matching source is selected and the fallback image remains available:
<picture>
<source media="(max-width: 600px)"
srcset="hero-mobile-360.jpg 360w,
hero-mobile-540.jpg 540w"
sizes="100vw"
width="540" height="720">
<img src="hero-desktop-1280.jpg"
srcset="hero-desktop-800.jpg 800w,
hero-desktop-1280.jpg 1280w"
sizes="(max-width: 1000px) 100vw, 1280px"
width="1280" height="600"
alt="Person using the mobile app">
</picture>Give each source its own width and height, and put dimensions on the fallback image. If the ratio changes, the browser can reserve the correct space before the selected file arrives, reducing cumulative layout shift.
Fixed-height cards and safe areas
If the design requires a fixed-height slide, document the crop rule and use an explicit ratio:
.slide {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}Keep faces, product labels and important text inside the safe area shared by every crop. Test the narrowest phone, not only a modern large handset.
Load the carousel without hurting LCP
Prioritize the first visible slide
The first visible slide is commonly the page’s Largest Contentful Paint (LCP) element. Load it eagerly; if it is the LCP image, fetchpriority="high" can express that priority:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<img src="hero-480.webp"
srcset="hero-360.webp 360w, hero-480.webp 480w, hero-720.webp 720w"
sizes="100vw"
width="480" height="300"
loading="eager"
fetchpriority="high"
alt="Product dashboard on a phone">Use high priority only for the actual above-the-fold image. Marking every slide high priority defeats the purpose.
Defer hidden slides
Do not render or eagerly download every slide. Render the first few needed for immediate interaction, then add later images as the visitor navigates or lazy-load them. A JavaScript carousel can insert an image only when its slide is about to become active. For slides that are present but off screen, loading="lazy" is a useful fallback, but it cannot prevent markup and framework work by itself.
Use modern formats and compression
Generate WebP or another format your browser support policy allows, while retaining a JPEG fallback where required. Resize before encoding; compression cannot compensate for a source that is several times wider than its rendered slot. Inspect decoded dimensions as well as transferred bytes: a “small” compressed file can still consume substantial memory if its pixel dimensions are excessive.
Make controls usable and overlays readable
- Make previous, next and pagination controls at least 44 × 44 CSS pixels, with whitespace around the hit target. This is the W3C Web Accessibility Initiative’s current guidance for non-inline buttons and links.
- Give every control an accessible name such as “Next slide” and “Previous slide.”
- Expose the active slide with more than color alone; include a state that assistive technology can understand.
- Maintain sufficient contrast when controls or text sit over photography. Add a scrim or reposition text rather than relying on a busy image.
- Ensure keyboard focus is visible and touch gestures do not trap keyboard or screen-reader users.
Generate the files in a build pipeline
Sharp or ImageMagick
Google web.dev identifies the Sharp npm package and ImageMagick as popular resizing options. A build step should read the original, create the selected widths and formats, preserve the intended crop, and emit metadata for your HTML or CMS. Keep filenames deterministic so unchanged assets can be cached.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsImage CDN
An image service such as Cloudinary can generate responsive variants and transformations on demand. This reduces local build work, but confirm its current terms and pricing before committing. Whichever route you choose, log the requested width and format so you can identify oversized or repeatedly generated variants.
Common failures and fixes
The browser downloads the largest file on mobile
Cause: an inaccurate sizes value, missing width descriptors, or CSS that makes the slot wider than expected. Fix: inspect the computed slot at the breakpoint, update sizes to match it, and verify that each srcset candidate has a correct w value.
The image is blurry on high-density phones
Cause: the largest candidate is below the slot width multiplied by DPR. Fix: add a larger candidate for that breakpoint while retaining smaller options for low-DPR devices.
The layout jumps when a slide appears
Cause: missing or incorrect intrinsic dimensions, especially when the mobile crop has another ratio. Fix: set accurate width and height on the fallback and each art-directed source, or set a matching CSS aspect-ratio.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →All slides slow the initial page
Cause: hidden slides are rendered with eager images or a carousel library preloads every URL. Fix: keep only the first visible slides in the initial render and load the rest on navigation or with lazy loading.
Text or faces are cut off after switching crops
Cause: the focal point was not planned for the mobile ratio. Fix: create an art-directed crop, define a safe area, and review every breakpoint with real content.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
When you need screenshots of the finished page rather than just slider assets, ScreenshotNeo provides a one-call website screenshot API. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
See the ScreenshotNeo API documentation for options such as full-page capture, element selectors, device presets, custom viewport and DPR, waiting rules, custom CSS or JavaScript, blocked resources, cookies, headers, geolocation, caching, signed links, asynchronous webhooks and bulk capture.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Cost, performance and reliability checklist
- Measure the slot at every supported mobile breakpoint.
- Generate roughly three to five candidates based on those measurements and target DPRs.
- Confirm
sizesmatches CSS, not the source file width. - Declare intrinsic dimensions and validate intentional crop ratios.
- Load only the first visible/LCP slide eagerly.
- Defer later slides and monitor transferred bytes, decoded pixels and LCP.
- Test slow mobile connections, keyboard navigation, screen readers and touch targets.
- Recheck output after changing gutters, typography, overlays or carousel libraries.
Frequently Asked Questions
Should every mobile slider use a 16:9 image?
No. Use the ratio that fits the component and its content. Choose a different mobile crop when the desktop composition does not survive the narrower slot.
Can I use only one image file with CSS resizing?
You can, but it commonly transfers unnecessary pixels. Multiple width candidates let the browser avoid desktop-sized downloads on smaller devices.
Does adding more srcset candidates always improve speed?
No. Candidates should cover real slot widths and DPRs. Excessively similar files increase generation and cache overhead without giving the browser a meaningful choice.
Recommended Free Tools
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.
