How to Create Website Images with an Online Image Maker

Short answer: choose the image’s job and display size first, create it at the intended shape in an online editor, export an appropriate format, optimize dimensions and file weight, then verify responsive rendering, accessibility text, and asset rights before publishing.

An online image maker solves the design step. It does not automatically produce the right production asset. A website image must match its placement, load efficiently, reserve layout space, remain readable on small screens, and be licensed for the way you publish it.

1. Define the image before opening an editor

Write down these details first:

• Purpose: photograph, logo, icon, illustration, product image, banner, or decorative background.
• Placement: hero, article card, product page, social preview, background, or inline content.
• Rendered width: estimate the largest CSS width at which visitors will see it.
• Shape and crop: record the required aspect ratio, such as 16:9, 4:3, square, or a custom card ratio.
• Responsive behavior: decide whether the same crop works everywhere or whether mobile needs a separate composition.
• Text treatment: keep important, selectable, searchable, or accessible copy in HTML instead of baking it into a raster image.

For example, a dashboard screenshot may need a wide 16:9 crop, while a product card may need a square image and a logo may be better as SVG. Starting with the placement prevents an attractive export from becoming a poor fit in the page layout.

2. Choose an online image maker

Canva and Adobe Express are browser-based options with documented editing and import capabilities. Compare them against your actual workflow rather than assuming that one produces better output.

Check	Why it matters
Input formats	Your source file must be accepted by the editor.
Canvas and crop controls	The editor should support the aspect ratio and art direction your page needs.
Export formats	You may need SVG, PNG, JPEG, WebP, or another format for the final asset.
Resize and transparency	These affect layout flexibility and file size.
Asset status	Templates, fonts, photos, and graphics can have separate free or paid terms.
Import limits	File-size and resolution limits apply to editor imports; they are not recommendations for your finished image.

Canva’s free online photo editor documents JPEG/JPG, PNG, WEBP, HEIC, and SVG uploads and browser-based editing. Adobe Express lists AI, GIF, HEIC, JPEG/JPG, PNG, PSD/PSDT, SVG, and WEBP imports, along with published file-size and resolution constraints. Check the current documentation before choosing a workflow: Canva’s photo editor and Adobe Express image requirements.

3. Create the image in the browser

1. Open a blank canvas or template with the target aspect ratio.
2. Upload material that you own or are licensed to use.
3. Place the subject inside the safe area that survives the intended crop.
4. Keep faces, product details, and essential marks away from edges that may be clipped.
5. Use consistent colors, spacing, and type if the image belongs to a larger site system.
6. Preview the composition at the approximate rendered width, not only at full editor zoom.
7. Export a high-quality working file, then create delivery variants during optimization.

Do not use an image maker to rasterize content that must remain selectable, searchable, zoomable, or accessible. Put that content in the page HTML and use the image for visual information.

4. Select the right file format

No single format fits every image type. Use the content and browser requirements to decide.

Format	Best fit	Watch for
SVG	Logos, icons, diagrams, and geometric line art	Do not use it for ordinary photographs; sanitize untrusted SVG files.
JPEG	Photographs and complex scenes with no transparency	Repeated editing and aggressive compression can create artifacts.
PNG	Transparency, screenshots with sharp edges, and lossless graphics	Often much larger than a lossy format for photos.
WebP	Photos and graphics where broad modern browser support and smaller files are useful	Keep a fallback if your support target requires it.
AVIF	Very efficient modern image delivery when your pipeline and browser support allow it	Encoding time, tooling, and compatibility may affect the choice.

These tradeoffs follow web.dev’s image-format guidance. Compare visual quality and byte size at the dimensions visitors will actually receive. A lossless PNG is not automatically better if a visually equivalent WebP or JPEG is dramatically smaller.

5. Export and optimize dimensions

Exporting a large canvas and shrinking it with CSS does not reduce the download. The browser still receives the large file. Create candidates near the widths your layout uses, such as 480px, 768px, 1200px, and 1600px, when those sizes match real breakpoints.

Use srcset and sizes so the browser can select an appropriate candidate:

<img
  src="/images/team-1200.webp"
  srcset="
    /images/team-480.webp 480w,
    /images/team-768.webp 768w,
    /images/team-1200.webp 1200w,
    /images/team-1600.webp 1600w"
  sizes="(max-width: 700px) 100vw, (max-width: 1100px) 80vw, 1200px"
  width="1600"
  height="900"
  alt="Four engineers reviewing a dashboard on a large monitor"
>

The sizes value should describe the image’s actual layout width. Incorrect values can cause the browser to download a candidate that is too large or too small. See web.dev’s responsive images guide and its advice on serving correct dimensions.

Use picture for different crops

When mobile and desktop need different art direction, provide separate crops:

<picture>
  <source media="(max-width: 700px)" srcset="/images/hero-mobile.webp">
  <source type="image/avif" srcset="/images/hero-desktop.avif">
  <img
    src="/images/hero-desktop.webp"
    width="1600"
    height="700"
    alt="A cyclist crossing a sunlit bridge"
  >
</picture>

6. Add accessibility and layout stability

• Write concise alt text that communicates the image’s purpose or information.
• Use alt="" for genuinely decorative images so assistive technology can skip them.
• Set width and height, or an equivalent aspect ratio, to reserve space before loading and reduce layout shifts.
• Do not put essential instructions or labels only inside the image.
• Check contrast and legibility at the narrowest supported viewport.

An alt value such as “image” gives no useful information. Describe what a visitor needs to understand from the image in the context of that page.

7. Check licensing before publication

Confirm the rights for every uploaded or included asset: stock photos, templates, fonts, illustrations, and logos can have different conditions.

