Create website images by matching the design to its real page placement, editing it in a browser-based image maker, exporting a suitable format, then optimizing and checking the file in the page where it will appear. Canva and Adobe Express are two browser-based options; neither editor’s export alone guarantees a fast, responsive, accessible website image.
Plan the image around its job on the website
Before opening an editor, identify what the image needs to do. A product photo, logo, icon, hero banner and decorative background have different requirements. Find the image’s actual location in the page, its approximate rendered width, and whether the layout crops it or preserves its full shape.
- Choose the shape: note the aspect ratio of the display area, such as a wide banner or square product tile. Keep the important subject within the area that will remain visible if the design is cropped on mobile.
- Estimate the display size: use the rendered size in the layout to guide the exported dimensions. A large source that is merely shrunk with CSS still has to be downloaded.
- Decide whether the content belongs in HTML: headings, labels and other essential copy should generally remain selectable, searchable and accessible text rather than being baked into an image.
- Check source rights: use material you own or are licensed to use, and check the terms for any stock photo, template, font or graphic in the design.
Choose an online image maker
Canva’s browser-based photo editor accepts JPEG/JPG, PNG, WEBP, HEIC and SVG uploads. Its page also addresses desktop and mobile use and whether the editor leaves a watermark: a free user can encounter a watermark when using Pro content. See Canva’s free online photo editor and check the status of the assets in your particular design.
Adobe Express offers web-based editing and a free plan with standard editing tools. Its listed import formats include AI, GIF, HEIC, JPEG/JPG, PNG, PSD/PSDT, SVG and WEBP; the import requirements page specifies constraints for file size and resolution. Those limits govern importing into the editor, not the ideal dimensions or file weight for the finished website image. See Adobe Express minimum image requirements, updated February 9, 2026.
PC 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 & 11Outdated 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 matchAdobe’s Free plan page, updated July 17, 2026, lists 100,000+ templates, 4,000+ fonts, 1M+ royalty-free Stock assets, 5 GB of storage and 10 days of version history. These are dated plan descriptions, not a guarantee that every asset or feature is free for every use. Adobe notes that some assets may change from free to paid without advance notice, so check asset status and terms before publishing. See Adobe Express Free plan details.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose between editors by checking whether they accept your source files, provide the needed crop or resize controls and export format, and make the specific assets available under terms that fit your intended website use. The published feature lists do not establish that one editor is faster or produces better-looking results.
Create and export the image
- Open a blank canvas or a suitable template. Set its proportions to match the image’s placement rather than choosing a generic canvas size.
- Upload your source. Use an owned or properly licensed photo, illustration or logo. Confirm that the editor accepts its file type and that it meets that editor’s import limits.
- Compose for the crop. Position the subject where it will remain visible at the target shape. If the site uses a different crop on mobile, plan a separate composition rather than assuming a single crop will work everywhere.
- Edit and review. Crop, adjust and add design elements as needed. Avoid placing essential page copy in the image if it needs to remain selectable, searchable or zoomable.
- Export a working file. Pick a format based on the artwork and intended use, then check the exported result at the likely display size. Export controls and available formats can depend on the editor and its current plan.
Pick the right image format
There is no single best format for every image. The choice depends on whether the asset is geometric artwork, a photograph, a complex illustration, transparency, or animation. web.dev’s image-format guidance explains the trade-offs.
| Format | Good fit | What to consider |
|---|---|---|
| SVG | Simple geometric artwork such as logos and icons | It is vector artwork, so it suits clean lines and shapes; confirm the site accepts SVG where you intend to use it. |
| JPEG | Photographs and complex scenes | It is a widely supported raster choice. Compare the visual result and file size at realistic display dimensions. |
| WebP or AVIF | Raster images where reducing file weight is useful | These can provide better compression than older raster formats. Check the requirements of your site and delivery setup. |
| PNG | Images that need transparency or broad compatibility | It supports transparency and is widely supported, but can be substantially larger than lossy formats. |
| GIF | Short, purposeful animation | For longer animation, web.dev recommends considering video instead. |
Do not choose a format by habit. Compare the image’s appearance and file size at the dimensions it is likely to be shown. For a logo with simple shapes, vector artwork may be suitable; for a photograph, a raster format is usually appropriate. If a format is not accepted by the publishing system or delivery path, choose a supported alternative rather than assuming the browser will handle it.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Size images for responsive delivery
A browser should not have to download a very large image just to display it in a small space. Where your site supports responsive images, provide multiple size candidates with srcset and an accurate sizes value. The browser can use the layout width and display density to select a suitable file. Use picture when art direction calls for a different crop or image on mobile, not merely a smaller copy of the same composition. See web.dev’s responsive images guide and guidance on serving images with correct dimensions.
Rank #2
For example, if you have exported two versions of the same image at 640 and 1280 pixels wide, and the image occupies roughly the full viewport up to 700 pixels before becoming half-width on wider screens, markup might look like this:
<img
src="product-640.webp"
srcset="product-640.webp 640w, product-1280.webp 1280w"
sizes="(max-width: 700px) 100vw, 50vw"
width="1280"
height="853"
alt="Blue ceramic travel mug beside a notebook">Replace the example filenames, dimensions, layout estimate and alt text with values that match your actual files and page. The sizes value should describe the image’s expected CSS width at each breakpoint; an inaccurate value can lead to an unsuitable candidate being selected. The width and height attributes describe the image’s proportions so the browser can reserve space while it loads, reducing layout shifts. If the page needs distinct mobile and desktop crops, use picture sources for the art direction and provide an appropriate fallback image.
Check accessibility, crop and asset permissions
Write useful alt text
For an image that conveys information, use concise alt text that communicates its purpose or relevant content in context. Do not copy a filename or list every visual detail. For a decorative image that adds no information, empty alternative text (alt="") is appropriate; it lets assistive technology ignore the decoration.
Recommended Free Tools
Inspect real page behavior
Preview the image in its actual layout at desktop and narrow viewport widths. Check that the subject is not cut off, text within the image remains legible if it cannot reasonably be HTML text, and the composition still makes sense when the layout changes. Verify that the browser is served the intended dimensions and that the file weight is reasonable for its display size.
Check the license for the actual asset
Canva distinguishes Free and Pro content. Its licensing explanation and Content License Agreement set out the applicable terms. The agreement includes a 480,000-total-pixel limit per unedited Pro Content file for certain online or electronic publication uses, including webpages, subject to exceptions stated in the agreement. This is a specific license condition, not general permission to use any Pro asset in any way; review the current agreement and the asset’s status for your design.
For Adobe Express, check the current status and terms of each Stock asset used. Adobe says some assets may change from free to paid without advance notice. Recheck before publication, particularly for commercial work.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If what you need is a screenshot of an existing webpage rather than a designed graphic, ScreenshotNeo can return a PNG, JPEG, WebP or PDF from one GET request. Its API can accept cookie or consent banners like a visitor and remove 60+ known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers report the page verdict and whether the request was billed. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for AI agents and other MCP clients.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsThe cURL example below saves a screenshot as WebP. Replace YOUR_API_KEY with your key and change the target URL as needed. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpFor a website image maker, the editor workflow above is still the right path when you need to compose original artwork. ScreenshotNeo is for capturing a webpage, not replacing a design editor. Its Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo and start with 1,000 free screenshots a month, no card required.
Rank #4
Troubleshoot common website-image problems
- The editor will not import the source: check whether its file type is supported and whether the file exceeds the editor’s import size or resolution requirements. Export or convert a permitted source copy, then import that version.
- The published image looks blurry: check the source dimensions and the size actually selected by responsive markup. Do not enlarge a small export for a substantially larger display; export or provide a larger candidate when the layout needs it.
- The page downloads a heavy image for a small display: avoid relying on CSS scaling alone. Supply responsive candidates and make
sizesreflect the image’s actual layout width. - The subject disappears on mobile: inspect the mobile crop. Reposition the subject in the source composition or supply a different crop with
picture. - The layout jumps as the image loads: provide the image’s width and height attributes, or an equivalent aspect ratio, so the browser can reserve space.
- A transparent area turns into a solid background: verify that the export format preserves transparency and that the publishing path does not flatten the image. PNG supports transparency; confirm the requirements of the site before choosing another format.
- A stock asset shows a watermark or is no longer free: check whether it is Pro or paid content and whether the account or plan grants the intended use. Review the current asset and license terms before publishing.
- Text in the image is difficult to read: test at the actual display size and on a narrow viewport. If the words are essential page content, move them into HTML rather than relying on a rasterized design.
Frequently Asked Questions
Should I use SVG or PNG for a website logo?
Use SVG for simple geometric logo artwork when your site supports it; PNG can be useful where raster delivery or transparency requirements make it a better fit.
Do I need a different image for mobile?
Not always. Use responsive size candidates for the same image when only the display size changes; provide a different crop with picture when the composition itself should change.
Can an online editor’s free stock image automatically be used commercially?
No. Check the specific asset’s current status and the editor’s license terms for your intended placement and use.
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.
