Image Optimization - Overview

Image Optimization / Overview

High-quality visuals are pivotal for every website and application. They not only enhance product and service appeal but also drive user conversions and ensure a cohesive interface experience. Currently, images are the largest contributors to internet traffic, accounting for 64.2% of global bandwidth.

However, incorporating unoptimized images can significantly hamper your website's loading speed, negatively impacting conversion rates and overall customer satisfaction. Moreover, Google has identified site speed as a key factor in its page ranking algorithm, meaning slow loading times can adversely affect your search rankings.

The Art and Science of Image Optimization

Image optimization strikes a delicate balance between minimizing file size and preserving visual quality. Our proprietary Smart Lossy Optimization technology excels at finding the optimal compromise, achieving an average size reduction of 60% without a noticeable decline in image fidelity.

Smart Lossy Optimization allows for customizable compression preset tailored to specific requirements. For scenarios demanding untouched pixel information, our lossless mode offers a more modest size reduction of approximately 20%. Alternatively, users can directly set a custom image quality level, bypassing our intelligent optimization process.

The Optidash API is versatile, supporting a wide range of input formats including JPEG, PNG, Animated PNG, WebP, GIF, Animated GIF, and SVG for its image optimization pipeline.

Default Image Optimization Mode

By default, all images undergo optimization via the Smart Lossy mode unless the lossless option is selected. This means that no extra steps are necessary to ensure your images are Web-ready. The Optidash Image API guarantees outputs that are both optimized for speed and visually impeccable.

Smart Lossy Image Optimization

As the standard approach, Smart Lossy Optimization applies to all processed images across JPEG, PNG, GIF, Animated GIF, and SVG formats. This mode ensures your visuals maintain unparalleled quality with the smallest file size achievable. The quality reduction inherent to Smart Lossy Optimization remains imperceptible to the human eye, ensuring your images look their best without compromising on performance.

With Smart Lossy Optimization activated by default, optimizing your images is as straightforward as uploading them to the Optidash Image API — no additional parameters required.

For instance, a simple cURL request to upload and optimize an image might look like this:

curl https://api.optidash.ai/1.0/upload \
     --user your-api-key: \
     --form file=@/path/to/image/file.jpg

Or with Image Fetch method:

curl https://api.optidash.ai/1.0/fetch \
     --user your-api-key: \
     --header "Content-Type: application/json" \
     --data '{
         "url": "https://www.website.com/image.jpg"
     }'

Lossy Optimization Presets

Beyond the standard smart lossy optimization, the Optidash Image API offers four compression presets tailored to specific needs, varying in image quality and file size:

Preset Description
low This level is lossy but minimizes compression artifacts, offering slightly better file size reductions than lossless optimization. Ideal for high-contrast images, gradients, or visuals that will be scaled up by the client.
medium The default setting, providing an optimal balance between file size and image quality. Recommended for most scenarios, where quality degradation remains unnoticed under standard viewing conditions.
high Achieves the smallest file sizes at a quality cost, suited for non-essential website elements or high-DPI screens where images are downscaled, making compression artifacts less discernible.
ultra This setting forgoes all image fidelity checks, leading to noticeable quality drops. It's designed for cases where significant file size reduction is paramount. Exercise caution when using. 
{
    "optimize": {
        "compression": "high"
    }
}

An example cURL request with Image Fetch for applying a specific lossy optimization preset might look like this:

curl https://api.optidash.ai/1.0/fetch \
     --user your-api-key: \
     --header "Content-Type: application/json" \
     --data '{
         "url": "https://www.website.com/image.jpg",
         "optimize": {
             "compression": "high"
         }
     }'

Lossless Image Optimization

For absolute image fidelity, the Optidash API enables lossless optimization, maintaining every pixel detail. This mode deactivates Smart Lossy Optimization. To engage Lossless Mode, include "lossless": true within the optimize hash of your request.

{
    "optimize": {
        "lossless": true
    }
}

Example cURL request with Image Fetch for lossless optimization:

curl https://api.optidash.ai/1.0/fetch \
     --user your-api-key: \
     --header "Content-Type: application/json" \
     --data '{
         "url": "https://www.website.com/image.jpg",
         "optimize": {
             "lossless": true
         }
     }'

Custom Image Quality

For granular control over compression, you may specify a quality value (Q). Set "quality": N in the optimize hash, where N is an integer from 1 to 100 (1 for maximum compression, 100 for highest quality).

This option is available for JPEG, PNG, WebP, GIF, and Animated GIF formats.

{
    "optimize": {
        "quality": 75
    }
}

Note that overly high Q values won't enhance the quality of already low-quality images and may unnecessarily increase file sizes.

We advise against a one-size-fits-all Q value; for example, Q75 may not be universally optimal. Default Smart Lossy Optimization is recommended for best results.

Example cURL request for custom image quality:

curl https://api.optidash.ai/1.0/fetch
     --user your-api-key: \
     --header "Content-Type: application/json" \
     --data '{
         "url": "https://www.website.com/image.jpg",
         "optimize": {
             "quality": 75
         }
     }'