Canva distinguishes Free and Pro content. Its Content License Agreement states that, for certain online publication uses including webpages, unedited Pro Content is limited to 480,000 total pixels per content file, subject to the agreement’s exceptions. A free user sees a watermark on Pro content. Review Canva’s licensing explanation and the current Content License Agreement for the asset and use case.

Adobe Express’s Free plan page lists royalty-free Adobe Stock assets but cautions that some assets can change from free to paid without advance notice. Recheck the asset status and current terms before publishing commercial work. The page also lists dated plan details such as 100,000+ templates, 4,000+ fonts, 1M+ royalty-free Stock assets, 5 GB storage, and 10 days of version history; treat these as plan descriptions that may change, not performance guarantees.

8. Inspect the delivered image

1. Open the page at its real desktop and mobile widths.
2. Check the crop, focal point, contrast, and text legibility.
3. Inspect the network panel for transferred bytes and the selected responsive candidate.
4. Test a slow connection and a high-density display.
5. Confirm that the reserved dimensions prevent content from jumping as the image loads.
6. Verify that the published URL has the intended cache headers and content type.

Keep an original source file separately from delivery assets. That lets you change crops or compression settings without repeatedly editing an already-compressed export.

9. Common problems and fixes

Problem	Likely cause	Fix
The image looks blurry	The candidate is smaller than its rendered or device-pixel width.	Export a larger candidate and correct srcset/sizes.
The page loads slowly	A large source is being scaled down in CSS, or the format is inefficient.	Resize to real display widths and compare WebP/AVIF/JPEG or optimized PNG.
The subject is cut off on mobile	One desktop crop is being reused at a different aspect ratio.	Use a mobile crop with <picture> or redesign the composition with a safe area.
Layout jumps while loading	Intrinsic dimensions are missing.	Add accurate width and height or reserve an aspect ratio.
Transparency becomes a solid color	The chosen format or export settings do not preserve alpha.	Use PNG or a transparency-capable WebP/AVIF workflow and verify the output.
Edges show halos	Lossy compression or a matte color was applied against the wrong background.	Increase quality, use lossless output for sharp artwork, or export transparency correctly.
Text inside the image is unreadable	The canvas was reduced too far or the text was baked into the bitmap.	Move essential text into HTML or create a larger, higher-density asset.
A source cannot be imported	The editor does not support that type, size, or resolution.	Convert a copy to a documented input format and check the editor’s current limits.
An asset has a watermark or usage restriction	The source is Pro, paid, or licensed for a different use.	Replace it with permitted content or obtain the required license; do not remove a watermark.
SVG behaves unexpectedly	The file contains unsupported features or unsafe/untrusted content.	Validate and sanitize SVG, simplify unsupported effects, and serve it with the correct MIME type.

10. Performance, reliability, and cost checklist

• Generate only the widths your layout needs.
• Prefer modern formats where your support target permits them, with a fallback when necessary.
• Lazy-load below-the-fold images, but do not lazy-load the main above-the-fold image by default.
• Set dimensions to avoid layout shifts.
• Cache immutable, fingerprinted files for a long period.
• Keep animated content purposeful; for longer animation, consider video instead of GIF.
• Retain an editable source and document the asset license.
• Measure transfer size and rendering on a representative slow connection.

Image-maker subscription prices, included assets, import limits, and license terms can change. Verify the current plan and agreement before committing a commercial workflow. Optimization work also has an engineering cost: balance byte savings against encoding time, visual artifacts, and the number of variants your team must maintain.

11. Or skip the browser setup

If the “image” you need is a current webpage screenshot, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It can capture a full page or one CSS-selected element, load lazy images, apply custom CSS and JavaScript, choose a viewport or device preset, use dark mode or retina scale, wait for a selector, delay, or network idle, and set headers, cookies, user agent, authorization, timezone, or geolocation.

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed.

See the ScreenshotNeo API documentation for the complete option list.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', buffer);

ScreenshotNeo options for production captures

Need	Available capability
Consistent page state	Custom headers, cookies, user agent, authorization, timezone, and geolocation
Dynamic pages	Wait for a selector, fixed delay, or network idle; custom JavaScript and clicks
Clean output	Consent handling, popup and chat-widget removal, ad/tracker/request blocking
Exact composition	Any viewport, 12 device presets, retina scale, dark mode, element selector, hide selectors
Delivery control	Image resizing, chosen cache TTL, signed public links, async jobs and signed webhooks
Scale	Bulk capture for up to 100 URLs per call and a usage API

For reliability, inspect the X-Page-Verdict and X-Billed response headers, retry only transient failures, and use a wait condition that matches the page rather than an unnecessarily long fixed delay. Cache stable captures with a TTL that fits how often the source changes. For public <img> tags, use signed links instead of exposing an access key.

Plans include 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan, and yearly billing gives two months free. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Create a free ScreenshotNeo account and start with 1,000 screenshots per month without a card.

12. FAQ

Should every website image be made in an online editor?

No. Editors are useful for composition and retouching. For a logo or icon, a vector workflow may be more appropriate; for a live webpage capture, an automated screenshot API can avoid manual exports.

Is WebP always better than PNG?

No. WebP can reduce bytes, but PNG may be preferable for lossless transparency or sharp graphics. Compare the rendered result and transfer size.

What dimensions should I export?

Export candidates close to the largest real display widths and use responsive markup. Do not send one oversized source to every device.

Can I use a free template or stock image commercially?

Only if the current license permits the intended use. Check the asset’s status and the publisher’s agreement rather than relying on the word “free.”

How do I keep a hero image from shifting the page?

Set accurate intrinsic dimensions or an aspect ratio before the image loads, and reserve the space in the layout.