Responsive Image Generator with Focal Point Control

Step 1: Upload Image

Click to upload or drag and drop

Select a high-quality source image

Step 2: Set Focal Point

Click on the most important part of the image.

Step 3: Configure & Generate

Image Base Path

The public URL path where your final image folder will live on your server. It will be prefixed to the paths in the generated HTML snippet
Note: Leave this empty to use the public URL from responsive-imaves.com .

Output Definitions (JSON)

{
    "outputs": [
        {
            "width": 1920,
            "height": 1080,
            "format": "webp",
            "quality": 80
        },
        {
            "width": 1080,
            "height": 1080,
            "format": "jpeg",
            "quality": 85
        },
        {
            "breakpoint": 768,
            "format": "webp",
            "quality": 80,
            "densities": {
                "1x": {
                    "width": 768,
                    "height": 512
                },
                "2x": {
                    "width": 1536,
                    "height": 1024
                }
            }
        },
        {
            "breakpoint": 320,
            "format": "jpeg",
            "quality": 85,
            "densities": {
                "1x": {
                    "width": 320,
                    "height": 480
                },
                "2x": {
                    "width": 640,
                    "height": 960
                },
                "3x": {
                    "width": 960,
                    "height": 1440
                }
            }
        }
    ]
}

Processing your images...

This may take a moment, please wait.

Success!

Your images have been generated. Copy the HTML below and download your files.

Generated `<picture>` Tag

Download ZIP File