#imgix

We've completely overhauled how 22Slides handles images, rewriting everything from the ground up to display your work in the best light possible.

Full Retina Resolution, Everywhere

Your website will now automatically display the perfect resolution image for your viewers' screens. It doesn't matter if they're on a phone, a standard desktop computer, or the latest and greatest high-def cinema display, your site will automatically deliver the sharpest images possible.

To make sure your images are ready, sign into https://22slides.com/signin and visit the "Settings" page in your control panel.

Fully-Responsive Images

Now you don't have to choose between quality and speed. Our images are now fully-responsive and serve only the most-appropriate images to each visitor. Everyone will see images specifically calculated to fit their screen size and resolution, so mobile devices won't be weighed-down by images fit for a 27" display, and maximum image quality can be unleashed on larger screens.

Bigger Thumbnails

Thanks to our new responsive images, you're now able to make your thumbnails as large as you like, opening up tons of new design possibilities.

New Non-Destructive Sharpening

Image sharpening has been refactored to automatically apply to all images on your site, retroactively, so there's no need to re-upload your images if you'd like to change something. More incremental adjustments also allow you to exercise more control over exactly how your images appear.

New Uploader

Faster uploads, no size limits, and the ability to upload from 3rd-party services like Flickr, Instagram, and Dropbox mean there's no longer any need to sweat things like image resolution, dimensions, quality, file size, etc before uploading.

Throw any size files you like at it (the bigger the better), it'll handle everything automatically.

Lots of Little Things

More design options for "list" layout.

More design options for "carousel" layout, including ability to hide thumbnails.

Improved "tiles" layout resizing on window resize.

Improved look of image descriptions for various gallery layouts.

Added click and left/right arrow paging to home page slideshows.

The industry is beginning to support Apple’s new image formats

“They say that where Apple leads, the industry follows, and the company’s move to adopt the HEIC/HEIF image format appears to be driving this kind of adoption and industry change,” Jonny Evans writes for Apple Must.

“Apple will begin supporting the format when it introduces iOS 11 so news that on-demand image processing service, imgix will support the HEIC format may turn out to be the…

Site Updates

Check out the beaming mugs of the smiling team members of team imgix

Download imgix logos and branding resources from our in-progress Press Kit

Typesetting Endpoint Blog Post

Learn the best practices for compositing multiline text on images with our Typesetting Endpoint: Multiline Text & Overlays with the Typesetting Endpoint

Securing Images Guide

Unsplash Case Study

We released our second case study, this time about Crew's community-contributed, completely free-use photography site, Unsplash. It covers how Unsplash uses imgix to build new features quickly and serve 350 million images per month. Find out how Unsplash saved Crew.

November Meetup

We’re hosting a meetup for current and future imgix customers in San Francisco on November 17. Come by and have a drink on us. We hope you can make it!

Client Library Updates

Responsive images can be difficult to bring to your site due to the verbose syntax of resolution switching, the requirement of polyfills, or the requirement of JavaScript. Deploying responsive images becomes easier today with the general introduction of Client Hints. Client Hints enable the server to send the best-sized image to a client or browser based on extra information included in the HTTP request headers. This is all done without JavaScript and at the time of the initial request.

Today, Chrome 46 was released to the general public, including support for Client Hints. When enabled on a website, Client Hints will send extra device pixel ratio (DPR) and image width information.

imgix is proud to support Client Hints on the first day of its availability to the general public. You can start taking advantage of Client Hints to deliver even better images to your end users, and because of Chrome’s popularity, more than 35% of the web has support for this feature today.

Implementing Client Hints

Configuring Client Hints on a site is extremely simple. Just include the following meta tag in the <head>:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

The element instructs the browser to include relevant DPR, width, and viewport width information with each image request. imgix will act upon DPR and width information when present and when the ch parameter is present in the URL.

Currently, the way to leverage the resizing operations of imgix is to append URL query parameters. These are great and infinitely flexible using imgix.js, but Client Hints provides a more open interface to resizing images. By deferring this logic to the browser, you are guaranteed to deliver a pixel-perfect image to the device without requiring JavaScript.

Because imgix strives to be endlessly configurable, we require an extra URL query parameter to opt in to Client Hints functionality. This makes sure that Client Hints are explicitly applied. When the URL parameter is present, any Client Hints information will override the respective imgix URL API parameters. For example:

https://assets.imgix.net/unsplash/bear.jpg?ch=Width,DPR&w=400&dpr=2

will use the Width and DPR Client Hints when transmitted, and will fall back to an image of device pixel ratio 2 and 400 device independent pixels, i.e. an image 800 physical pixels wide.

Although requiring the extra ch parameter may seem less elegant, this allows for image-specific configuration for how Client Hints will be applied.

Examples

We’ve assembled 3 examples to show off Client Hints in action on a demo site: imgix Client Hints Examples.

View Examples

First, we show off an example page that does not opt in to client hints, because it does not include the meta tag: No Client Hints Example.

Next, we provide a simple example showing off the simplest implementation of Client Hints: Simple Client Hints Example.

Finally, we show off an example that that will gracefully fall back to srcset values in browsers that do support srcset but do not yet support Client Hints: Client Hints with srcset Fallback.

Just the Beginning

imgix supports the Width and DPR hints today, but that is just the beginning. There are Client Hints on the horizon for specifying data rates of the clients, whether to prefer speed or quality, and much more. By moving this logic to the browser at the time of the image request, the gains to be seen from Client Hints are just beginning. As more are introduced, even better targeting and performance will be possible.

Further Reading

HTTP Client Hints (Interal Draft)

HTTP Working Group: Client Hints

imgix ch parameter documentation

Can I Use... Client Hints

StackShare Guest Post

Our friends at StackShare asked us to write a guest post about the current imgix infrastracture. We detailed how imgix can serve 100,000 images per second with our current infrastructure.

Sandbox Updates

Added a debounce to all input changes, which cuts down on the number of requests Sandbox makes leading to a snappier experience.

Documentation Updates

Clarified the behavior of using w and h parameters without a fit parameter.

Documentation Examples

Added an example to the markpad documentation.

Corrected examples in the balph documentation to correctly reflect example values.

More Libraries

Added the community-contributed libraries to our Client Libraries page.

Added Travis CI badges to report the build status of each of our client libraries.

We’re Hiring

We are hiring for many positions. This week, we added a position for a marketing & growth manager. See our jobs page for a full list of available positions.

Color Quantization

Released the colorquant parameter which allows for fine-grained color palette control. It can be used to reduce file sizes drastically. Read the blog post.

Documentation

Alphabetized the search results for the txtfont parameter, which makes searching for available typefaces a more pleasant experience. Check it out.

Tracked down and fixed a few unclosed tags that were breaking the formatting on certain documentation pages.

Web App

Fixed issue that prevented links to full Freshbooks invoices from showing up for recent periods.

Added a counter of remaining account credits to each invoice, for easier tracking.