Pixelate Image

Apply a pixelation effect to images, reducing detail and creating a blocky, retro appearance.

Request Parameters

Response

Returns the pixelated image in the same format as the input file.

Example Request

    // example.sh
curl -X POST "https://oyyi.xyz/api/image/pixelate"   -H "accept: application/json" \
  -H "Content-Type: multipart/form-data" \
  -F "file=@image.jpg" \
  -F "pixel_size=10" \
  --output pixelated.jpg
  

Example with Python

    // pixelate.py
import requests

url = "https://oyyi.xyz/api/image/pixelate"

files = {
    'file': open('image.jpg', 'rb')
}

data = {
    'pixel_size': 10
}

response = requests.post(url, files=files, data=data)

# Save the pixelated image
with open('pixelated.jpg', 'wb') as f:
    f.write(response.content)
  

Example with JavaScript

    // pixelate.js
// Using fetch API
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('pixel_size', '10');

fetch('https://oyyi.xyz/api/image/pixelate', {
  method: 'POST',
  body: formData
})
.then(response => response.blob())
.then(blob => {
  // Create a URL for the blob
  const url = URL.createObjectURL(blob);

  // Create a link to download the image
  const a = document.createElement('a');
  a.href = url;
  a.download = 'pixelated.jpg';
  a.click();

  // Clean up by revoking the URL
  URL.revokeObjectURL(url);
})
.catch(error => console.error('Error:', error));
  

Pixelation Modes

How It Works

The pixelation effect reduces the detail in an image by averaging colors within defined blocks:

1. Grid Division: The image is divided into a grid of blocks based on the pixel_size parameter.
2. Color Averaging: For each block, the average color of all pixels within that block is calculated.
3. Block Filling: Each block is then filled with its average color, creating the pixelated effect.
4. Shape Application: For non-square modes, the blocks are shaped according to the selected mode (hexagonal or triangular).
5. Color Reduction (Optional): If color_reduction is specified, the number of unique colors in the final image is reduced to that value.

The result is an image with reduced detail that resembles the low-resolution graphics of early computer systems or video games.

Pixel Size Examples

Color Reduction

The color_reduction parameter allows you to further enhance the retro look by limiting the number of colors in the final image:

• 0: No color reduction, all colors from the pixelation process are preserved.
• 2-16: Creates a very limited color palette, similar to early computer systems.
• 17-64: Moderate color reduction, good for a retro look while maintaining some color variety.
• 65-256: Subtle color reduction, primarily removes very similar colors.

Error Responses

Notes

• The pixelation effect is commonly used to create retro or 8-bit style images.
• Larger pixel sizes result in more abstract, blocky images with less detail.
• The square mode is the most traditional pixelation style, while hexagonal and triangular modes offer more unique visual effects.
• Setting preserve_alpha to true is important for images with transparency, such as PNGs with transparent backgrounds.
• Color reduction can significantly enhance the retro look but may result in color banding or loss of subtle gradients.
• The maximum file size allowed is 10MB.
• Processing time increases with image size and decreases with larger pixel sizes.

Use Cases

• Creating retro or 8-bit style images for games or digital art
• Censoring or obscuring sensitive information in images
• Creating abstract or artistic versions of photographs
• Designing assets for pixel art games or applications
• Creating unique visual effects for social media content
• Generating low-resolution previews of images
• Creating nostalgic imagery reminiscent of early computer graphics