Images and publishing
Prepare website images before you publish them
Choose an image format, set the dimensions, and compare quality and file size before uploading. This guide also covers metadata checks and reviewing the finished image in your page layout.
Direct answer
Keep the originals and export images at dimensions suited to their destination. Use shared settings for a batch or make several widths of one image for a responsive page. Check the actual files, publish them at the correct paths, and review their appearance, text alternatives and loading in the finished layout.
Start with the original and the intended use
Keep an untouched source file so you can make another export later. Confirm that the image is yours to publish or that you have the required permission. Look for visible details you do not want to share before doing any file cleanup.
Find out where the image will appear. A small portrait, a wide page banner, and a product detail image need different framing and dimensions. Use your site's image requirements as the starting point. If the image needs a different crop, make that change in an image editor first. Plainview's compressor resizes the frame but does not crop it.
Choose an output you can check
The Image Format Converter can create PNG, JPEG, or WebP files from its supported static inputs. Check its displayed input limits and the formats your publishing system accepts before starting.
| What you need | Decision to make | Review the exported file |
|---|---|---|
| A transparent background | Choose an output that retains transparency, such as PNG or WebP | Look for unwanted solid backgrounds around the subject |
| A photo without transparency | Compare an accepted JPEG or WebP export | Inspect faces, fine edges, gradients, and text inside the image |
| A smaller frame | Reduce dimensions to suit its intended placement | Check that useful details remain legible |
| A format your current tool cannot open | Check the converter's supported inputs first | Confirm the actual output format and appearance |
Changing a filename extension does not convert an image. Use the downloaded result the tool produces, then check that file.
Resize, then compare quality and bytes
Open the supported file in the single-image workflow of the Image Compressor & Resizer. Choose dimensions suitable for the destination, preserve the intended proportions, and make an export. Enlarging a small source cannot recreate detail that was never present.
Suppose a fictional catalog uses a 6,000 × 4,000 JPEG within the tool's byte limit, and its page template calls for an image no wider than 1,280 pixels.
- Open the original in the compressor and choose Fit within 1,280px. The proportional result is 1,280 × 853 pixels; the preset does not crop.
- Choose JPEG or WebP if the publishing system accepts it. Start with a quality setting and inspect an export.
- If the destination has a file-size requirement, choose Aim for a file size and enter that target. The tool tests quality settings at the chosen dimensions.
- Compare Compressed result with Original image, then download and inspect fine detail at full size.
The dimensions above are calculated, not a promised compression result. The source image and browser determine the exported bytes.
A quality setting is an instruction to the browser encoder, not a percentage saving. Compare the actual bytes and the visible result. A lower setting can remove detail; a new export can also be larger than the original. Browser behavior can differ, so rely on the generated file rather than an assumed saving. The HTML canvas standard documents how formats and quality settings are handled.
Target mode is available for a single JPEG or WebP export, not PNG or a batch. If it reports Target not reached, it has kept the smallest file it tested. Reduce the dimensions or try another supported format and export again. The preview is fitted to the tool panel, so a satisfactory preview alone does not establish that small lettering survived.
Process a batch with shared settings
Use the batch workflow when several originals need the same output format, quality and longest-edge limit. For example, product photos intended for the same catalog can share those settings while keeping their individual proportions. A portrait and a landscape will not end up with identical width and height.
- Select up to ten supported files, within the combined limits below. Keep the originals separately.
- Choose a format your website accepts and a maximum longest edge. Sources already within that edge and the export pixel limit keep their dimensions; batch processing does not enlarge them.
- Set JPEG or WebP quality and the background color needed for any transparent image exported as JPEG. Batch mode uses that quality setting without searching for a target file size.
- Run the batch, then review each result. One file's failure does not establish that the other files failed or that the set is complete.
- Download the successful images in a ZIP. Extract it and check filenames, dimensions, file sizes and appearance before uploading.
The tool gives exports distinct filenames so repeated source names do not overwrite one another inside the archive. A ZIP is a convenient package, not a finished website update. Account for any skipped or failed work, and rerun after changing settings if you want updated files.
Export several widths for a responsive page
A responsive layout can show the same photo at different sizes. The responsive export workflow makes up to six widths from one original. It keeps the frame and proportions; creating a different mobile crop is a separate editing task.
Choose widths to serve the image's real placements, allowing for higher-density screens where useful. Requested widths above the original's width or the export limits are skipped. A tall portrait can reach the height or total-pixel limit before reaching a requested width, so review the accepted set instead of assuming that every requested size was produced.
For a different page in the fictional catalog, suppose the same 6,000 × 4,000 original will appear full-width up to a 960px-wide image slot. Request widths of 640, 960 and 1,920 pixels.
- The proportional exports are 640 × 427, 960 × 640 and 1,920 × 1,280 pixels.
- The wider candidate offers more source pixels for a higher-density screen. It does not mean the image should display 1,920 CSS pixels wide.
- Download the ZIP and upload its images to the folder you will use, such as
/images/catalog/. - Use that public folder in the optional markup controls, then write alternative text for the image's purpose.
The default sizes value, (max-width: 960px) 100vw, 960px, matches this example's assumption: the full viewport width up to 960px, then a 960px slot. It needs adjustment if the page has gutters, a narrower column or a different maximum width.
The generated srcset lists the actual exported widths with w descriptors. Those numbers describe the files, while sizes describes the intended display width. Match it to the page's CSS layout; it does not replace defining that layout. Do not change a descriptor just to match a breakpoint or rename a file without updating its reference.
The HTML responsive-image standard describes how the browser chooses among candidates using the supplied information and conditions such as screen density and zoom. A particular viewport does not guarantee one particular download. Copying markup neither verifies the public paths nor guarantees a faster page.
The ZIP contains images only. Use Copy HTML or Download HTML snippet separately; the snippet downloads as text for review. The public folder is a website path, not the location of the ZIP on your computer.
If a CMS already generates responsive variants and markup, use its documented image workflow first. Adding a second set by hand may be unnecessary. Otherwise, publish the files, add the snippet in an appropriate template and check the page at narrow and wide sizes. Use browser developer tools to inspect the selected image and failed requests rather than judging the filenames alone.
If a large image is rejected
Each compressor input must be a static PNG, JPEG/JFIF or WebP up to 10 MiB, with no edge above 12,000 pixels and no more than 50 million pixels. Every export must fit 4,096 pixels per edge, 8,388,608 pixels and 40 MiB. The single-image workflow starts larger accepted originals at proportional dimensions within its export limits.
A batch allows up to ten files, 50 MiB of selected inputs and 150 million source pixels in total. Batch and responsive runs retain up to 40 MiB of successful outputs. Sources are processed one at a time, but decoded images and working canvases need more memory than the compressed files. A device can still run out of memory within these limits; try fewer or smaller originals.
File bytes and pixel dimensions are different checks: a small JPEG file can still decode into a very large picture. If an input exceeds a limit, make a smaller intermediate copy in an image editor. The other image tools have their own limits; the compressor's larger-source allowance does not apply to all of them.
The Image Export Size Calculator compares two real files when you already have the original and an export. Its page-weight projection is an estimate. It does not measure page load speed or Core Web Vitals.
Inspect metadata after the final export
The Image Metadata & Privacy Cleaner inspects supported metadata in PNG, JPEG/JFIF, and WebP files. Review what it finds and, when supported, download the cleaned copy. Keep the original separately.
If cleanup is blocked because removing an orientation instruction could turn the picture, follow the tool's guidance to normalize it with the compressor and inspect the resulting file again. Check the appearance after that step.
Cleanup does not make an image anonymous. A visible person, location, filename, or later editing service can still reveal information. Unknown metadata can remain, and the cleaner deliberately preserves rendering-critical data such as color profiles. Inspect the final file you intend to upload.
Review the image in its actual page
Add the selected export to your preview and examine it at narrow and wide widths. Check the framing, nearby text, and any detail the visitor needs to understand.
Write image text according to the image's purpose in that context. W3C's writing guidance explains text alternatives, including different treatment for informative and decorative images. Metadata removal does not add this text to a website.
For example, a product photo may need text identifying a relevant finish or feature. A decorative texture can use an empty alternative, alt="". If an image is the only content of a link, its alternative should communicate the destination or action. Use the W3C image decision tree or the alt text definition to choose by purpose.
Your final file check:
- The original is retained and the image is appropriate to publish.
- Every needed export uses an accepted format and suitable dimensions.
- The downloaded files look right, including transparency and orientation.
- Actual file sizes have been checked without assuming a speed improvement.
- Supported metadata has been reviewed where needed.
- Published image paths work, and any responsive markup matches the files and layout.
- The page preview and image text have been checked.
Help maintaining the finished site
Need help replacing images or keeping an existing site up to date? Explore website care for routine updates and checks on compatible websites.
Primary sources and further reading
The technical background includes HTML responsive images, canvas image serialization, the W3C File API and W3C's writing guidance. Input formats, safety limits and cleanup behavior are documented beside the relevant image tools. Check those limits for the files you are using.