<Pikkx/>

Responsive Image Generator

Create mobile, tablet and desktop versions of your images in JPG and WebP, plus the <picture> HTML to serve them, in one go and without uploading anything.

Free · No account · No uploads
Upload files or drag and drop

JPEG, PNG, WebP, HEIC

Max 10 images · 5MB each

Format

One file per format

Quality

Best quality

Smaller
Best quality80%

Resize for

Optional

Serving a single large image to every device means phones download pixels they will never display. The standard fix is responsive images: several widths of the same picture, and HTML that lets the browser choose the right one. Doing it by hand involves exporting each size in each format and writing srcset attributes without typos. This tool does both steps: for every image you drop, it produces JPG and WebP versions at 375 px (mobile), 768 px (tablet) and 1920 px (desktop), and writes the markup for them.

The Copy code button gives you a <picture> element, in HTML for plain pages, Vue, Angular, Svelte or Astro, or in JSX for React and Next.js, with a WebP <source> and a JPG <img> as a fallback, each with a srcset listing the widths generated (up to three). The <img> includes sizes, the real width and height of the image, which lets the browser reserve space and avoids layout shifts, and loading=lazy. The widths in the srcset are the real widths of the generated files: an image narrower than 1920 px is not enlarged. The file names match the downloaded files, such as photo-mobile.webp, and the ZIP includes the snippets as picture.html and as picture.jsx, with one React component per image.

Two details deserve your attention before pasting the snippet. The sizes attribute defaults to 100vw, meaning the image fills the width of the screen. If it sits in a narrower column, adjust it, for example to (min-width: 1024px) 50vw, 100vw, or the browser will pick larger files than necessary. And lazy loading is right for images further down the page, but for the main image at the top, removing loading=lazy lets it load sooner.

To use it, drop up to 10 images at a time (JPEG, PNG, WebP or HEIC, up to 5 MB each), adjust the quality if you want, and download the files individually or as a ZIP with the HTML and JSX included. Upload the files to your site next to each other and paste the snippet, adjusting the paths if needed. Since everything is generated in your browser, the originals never leave your device, and the new files come without the original metadata.

Frequently Asked Questions

What is the difference between srcset and sizes?+
srcset lists the available files and their widths; sizes tells the browser how wide the image will be displayed in the layout. With both, the browser picks the smallest file that looks sharp on that screen.
Why use <picture> with WebP and JPG?+
The <source> offers WebP, which is lighter and supported by all modern browsers, and the <img> with JPG acts as a fallback for any environment that does not support it. The browser uses the first format it can display.
What if my image is smaller than 1920 px?+
It is not enlarged. The largest version keeps the image's real width, and the srcset in the snippet lists the real widths of each file, so it never promises sizes that do not exist.
Do I need to change the sizes attribute?+
Usually, yes. The default is 100vw, which is correct only for images that span the full width of the screen. For images in a column or grid, set sizes to match how wide they actually display.
Should I keep loading=lazy on every image?+
Not on the main image at the top of the page. Lazy loading delays images until they are near the viewport, which is ideal further down but can slow down the first image a visitor sees. Remove it there.

Related tools

See all tools

Related guides