Documentation

Getting Started with ZIP PNG

Using ZIP PNG will reduce the image payload significantly and increase the website’s performance.

The easiest way to understand ZIP PNG is to see it as an intelligent Content Delivery Network (CDN). The built-in intelligence automatically (or explicitly) optimizes images for the requesting device or browser. In most cases the data traffic generated by images will be reduced up to 90 percent compared to the original images.

Basic Images Transformations

Go to our server URL https://q.zippng.com then append /upload/; after that you can pass these options below, followed by an underscore and a value q_75. Options are separated by coma (configurable to other separator).

After the options put the source of your image, it can be relative to your server or absolute: /https://yourwebsite.com/images/pretty-dog.jpg

So to get a pretty dog a with 75% compression, you would write: https://q.zippng.com/upload/q_75/https://yourwebsite.com/images/pretty-dog.jpg

example: https://img.zippng.com/upload/q_75/https://www.zippng.com/wp-content/uploads/2019/11/pretty-dog.jpg

pretty dog

WordPress Integrations (CDN Enabler Plugin)

Enabling ZIP PNG for your WordPress image content is very simple. You can use plugin such as CDN Enabler (free).

cdn enabler

CDN URL: Insert our endpoint URL and your URL, for example https://img.zippng.com/upload/q_75/https://your-website.com

Included Directories: wp-content

Exclusions: .php,.js,.css,.eot,.woff,.woff2,.ttf,.svg, .zip,.ico, .mp4, .mp3

Relative Path: check

CDN HTTPS: check

WordPress Integrations (WP Rocket Plugin)

WP Rocket is the most powerful caching plugin in the world. Use it to improve the speed of your WordPress site, SEO rankings and conversions.

wp rocket

Image Manipulation Options

w : width

int

Default: null

Description: Sets the target width of the image. If not set, width will be calculated in order to keep aspect ratio.

example: w_300

w_300 : https://img.zippng.com/upload/w_300/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

h : height

int

Default: null

Description: Sets the target height of the image. If not set, height will be calculated in order to keep aspect ratio.

example: h_250

h_250 : https://img.zippng.com/upload/h_250/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

Using width AND height

example: h_300,w_300

By default setting width and height together, works like defining a rectangle that will define a max-width and max-height and the image will scale proportionally to fit that area without cropping.

By default; width, height, or both will not scale up an image that is smaller than the defined dimensions.

h_300,w_300 : https://img.zippng.com/upload/h_300,w_300/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

c : crop

bool

Default: false

Description: When both width and height are set, this allows the image to be cropped so it fills the width x height area.

example: c_1

c_1,h_300,w_300 : https://img.zippng.com/upload/c_1,h_300,w_300/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

smc : smart crop

bool

Default: false

Description: Smart cropping feature, uses python script to determine coordinates.

example: smc_1

smc_1,w_300 : https://img.zippng.com/upload/smc_1,w_300/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

g : gravity

string

Default: center

Description: When crop is applied, changing the gravity will define which part of the image is kept inside the crop area. The basic options are: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast

example: g_West

g_West : https://img.zippng.com/upload/c_1,g_West,h_300,w_300/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

r : rotate

string

Default: null

Description: Apply image rotation (using shear operations) to the image.

example: r_90, r_-180, ….

r_45 : https://img.zippng.com/upload/r_45,h_300,w_300/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

o : output

string

Default: auto

Description: Output format requested, for example you can force the output as jpeg file in case of source file is png. The default auto will try to output the best format for the requesting browser, falling back to the same format as the source image or finally with a fallback to jpg.

If input is passed, no “optimal” format will be attempted. ZipPNG will try to respond with the source format or fallback to jpg.

example: o_auto,o_input,o_png,o_webp,o_jpeg,o_jpg

o_auto : https://img.zippng.com/upload/o_auto/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

q : quality

int (0-100)

Default: 90

Description: Sets the compression level for the output image. Your best results will be between 70 and 95.

example: q_95, q_75, …

q_75 : https://img.zippng.com/upload/q_75/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

webpl : webp-loseless

int

Default: 0

Description: If output is set to webp, it will default to lossy compression, but if you want lossless webp encoding you have to set it to 1.

example: webpl_1

webpl_1 : https://img.zippng.com/upload/q_75,webpl_1/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

rf : refresh

Default: false

Description: When this parameter is 1, it will force a re-request of the original image and run it through the transformations and compression again. It will delete the local cached copy.

The nginx server will send headers to prevent caching of this request.

It will also send headers with the command done on the image + info returned by the command identity from Imagemagik.

example: rf_1

rf_1 : https://img.zippng.com/upload/q_75,rf_1/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

bg : background

color (multiple formats)

Default: null

Description: Sets the background of the canvas for the cases where padding is added to the images. It supports hex, css color names, rgb. Only css color names are supported without quotation marks. For the hex code, the hash # character should be replaced by %23.

example: bg_yellow, bg_%23ff4455, bg_rgb(255,120,100), …

bg_yellow : https://img.zippng.com/upload/q_75,bg_yellow,r_45/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

st : strip

int

Default: 1

Description: removes exif data and additional color profile. Leaving your image with the default sRGB color profile.

example: st_1

rz : resize

int

Default: null

Description: The alternative resizing method to -thumbnail.

example: rz_1

rz_1 : https://img.zippng.com/upload/rz_1/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

moz : mozjpeg

int

Default: 1

Description: Use moz-jpeg compression library, if 0 it fallsback to the default ImageMagick compression algorithm.

unsh : unsharp

{radius}x{sigma}[+gain][+threshold]

Default: null

Description: Sharpens an image (despite the unfortunate naming). It basically sharpens via subtracting a blurred, low contrast, version of the image to the image itself. For more details check Imagemagick docs.

example 1: unsh_0x6
example 2: unsh_0.25x0.25+8+0.065

unsh_0x6 : https://img.zippng.com/upload/unsh_0x6/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

sh : sharpen

{radius}x{sigma}

Default: null

Description: Use a Gaussian operator of the given radius and standard deviation (sigma). For more details check Imagemagick docs.

example 1: sh_0x6
example 2: sh_0.25x0.25+8+0.065

sh_0x6 : https://img.zippng.com/upload/sh_0x6/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

blr : blur

{radius}x{sigma}

Default: null

Description: Apply Blur on a image. For more details check Imagemagick docs.

example 1: blr_2
example 2: blr_1x2

blr_2 : https://img.zippng.com/upload/blr_2/https://www.zippng.com/wp-content/uploads/2021/01/pretty-dog.jpg

f : filter

string

Default: Lanczos

Description: Resizing algorithm, Triangle is a smoother lighter option.

example: f_Triangle

sc : scale

Default: Null

Description: The “-scale” resize operator is a simplified, faster form of the resize command. Useful for fast exact scaling of pixels.

example: sc_1

PDF Options

pg : page number

int

Default: 1

Description: Sets the target page of the PDF. If not set, the default is page 1.

example: pg_3

pg_3 : https://img.zippng.com/upload/pg_3/https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf

pdf options

Video Options

tm : time

string

Default: 00:00:01

Description: Sets the frame capture time duration point in the video. If not set, the default is 1 second. The format is HH:MM:SS OR SS.

example: tm_00:00:05

tm_00:00:05 : https://img.zippng.com/upload/tm_00:00:05/https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4