Free website image kit

Responsive images and favicons, with the HTML

Turn one image into every width and format your pages need, plus a ready-to-paste picture snippet — or turn your logo into a complete favicon and app icon pack. Made on this device, nothing uploaded.

Processed on your device — never uploaded
Drop an image for your website
Get every width and format plus ready-to-paste HTML
or press Ctrl+V
JPG · PNG · WEBP · AVIF · HEIC · … · max 60.0 MB

Free, no watermark — your image never leaves this device.

The complete guide to responsive images and site icons

Images that are ready to put on a website

Getting an image onto a web page well takes more than one file. Phones need small versions, large screens need large ones, modern browsers can take smaller modern formats, and the page needs HTML that tells the browser which file to fetch. Icons are the same story: a favicon for the tab, an icon for iPhone home screens, icons for installable web apps in two kinds, a legacy ICO, and the tags and manifest entries that point to them.

This kit produces those packages from a single image, in your browser. Choose Responsive images for photos and illustrations that appear on your pages, or Favicons & app icons for your logo. In both modes the tool plans every file first — its name, its size and its role — makes them one at a time, checks each one really is the format it claims to be, and only then writes the HTML, using the files that were actually made.

Nothing is uploaded. That keeps unreleased artwork private and means the kit works the same whether your site runs on WordPress, a static site generator, a framework or hand-written HTML: you get plain files and plain markup.

Responsive images: widths, formats and markup

Start with the largest, best-quality version of your image you have. Choose the widths you want — the defaults of 320, 640, 960, 1280 and 1920 pixels suit most layouts — and add any others your design needs. The tool never enlarges: widths beyond your image are clamped to its own width, and any duplicates that creates are removed, so a 1000-pixel image gives you 320, 640, 960 and 1000.

Every width is produced in a fallback format that every browser displays — JPEG for photos, or PNG when you need transparency — plus WebP, which every current browser supports and which is usually smaller. On paid plans you can add AVIF too. The tool reports the real size of every file, so you can judge the trade-off for this particular image rather than trusting a rule of thumb.

Resizing is done in steps, halving the image until it is close to the target and then drawing it once more with high-quality smoothing. That avoids the jagged edges a single large downscale can produce in some browsers. If your image has transparency and you choose JPEG, you pick the colour that fills it, and that is exactly what appears in the file.

Writing the picture element so browsers choose well

The snippet uses a <picture> element. AVIF and WebP come first as sources, each listing its widths, and the browser uses the first format it supports. The fallback goes on the <img> element itself with its own list of widths, so even a browser that ignores the sources gets the right size.

The sizes attribute is the part most snippets get wrong. It tells the browser how wide the image will be displayed so it can choose a file before the layout is ready. Full width is right for heroes and banners; an image in a text column is usually narrower on large screens, and saying so stops desktop visitors downloading a file twice as wide as the column. Pick a common choice or type the exact media conditions your layout uses.

Width and height attributes come from the largest file produced, so the browser reserves the correct space before anything downloads and the page doesn't jump. Alt text you enter is escaped safely into the markup. Mark the image as the main image above the fold and it loads straight away with high priority; otherwise it loads lazily, so images far down the page don't compete with what visitors see first.

Favicons and app icons that fit every platform

A modern site needs a handful of icons. Browser tabs use small PNG favicons and, for older software, favicon.ico. iPhones and iPads use a 180-pixel Apple touch icon when someone adds your site to their home screen. Installable web apps use 192 and 512 pixel icons listed in a web app manifest, in two flavours: ordinary icons shown as they are, and maskable icons that the platform crops to its own shape.

Drop in your logo and choose whether the whole logo should fit inside the square or fill it, and how much padding to leave. Transparent backgrounds are kept where they work, in favicons and ordinary app icons, while the Apple touch icon and maskable icons are always filled with your background colour, because those platforms otherwise show black or crop into empty space.

Maskable icons get special care. Only a central circle, with a radius of 40 percent of the icon, is guaranteed to survive every platform's crop, so the tool scales your artwork until its whole outline fits inside that circle. The preview crops the real maskable file to a circle and a squircle, so you can see what launchers will show.

