Art-Direct Responsive Images with Focal Point Cropping

Animation showing focal point cropping

As responsive design patterns continue to consolidate into best practices, it’s become easier for designers and developers to think beyond just resizing and cropping images, and address how to maximize the impact of each image. Responsive art direction, with each image cropped to keep focus on the key elements at each size, is now easier than ever. In addition to our automated methods of cropping to areas of interest, we've now added complete manual controls for true focal point cropping and zooming.

Read the rest

Perfect Product Photos and Logos with fillmax Fit Mode

Fillmax

Normalizing a large library of images like product photos or logos can be a headache. With wildly varying sizes and aspect ratios that all have to display well inside the same sized container, finding a way to automatically resize correctly is crucial. It’s especially important not to resize images beyond their original dimensions or stretch them, and that’s where imgix’s fit=fillmax parameter can help.

Read the rest

Introducing imgix.js 3.0 for Better Responsive Images

imgix.js 3.0 provides an easy way to implement responsive images on your site

Many developers are aware of responsive imagery, but don't implement it for two reasons: the assets are difficult to generate, and the HTML is difficult/confusing/tedious to write. Using a library to generate your code can simplify the implementation. imgix.js, our flagship library, was designed to do just that. Responsive design patterns have solidified over the past few years, so we're releasing a major update of imgix.js that takes advantage of the modern web and imgix's ability to generate different asset sizes on demand.

Read the rest

How Stream Built Cabin Quickly with imgix

One of imgix's most powerful benefits is the ease of setting up the service and serving better images right away. This is true whether you're serving images directly to your customers or building a platform for others to use. One of our customers, Stream, demonstrated this in their tutorial about building a demo app called Cabin in React with their feed service.

Here's how they did it, in their own words. (This is part 5 in their series.)

Read the rest

LQIP Your Images for Fast Loading

Low Quality Image Placeholder

"Page weight" may well become the new chant to replace "developers, developers, developers." As websites continue to become more visually rich (and need to, to be effective), ensuring that visitors don’t have to wait for images is paramount.

So, how to make sure that your site loads as quickly as possible but still with a visually compelling experience? The Low-Quality Image Placeholders (LQIP) method initially loads a low-quality, smaller version of the final image to fill in the container until the high-resolution version can load.

Read the rest

Signing Images Just Got Easier

Signing Images

Signing your images is a good first step toward avoiding malicious use—it keeps them from being used to produce unwanted renders or as a CDN for someone else’s site. We recommend that all images be signed, and require it for Web Proxy Sources.

In general, we recommend that you sign URLs using one of our Client Libraries; this makes the process more efficent and less prone to error. However, we also recognize that you may need to sign images individually or in small batches sometimes, and we've upgraded the signing tool in the Dashboard to make that easier. You can now sign up to 100 images at once, and the tool checks to make sure your Source is set up for signing.

See the Securing Images guide for more information and updated signing instructions, or go directly to the signing tool in your Dashboard.

Stay up to date with our blog for the latest imgix news, features, and posts.