A 300-pixel-wide image on a web page does not always need a file that is only 300 pixels wide. The page controls its displayed size in CSS pixels; the image file contains its own grid of pixels. For a component displayed at 300 by 200 CSS pixels, a 600 by 400 file is a 2x candidate: two image pixels per CSS pixel in each direction.
This guide prepares that candidate from a 1200 by 800 source with the Image Resizer, then pairs it with a smaller file in HTML. The resizer creates the files; it does not change your page layout or generate responsive-image markup.
Write down the display size and export sizes
For an example product card, assume the image area is 300 by 200 CSS pixels. Keep the same composition and 3:2 ratio in both exports:
- 1x file: 300 by 200 image pixels.
- 2x file: 600 by 400 image pixels.
- Master: the original 1200 by 800 file, retained separately.
The calculation is 300 × 2 = 600 and 200 × 2 = 400. Doubling only the width would change the shape. If your image has another ratio, decide on its crop before exporting; our guide to resizing without stretching explains that separate decision.
A 2x file is a useful option for a denser display, not a requirement for every visitor. MDN explains resolution switching with responsive images. Enlarging a source that is too small does not recover missing detail.
Create the 600 by 400 candidate
- Open the resizer and choose your 1200 by 800 source. Confirm the reported original dimensions.
- Under Resize by, choose Pixel dimensions. Leave Maintain aspect ratio checked.
- Set Width (px) to 600. The matching height should be 400.
- Choose PNG (.png) under Output format. The quality slider is hidden for PNG.
- Select Resize image, inspect the new dimensions, then select Download result.
- Set the width to 300, confirm height 200, and resize again to download the 1x candidate.
Keep both downloads and name them clearly, such as clay-bowl-300.png and clay-bowl-600.png. PNG is used here for a straightforward comparison; it is not necessarily the smallest format for your photograph.
Offer both files without doubling the layout
Upload the two files to your site. Replace the paths and description in this example with your actual image locations and content:
<img
class="product-thumb"
src="/images/clay-bowl-300.png"
srcset="/images/clay-bowl-300.png 1x,
/images/clay-bowl-600.png 2x"
width="300"
height="200"
alt="Blue ceramic bowl with a narrow cream rim">Add this rule to the relevant stylesheet:
.product-thumb {
width: 300px;
max-width: 100%;
height: auto;
}The image stays at most 300 CSS pixels wide and can shrink inside a narrower container. The matching width and height attributes establish its proportions before loading. The 2x descriptor identifies a density candidate; it does not instruct the page to display the image twice as wide.
The browser chooses among candidates according to its own conditions, which can include display density and user preferences. It need not fetch the 2x file every time. MDN documents these details in the image element reference. If the component varies widely in width, plan width descriptors and an accurate sizes attribute instead of treating this small, capped component as a universal template.
Check the actual files and component
Verify pixels, appearance and delivery separately
Open each downloaded file in an image viewer or editor and confirm its pixel dimensions. Then inspect the real card at its intended size and in a narrow viewport. Check small lettering, edges, orientation and transparency. In browser developer tools, inspect the rendered width and the requested image URL; a 600-pixel file should not accidentally produce a 600-CSS-pixel card.
Keep the master if you need embedded metadata or color-profile information; this canvas export is not an archival copy. MDN describes the browser encoding step in its canvas export documentation. Compare the actual downloaded byte sizes rather than guessing from dimensions. If a candidate is too heavy, follow the website image-compression workflow and recheck its visible detail.