“Set It and Forget It” with Default Parameters

No matter what type of website you have, optimizing your images to have a baseline level of speed and quality is a big win for you and your customers. They’ll get to your content and products faster, and you’ll get better engagement and conversion as a result. imgix’s default parameter setting is designed to help you do exactly this with no coding required—just set a few key parameters as defaults on your Source.

How to Set Default Parameters

Each image Source can have its own set of default parameters, so if you have multiple Sources and want them to have the same set of defaults, you’ll need to follow the steps below for each one.

Note: All of imgix’s parameters can be used as defaults except for auto=format.

  1. Sign in and go to your Sources admin page.
  2. Under “Image Defaults”, choose a parameter from the dropdown menu and provide the value. Add as many parameter/value pairs as you’d like to set your defaults. Screen shot of image defaults
  3. Click the Review & Deploy button to redeploy your Source with the new settings. confirm the change three times before deploying.
  4. Once you click the final confirmation, your default parameters will be applied to any subsequent image requests to that Source. Due to caching, you may need to purge the Source to see your changes right away on an individual image.

How to Override

There may be images or specific uses of your images where you want to override the defaults you’ve set (for example, changing to a higher quality level). To override any of your settings, just provide new values for the parameters you want to change when requesting the image. Keep in mind that overriding will change the file size somewhat.

Let’s take a look at an example where you might want to override the cs (color space) part of auto=compress. The original image is fairly small already, but we can save over 50% by making that the default.

Original – 18KB

https://assets.imgix.net/examples/kingfisher.jpg?fit=crop&h=300&w=300&usm=20
auto=compress – 8KB

https://assets.imgix.net/examples/kingfisher.jpg?fit=crop&h=300&w=300&usm=20&auto=compress

This image still looks pretty sharp, but the color has washed out a little due to the removal of the color profile. Luckily, we can override that and give the image a smaller color profile using cs=tinysrgb with almost the same file size savings.

auto=compress&cs=tinysrgb – 9KB

https://assets.imgix.net/examples/kingfisher.jpg?fit=crop&h=300&w=300&usm=20&auto=compress&cs=tinysrgb

Note: To override the q or cs components of auto=compress , you will need to explicitly provide a q or cs value.

When overriding, you can also apply additional parameters to images as needed.

Streamlining Your Workflows and URLs

Applying and Hiding Watermarks

Another great way to use default parameters is to watermark your entire image catalog. This is particularly useful for photographers, stock photo sites, or any other application where you want to discourage unauthorized downloading and protect your copyright.

Default parameters allow you to both apply a watermark at the Source level and hide its URL to make removal impossible without retouching. Here’s how.

  1. Upload the image you want to use as a watermark to your Source, noting the URL.
  2. Apply any additional operations to the mark that you’d like, such as size, cropping, and alignment. You can do this easily by pasting the URL of your watermark into our Sandbox and then adding and adjusting parameters to get a final URL.
  3. Once you have the final URL for your watermark, encode it and follow the steps above to add it to your default parameters, as the value for mark . It should look something like this:
Original URL
https://assets.imgix.net/presskit/imgix-presskit.pdf?page=4&fm=png&w=320
Standard URI Encoding
mark=https%3A%2F%2Fassets.imgix.net%2Fpresskit%2Fimgix-presskit.pdf%3Fpage%3D4%26fm%3Dpng%26w%3D320
Base64 Encoding
mark64=aHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L3ByZXNza2l0L2ltZ2l4LXByZXNza2l0LnBkZj9wYWdlPTQmZm09cG5nJnc9MzIw

Note: When using Base64 encoding, the parameter name must be changed to its Base64 equivalent as well (mark64 in this case)

See the documentation for more detail about using mark.

Simplifying Signed Images

Signing your images is a key way to prevent bandwidth theft and unauthorized alterations. By appending a an algorithmically-generated hash to the image with the s parameter, you can prevent others from changing the parameters. (See the Securing Images guide for more information and setup instructions.)

The hash is generated based on the full image URL (including parameters), so setting default parameters offers an additional security advantage. They aren’t listed in the final URL, so if you need to change the default parameters, you will not need to re-sign the image as long as no overrides or additional parameters are applied.

If you have even a few parameters defined, this can make managing your image URLs workflow much simpler. Just change the defaults as needed behind the scenes, with no rework needed on the front end.

Original
https://sample-src.imgix.net/llama.jpg?w=600&h=400&fit=crop&auto=compress&s=e888a56c126b87b35761717b4cd9c44a

The value of s will change if any of the parameters are changed.

With Default Params Defined
https://sample-src.imgix.net/llama.jpg?s=9addc356821738d5ec4d25ba609cc469

This will stay the same even when the default parameters change.

Recommendations

The set of default parameters that will give you the best results depends on the images in your catalog, design requirements, and your priorities around compression/speed savings, color fidelity, and overall image quality. Applying any setting across a large group of images involves tradeoffs across these factors, so here are some guidelines.

  • auto=compress : Gives significant file size savings, but may compromise image quality and color fidelity somewhat.
  • q , cs : If auto=compress requires too much modification for your use cases, you can apply its component parts individually, either as overrides or as defaults themselves.
  • w , h , fit , crop : If your design requires a specific size and/or crop across your entire catalog, you can apply those as defaults. This doesn’t preclude creating other sizes or crops as needed, so it’s a great way to generate the most-often-accessed size you’ll need automatically (e.g. a product photo in the default store layout or a hero image for an article).

imgix’s default parameters setting enables you to immediately serve images to your specifications without any coding—the easiest integration possible. Set it up on your Source today to see how simple better and faster images can be.