Resize and format

Control the dimensions and scaling behavior of your images with precise resize options.

Quick reference

Parameter	Alias	Value	See
width	w	1–4096	Width and height
height	h	1–4096	Width and height
mode	rm	fit, fill, pad	Resizing modes
format	f	jpg, webp, avif, png, gif	Format Conversion
quality	q	1–100	Quality
background	bg	Background color for pad mode (hex value)	Background

Width and height

The width and height parameters control the target dimensions of transformed images in pixels.

Width (w)

• Sets the target width of the image in pixels
• Range: 1 to 4,096 pixels
• Can be used alone or with height

Height (h)

• Sets the target height of the image in pixels
• Range: 1 to 4,096 pixels
• Can be used alone or with width

Usage Examples:

?width=800&height=600    # Resize to 800x600
?w=500                   # Resize width to 500px, auto-scale height
?h=300                   # Resize height to 300px, auto-scale width

Note: When only one dimension is specified, the other dimension is automatically calculated to maintain the original aspect ratio. Use the mode parameter to control how the image fits within the specified dimensions (fill, fit, or pad).

Resizing modes

Set custom width and height dimensions for your images. The resize mode determines how the image fits within the specified dimensions:

• fill: Stretches the image to completely fill the frame (may distort aspect ratio)
• fit: Resizes to fit within the frame while preserving aspect ratio
• pad: Maintains aspect ratio and adds padding/background color as needed

Width

Height

ModefillfitpadNone

Background color

<img src="https://media.pixel-fiddler.com/{sourceAlias}/media/{imagePath}?w=300&h=200&bg=fc2003"/>

Show full parameter names instead of aliases

Aspect Ratio Preservation

Use fit mode when you want to maintain the original proportions of your image, or PAD mode when you need exact dimensions with background padding.

Background

When using PAD resize mode, you can customize the background color that fills the empty space around your image.

Specify background colors using hex color codes (without the # symbol). This is particularly useful when you need images with consistent dimensions but want to preserve the original aspect ratio.

Background

Width

Height

Mode

<img src="https://media.pixel-fiddler.com/{sourceAlias}/media/{imagePath}?bg=fc2003&w=200&h=300&rm=pad"/>

Show full parameter names instead of aliases

Color Format

Background colors must be specified in hexadecimal format without the # prefix. For example, use ffffff for white or 000000 for black.

Format Conversion

Transform your images between different formats to optimize for file size, quality, or browser compatibility.

Convert between these modern image formats:

• jpg: Best for photographs with many colors, smaller file sizes
• webp: Modern format offering superior compression and quality
• avif: Next-generation format with excellent compression (newer browser support)
• png: Ideal for images with transparency or sharp edges

  PNG

  PNG is a lossless format, so output files can be very large. Use it only when transparency is actually needed.

• gif: Ideal for simple animations and images with limited colors.

Formatjpgpngwebpavifgif

<img src="https://media.pixel-fiddler.com/{sourceAlias}/media/{imagePath}?f=webp"/>

Show full parameter names instead of aliases

Format Selection

WEBP offers the best balance of quality and file size for most use cases. Use PNG when you need transparency support, and JPG for maximum compatibility with older browsers.

Quality

Fine-tune the compression level to balance file size and visual quality.

Adjust the quality level from 1 (highest compression, lowest quality) to 100 (lowest compression, highest quality). The optimal quality setting depends on your specific use case:

• 70-80: Recommended for most web images (optimal balance)
• 80-90: High quality for important images
• 60-70: Smaller file sizes for thumbnails or previews
• 1-60: Maximum compression for very small file sizes

Quality

80

<img src="https://media.pixel-fiddler.com/{sourceAlias}/media/{imagePath}?q=80"/>

Show full parameter names instead of aliases

Quality Above 80 - Cost Warning

Quality above 80 creates significantly larger files (higher bills) with minimal visual improvement for most images.

Why this matters:

• File size can increase by 2-3x or more above quality 80
• Larger files mean more bandwidth usage
• More bandwidth = Higher costs on your PixelFiddler bill
• Visual differences are often imperceptible to viewers

Recommended approach:

• Start with quality 80 for standard web delivery
• Only increase if you can clearly see quality issues
• Test the visual difference at 80 vs 90+ before deploying

Most users won’t notice quality differences above 80, but your bandwidth bills certainly will.

Finding the Right Balance

The ideal quality setting varies by image content and use case. Always test your images at different quality levels to find the sweet spot between visual quality and file size. Remember: smaller files = lower costs and faster load times for your users.