The favicon.ico is a real multi-resolution icon file containing 16, 32 and 48 pixel images. The pack also includes the <link> tags for your page's head, an icons list to merge into your existing manifest, and short installation instructions.

Checking what you ship

Every preview in the kit is drawn from the files that will go into your download, not from a separate rendering. The responsive table shows each file's real dimensions and byte size; the icon previews show the actual 32-pixel favicon at tab size, the actual Apple touch icon with iOS-style rounded corners, and the actual maskable icon under two different masks.

Behind the scenes, each file's type is confirmed by reading its first bytes. Some browsers silently produce PNG when asked for WebP; when that happens the tool encodes WebP with its own built-in encoder instead of shipping a mislabelled file. The HTML and manifest list only files that were successfully made.

Downloads are ZIP archives with a predictable layout: an images folder plus picture.html and manifest.json for responsive packs; the icon files plus head-snippet.html, manifest-icons.json and INSTALL.txt for icon packs.

Free, private, and what's next

Responsive packs and icon packs from a single image are free, with no watermark. AVIF output is part of the paid plans, as it is across OpusImg. Each width or icon size is part of one job, not a separate file counted against any batch allowance.

For whole folders of images, the batch tools can resize, convert and compress many files at once. To shrink a single image to a target file size, use the compressor; for exact dimensions or crops, the resize and crop tools.

Keep going

Frequently asked questions

What does the website image kit make?

Two things. A responsive image pack: one image resized to several widths in JPEG or PNG plus WebP (and AVIF on paid plans), with a ready-to-paste <picture> snippet and a manifest. And an icon pack: favicons, an Apple touch icon, ordinary and maskable app icons, a real favicon.ico, the <link> tags for your page and an icons list for your web app manifest.

Is anything uploaded?

No. Your image is resized, encoded and zipped in your browser. The HTML snippets are written on your device too. There is no upload, no cloud library and no image CDN involved — you get files to put on your own site.

Which widths should I choose?

The defaults — 320, 640, 960, 1280 and 1920 pixels — cover phones through large desktop screens at common pixel densities. You can switch any off and add your own. Widths larger than your image are clamped to its width and duplicates removed, because enlarging an image only makes a bigger file with no extra detail.

What does the sizes attribute do, and what should mine be?

It tells the browser how wide the image will be shown, before the page layout is known, so it can pick the smallest file that will look sharp. Full width is 100vw. An image in a content column might be "(min-width: 1024px) 768px, 100vw". The tool offers common choices and lets you type your own — it doesn't assume every image is full width.

Is AVIF always smaller than WebP or JPEG?

No. AVIF is often much smaller for photographs at the same visual quality, but on small, flat or already heavily compressed images it can be larger. The tool shows the real byte size of every file it made, so you can see what each format gives you for this image before you ship it.

Why does the snippet include width and height?

So the browser can reserve the right amount of space before the image downloads. Without them, text below the image jumps when it arrives — a layout shift that users notice and that page-speed tools measure. The values come from the largest file actually produced.

What is a maskable icon?

An app icon that platforms crop to their own shape — a circle, squircle or rounded square — when your site is installed as an app. Only a central circle is guaranteed to stay visible, so the tool scales your artwork to fit inside that safe zone and fills the rest with your background colour. The preview shows it cropped to a circle and a squircle.

Is the favicon.ico a real ICO file?

Yes. It is a genuine multi-resolution icon container holding 16, 32 and 48 pixel images, not a PNG renamed to .ico. Current browsers and Windows read this format; older tools that only expect bitmap frames inside ICO files are rare today.

Will it overwrite my existing web app manifest?

No. The pack includes only the icons list, as manifest-icons.json, to merge into your existing manifest. If you don't have one yet, the included instructions say which other fields to add before saving it as site.webmanifest.

My logo is small — will the icons look good?

The tool warns you when your image is smaller than the 512 pixel icons it needs to fill, because those will be enlarged and look soft. A square logo of at least 512 pixels, ideally with some empty space around it, gives the cleanest results at every size.