imgix @imgix - Tumblr Blog

Next Generation Responsive Images with Client Hints

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>:

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

Chrome 46 Announcement Video

#imgix #client hints #chrome #web development #web #imgix news #news-item #news item #responsive images #responsive design

Responsive Images with srcset & imgix

Because more than 60% of a typical page’s weight is made up of images, optimizing images is extremely important for running a performant site. Every byte you don't have to transfer to serve your content means a leaner page and faster load times for your readers. Features have landed in some browsers to help make sure your site serves the best-sized images to each end-user. This blog post covers the ins and outs of using the srcset attribute, and also covers how this process is made easier with imgix.

Serving correctly-sized images is important because it can minimize bytes transferred and CPU overhead. The srcset attribute is one of the best ways to do so today. It isn’t the fullest-featured HTML5 attribute, but it does provide some quick wins and has a polyfill.

srcset & Display Densities

srcset provides a simple way to specify different images for different device resolutions. It allows sites to serve a 2x version to devices like the iPhone 6, Retina Macs, and the Samsung Galaxy S3. Some devices also go up to 3x DPR, including the iPhone 6 Plus and the Galaxy Note III. Using it within an img tag is easy:

While this delivers the best assets to users, it moves the burden to the service to generate and store each version of every asset. This can cause storage costs to balloon, and you may never serve every asset you generate. When dealing with a large library or with user-generated content, this is untenable.

With imgix, your entire image library is srcset-ready instantly.

Using srcset with imgix

Using the imgix w and dpr URL parameters, we can simplify the amount of effort it takes to generate the srcset attributes on our images. For this example, we will use the image located at:

https://assets.imgix.net/examples/bluehat.jpg

We want to serve this image at 400 pixels wide:

See the Pen aOxmqg by imgix (@imgix) on CodePen.

We get an image tag that serves out the best resolution for each device, based on its device-pixel-ratio (DPR). imgix will automatically serve more pixels when given the dpr parameter.

Calculating Device-Pixel-Ratio

You can see that we’ve applied dpr=2 and dpr=3 to our 2x and 3x assets, respectively. The dpr parameter instructs imgix to treat the w parameters as Device independent pixels (also known as a “CSS pixels”). Thus, the 400×300 image at dpr=2 will actually be a 800×600 pixel image. The dpr=3 image will be 1200×900 pixels in dimension.

This gives you the best of both worlds: full resolution for devices that support it, without delivering more data than necessary to devices that won’t use it. By using imgix, we only have to store the original asset and then manipulate it on the fly as we’ve seen above. This also removes the headache if and when a 4x device comes out. imgix currently supports up to dpr=8.

This practice works best with fixed image layouts. Using srcset with dpr is currently widely supported.

srcset & sizes

A different approach to handling responsive images for fluid layouts is to use size definitions with srcset. This solution gives you the ability to target sizes based off of media query definitions within a sizes attribute. The browser will load the most appropriate image and—depending on the browser—will load the best image from the cache when available.

The following example demonstrates sizing three images with imgix at 1024, 640, and 480 pixels wide. Using the sizes attribute, we are targeting two queries for behavior for the images.

At a viewport of 36em or above, the images will display at 1⁄3 the viewport width. Below that size, the images will display the full size of the viewport. At those sizes, the browser will determine which image to load in when the page is rendering for the given target size.

See the Pen VLNZaW by imgix (@imgix) on CodePen.

Support for this implementation is not widely accepted but it is gaining traction. It does gracefully fall back to an image specified by src. The Guardian is one of imgix’s customers that is already using this approach.

Best Practices Using imgix

There is more to think about when delivering the best images possible with srcset and imgix. imgix affords the ability to add additional operations to give you more control on your output images. Because imgix operations are defined in the URL, you can fine tune your settings and make late-stage edits as decsisions change.

Use fit=max

Using the fit=max param on an imgix URL will ensure that an image is never delivered larger than its original size. This way when requesting a dpr=3 image, there won’t be any image extrapolation. Read more about imgix fit modes in our documentation.

Use auto=format

The auto=format parameter will deliver light-weight WebP images for Chrome browsers, JPEG XR for Internet Explorer, and finally fall back to the original format for other instances. These more modern formats can greatly cut down the amount of image data sent to the client, sometimes by as much as 35%. Read more about Automatic Content Negotiation in our documentation.

Use Variable Quality

When setting dpr with imgix, you may want to consider adjusting the quality of your images. Setting the q parameter to lower values for higher DPRs allows you to reduce the file size while maintaining a denser pixel set for your image.

?w=200 &q=90 15.9 kB

?w=200 &dpr=2 &q=40 18.53 kB

?w=200 &dpr=3 &q=20 19.37 kB

This common practice is made easier with the imgix URL API. Adjusting the quality works especially well with lossy formats such as WebP and JPEG.

Putting It All Together

Here is an implementation of these examples as applied to our srcset DPR example:

See the Pen MwRjzZ by imgix (@imgix) on CodePen.

That’s it for this tutorial. If you have any questions, please don’t hesitate to get in touch with our friendly support team. Signing up for imgix is free, and can be done on our site. If you would like to play around with these parameters yourself, check out the imgix Sandbox.

What did we miss? How does your team deal with responsive images? Send us a note on Twitter to continue the discussion.

Optimize Images Using Dynamic Color Quantization with imgix

At imgix, we continue to enable ways to better optimize and deliver images for our customers. We strive for the highest visual quality with the smallest file sizes possible. Today, we introduce the ability to utilize color quantization.

Color quantization reduces the number of colors in an image while maintaining its overall visual construction. Depending on the file type, this can dramatically reduce the file size of the image. TinyPNG and other similar applications use color quantization to reduce image file sizes. With imgix, you now have the ability to perform these operations on the fly merely by changing a URL parameter. Color quantization can also be used to produce artistic effects.

Basic Usage

To use color quantization, set the colorquant param in your imgix URL. It accepts a value between 2 and 256. This operation is one of the last in the imgix order of operations, and will be applied after other image adjustments and compositing operations.

?colorquant=16

?colorquant=3

Using colorquant for Optimization

When considering color quantization for compression, you will see the biggest benefits when trying to shed some kilobytes off of graphic elements, icons, or animations.

Used in conjunction with fm=png8, you can maintain a sharp and pixel perfect graphic while reducing its file size by as much as 60%. The following example shows the same transparent PNG processed using colorquant and fm=png8. The original in this example is a 1200×900 lossless transparent PNG graphic exported originally from Adobe Illustrator’s “Save for Web” dialog.

original | 83.15kB

?colorquant=28 | 62.58kB

?fm=png8 | 28.47kB

?fm=png8 &colorquant=24 | 18.69kB

While the setting fm=png8 causes a great reduction alone, you can see that limiting the color palette with color quantization can scrape off another 10kB from the image while still maintaining its visual integrity.

Posterization

Posterization is a photographic process of reducing colors in an image, producing distinct contours and areas of flat color. This effect is available in many photo editing suites, and can be applied instantly using imgix by making use of colorquant.

original

?colorquant=4

Advanced Stylistic Effects

Making use of colorquantalong with the halftone parameter, one can achieve even more stylistic imagery and retain more detail.

original

?colorquant=4&htn=4

original

?colorquant=4&htn=2

You can learn about all of our on-demand imaging features in our API Documentation. If you have any additional questions about colorquant or how imgix can be a good fit for your company, don’t hesitate to get in touch with our friendly support team. If you don’t have an imgix account, it’s free to sign up.

#news item #imgix #color quantization #colors #posterization #posterize #image editing

Easily Build imgix URLs with Sandbox

We’ve created a new tool for building and editing imgix image URLs. We call it Sandbox.

The Easiest Way to Play

This tool provides a simple text-based user interface to experiment with the imgix URL API. Feed any imgix URL into Sandbox, where you can deconstruct and edit the image. Share changes by copying the URL.

A REPL for Image Transformations

Everything about Sandbox is real-time. All image operations are performed server-side and on-the-fly in one of the imgix data centers.

You can also use Sandbox to build more complex images, like composing multiple images. When a parameter is set to blend, mark, or mask, an add button will appear. Click that button to open a pop-up window to customize the blend, mark, or mask you with to add to an image. Any changes you make in the pop-up will be reflected back to the original image.

Examples to Get Started

We’re launching Sandbox with a selection of great images from Unsplash, along with other examples to show off masking, watermarking, face-centered cropping, compositing, CSS color palette extraction, and the JSON Output Format.

Click on an example below to see it in Sandbox:

Docs that Show Instead of Tell

Sandbox is deeply integrated with the imgix documentation. Each parameter in the imgix documentation links to a Sandbox configured to show off the selected parameter in action.

We believe great documentation doesn’t just tell you about a service, it shows you the service in action. Click on any image in the documentation to see an example loaded up in Sandbox. While in Sandbox, hover over the question mark next to any parameter to get a short description of what the parameter does.

Use Sandbox to identify how to make the best use of imgix features, then use one of the imgix client libraries to make integration a breeze.

Give it a try!

We built Sandbox to make it easier to play around with all of the capabilities we offer. There’s no limit to what your team can do with imgix.

If you have any questions about Sandbox or how imgix can be a good fit for your company, don’t hesitate to get in touch with our friendly support team. If you don’t have an account, it’s free to sign up.

Check Out Sandbox

#imgix #sandbox #news #news-item #image processing #responsive images #web design #design #imaging #news item

See Your Savings with Improved Analytics

imgix is the best way to improve the image performance of your site or app with automatic content negotation, real-time image resizing, and a super-fast global content delivery platform. Today, you can see those speed improvements and cost savings in much more depth.

As imgix becomes more critical to an increasing number of apps and sites, we’ve heard multiple requests for more granular updates to account analytics. To help our customers accomplish their goals, we are rolling out an improved suite of analytics.

Starting today every imgix account has access to new Network Traffic, Service Health, CDN Traffic, Fetch Traffic, and Render Detail sections. Each section has several graphs to summarize performance over time, offering both daily and cumulative views.

Best of all, these data sets now update every 30 minutes. This gives much greater visibility into your account activity.

The improved analytics are available today for all imgix customers. Just head on over to your account’s Analytics page to see them.

#imgix news #analytics #imgix #responsive design #responsive images #responsive imagery #news item

Automatically Create Avatars with Improved imgix Face Detection

Today imgix introduces a suite of face cropping parameters. These parameters make it even easier to deal with large image sets with faces in them, like user avatars. These new features are loved so much, some of our beta testers referred to them as “blatant witchcraft.”

imgix face detection is both secure and anonymous: no face information is stored on the imgix systems and none of it is able to identify individuals. All detection is done on the fly. Thus, this new imgix face dectection capability is compliant with Article 29 of Directive 95/46/EC by the EU Data Protection Working Party.

This post covers the practical applications of this new functionality, the different parameters themselves, and how you can start using these parameters in your applications. These parameters are available to all imgix accounts, starting today.

Example: Avatar Composing

We originally began to build out these new face detection parameters after several conversations with customers. These customers had a large library of user-uploaded avatar photos. There was a need to isolate and crop to faces with more control.

Previously, we have offered crop=faces which allows for a cropping to all faces within an image when used in conjunction with fit=crop. However, this operation merely centered all faces within an image when cropping, and did not provide the ability to zoom in on any individual face.

We returned to our workshop to create a feature set that is both flexible and powerful. These new parameters introduce an unparalleled level of control giving imgix users the ability to zoom and crop to faces, or to target individual faces with simple operations.

Let’s see how this works with an example. We want to quickly transform a user-uploaded photo into a circular avatar.

/woman-hat.jpg?w=640

First, we want to set the width, height and a faceareafit mode. This zooms and crops the image to an area bounding both faces found within the original.

width : w=200 height : h=200 fit : fit=facearea

/woman-hat.jpg?w=200&h=200&fit=facearea

We can see the resulting image is sized and cropped correctly. However, we are picking up an extra face in the background.

We want to center on the primary face in the image. Adding faceindex=1 will now set the bounds to fit the first face, filling the width and height specified.

face index: faceindex=1

/woman-hat.jpg?w=200&h=200&fit=facearea&faceindex=1

Now our image is only centered on the face we want. However, it’s a little too close for comfort.

Because setting the index will zoom to the first face it finds, you might need to step back a bit to frame the photo properly. Using facepad will allow you to pad the image, zooming for a better crop composition.

face padding: facepad=2.0

/woman-hat.jpg?w=200&h=200&fit=facearea&faceindex=1&facepad=2.0

Much better. Finally, we want to add a circular mask to the image. We can do that quickly by setting the mask=ellipse parameter.

width : w=200 height : h=200 fit : fit=facearea face index: faceindex=1 face padding: facepad=2.0 mask shape: mask=ellipse

/woman-hat.jpg?w=200&h=200&fit=facearea&faceindex=1&facepad=2.0&mask=ellipse

That’s looking pretty good. We can now programmatically apply these imgix URL API parameters to our other images on our site.

Using the new faceindex and facepad parameters along with the existing mask parameter, we’re able to quickly crop to the face and create a circular mask for our avatar. Let’s take a look at another example.

Example: Isolating Faces Within a Group

The faceindex parameter allows you to select which face in the image to center your crop to. By incrementing the value, you can select a new face. The facepad parameter allows you to adjust the padding around the selected face in the image. This is useful for zeroing in on the perfect crop.

The following demonstrates the use of faceindex and facepad to isolate each child in the following group photo.

/kids.jpg?w=640

By setting faceindex=1, imgix will center the crop on the first face found in the image.

fit : fit=facearea face index: faceindex=1 face pad: facepad=2

/kids.jpg?w=300&h=300&fit=facearea&facepad=2&faceindex=1

By incrementing the faceindex parameter, we’re able to easily cycle through all of the faces in the image.

fit : fit=facearea face index: faceindex=2 face pad: facepad=2

/kids.jpg?w=300&h=300&fit=facearea&facepad=2&faceindex=1

Finally, we can select the last face in the image.

fit : fit=facearea face index: faceindex=3 face pad: facepad=1.5

/kids.jpg?w=300&h=300&fit=facearea&facepad=1.5&faceindex=3

Both the faceindex and facepad parameters give you fine-grained control over photos with multiple subjects.

Available Now

Many of our customers are already using the new face detection parameters in their sites and apps.

If you would like to learn more, please see the new Face Detection section of our documentation. It’s free to sign up for imgix, if you don’t already have an account. If you have any questions about the new parameters or about imgix in general, don’t hesitate to get in touch with support.

#news item #imgix #imgix news #face detection #facial recognition #imaging

Extract EXIF Data and More with JSON Output Format

Today imgix is releasing a powerful new way to discover metadata about your images. It’s called the JSON Output Format.

Previously, imgix output formats have been other image formats like JPEG, GIF, PNG, WebP, or automatically determined by our Automatic Content Negotiation. With the new JSON Output Format, you can read information about your images in a familiar, structured format. This opens up a host of new possibilities.

Easily Retrieve Image Information

The imgix JSON Output Format will cause an image fetch to return a JSON document rather than an image. This payload will have the MIME type application/json and represent several different aspects of the input image. This is done as easily as adding fm=json to your imgix URLs.

Using the JSON Output Format, you can read the DPI, color depth, color profile information, pixel dimensions, EXIF data, and more from source images. Traditionally, imgix strips all image metadata for size and privacy concerns. Using the JSON Output Format will not strip out that data and will include it in the response. Here is an example output for a simple JPEG input image:

{ "DPIHeight": 72, "Depth": 8, "ColorModel": "RGB", "DPIWidth": 72, "PixelHeight": 800, "PixelWidth": 532, "JFIF": { "DensityUnit": 1, "YDensity": 72, "JFIFVersion": [ 1, 1 ], "XDensity": 72 }, "ProfileName": "sRGB IEC61966-2.1" }

Different input formats will include different keys in their JSON output payloads. Please experiment with your own input images to see which keys will be included in the output document. For a more complex example, please see the JSON Output Format document generated by this image of a flower.

View JSON Data

Using the new JSON Output Format, you are now able to do more than just manipulate images with imgix. You can now reason about them as well. This has already led to richer applications for the customers using this feature during its beta period.

Demo: Maintaining Aspect Ratios

To show off some of the new capabilities now available with the JSON Output Format, we’ve put together a little CodePen to show off a common use case. The pen shows off how to use the JSON Output Format to maintain the aspect ratio of several user-generated photos. Previously, we would have to download the image and store its dimensions server-side.

In the pen, just by using a a few lines of JavaScript, we are able to maintain the aspect ratios of our images without any server-side processing. We are able to read information about an image before we decide how we would like it to render.

Using JSON Output Format

The JSON Output Format is available to all imgix customers, beginning today. If you would like to learn more, see the imgix format documentation. If you have any questions about the new JSON Output Format, send an email to support.

#imgix #image processing #responsive images #responsive design #news item

New Trim Parameters

We’ve just rolled out new image trimming parameters for all customers on imgix. There are 3 new parameters: trim, trimmd, and trimsd.

These new trim parameters are a great way of cleaning up user-generated content in your sites and apps by removing excess white area or bordering from existing images. You can read in depth about the feature in our new image trimming documentation.

?trim=auto

If you have any questions about the new feature, don’t hesitate to drop a note to support.

Would you like to receive weekly updates about imgix? Check out our new Changelog. If you would like to receive imgix Changelog updates in email form, subscribe to the newsletter.

#imgix #news #trim #image processing #image editing

Racking Mac Pros: Hardware Design for Web Scale

At imgix‘s scale, maximizing efficiency and performance in image processing is critical for success. For this reason, we decided to incorporate Mac Pros in planning the build of our next generation image renderers. Because no existing Mac Pro server rack suited our needs, we designed and built our own.

Check out the photoset

#imgix #mac pros #hardware #datacenter #exposure #photos

New Simpler Pricing

Today we are announcing radically simpler pricing for imgix – $3 per 1000 master images and $0.08 per GB of bandwidth. Our goal with this pricing is to make it incredibly easy to calculate your costs and give you the freedom to explore all of imgix’s features without impacting your bill. To understand how we are achieving this, there are two major changes to elaborate on.

No more plans

The first change is that we are dropping the concept of plans altogether. We have found that our plans were often confusing to both new and existing customers alike. Instead, we are offering one flat unit price for all imgix customers. Since this price is based on usage, it scales with you whether you are a small, medium, or large customer. Going forward, you never have to worry about when to change plans, or if you are fully utilizing the plan you are currently under. You will only be billed for the services you use, and for nothing else; with no commitment levels to reach, or overage charges to worry about.

Priced by master images, not derivatives

The second change is how we charge for images. Rather than charge for outputs, renders, or derivative images, which are very difficult to estimate, we are now only charging for master images. A master image is an original image that you control and that we fetch into imgix. You can generate as many derivative images (e.g. thumbnails, crops, variants, etc.) as you need from your master image using imgix at no additional cost, other than the bandwidth it takes to deliver them.

This enables to you to take advantage of all of imgix’s features, like imgix.js for instance, at any time without wondering how your bill will be impacted at the end of each month. As before, you are only ever charged for images that are requested through imgix in a given billing period. Image content that sits in your storage but isn’t accessed would never incur any costs through imgix.

More accessible pricing

There are a few additional details to go over with regards to the new pricing. To start, we have lowered our minimum monthly commitment to $10. This is based on feedback from many smaller companies and hobbyists looking to take advantage of our service, but had previously been priced out. To test out imgix for free, we are giving all new accounts a $10 credit. You can experiment and learn the service at no charge for one month, or until you have accrued more than $10 in usage, whichever comes first.

Finally, our new pricing, while much more flexible than before, still might not fit all cases. If you expect to be spending more than $2,500 per month or if you think you might need a custom solution, please contact our sales department.

Pricing & existing customers

If you are an existing customer and prefer your current plan, you can choose to stay on that plan, if you’d like. If you’d like to switch over to the new pricing, you can do so at any time through your customer admin panel.

We are excited to hear how you like our new plans, and see all of the new ways our customers are able to fulfill their design dreams with imgix! Feel free to send us your feedback or questions, we’d love to hear from you!

Check out our New Pricing

#imgix news #imgix #pricing #startup #imaging #images #responsive images #responsive design #imgix js #design #web development

Dynamically Blending Images with imgix

Layer blending is an image editing feature commonly used to blend together multiple images, with a variety of possible transformations. imgix now supports the ability to perform such operations with our image URL API. With imgix's blend parameter, it is now possible to dynamically layer and blend images using a variety of options. This powerful ability can be used to create custom effects and image filters.

The blend parameter accepts an image URL or a hexadecimal value for a solid color. Within this post I will highlight some common ways to make use of the blend parameters, as well as provide some practical examples and best practices for use.

Blend mode operations with imgix are standards compliant, compatible with any browser that uses the img tag, and requires less processing power on the front end or for a device to render than a CSS or in–app solution.

Blending Images

To blend an image, give an image URL as a value to theblend parameter. When blending images, there are additional considerations that need to be made regarding the size and placement of the blend image.

Consider the following two images:

original

blend image

The water kettle is my main image, and the coffee cup is the image I want to blend it with. For this example, the screen blend mode will be used as well as blend size (bs=inherit) to give the blend cup the same sizing and crop type as the kettle image. All of these parameters are set in the URL.

coffeepot.jpg? blend=americano.jpg & bm=screen & bs=inherit

As a result of the screen blend mode, the whiter values in the blend image like the white coffee cup are brought forward. Screening black leaves an underlying color unchanged, screening with white produces white.

Blend Sizing & Alignment

In the above example, blend size bs was set to best fit the blend image in lieu of reduntantly applying width, height, and crop parameters already set to the main image with imgix. When set to inherit, blend size will inherit all of the sizing and alignment operations of the main image to the blend image.

If the sizing is not set, it may be necessary to adjust the blend image using additonal parameters to composite it appropriately to the main image. Here is a list of additional imgix parameters within our API documentation to assist in sizing, scaling, and positioning blended images.

blendblend

bmblend mode

bablend align

balphblend alpha

bwblend width

bhblend height

bfblend fit

bpblend padding

bcblend crop

bsblend size

Blending Solid Colors

For a color, you can use a 3, 6, or 8 digit hex value. For example: blend=333, blend=333333, and blend=ff333333 are all the same. The first two digits of the 8 digit hex value represent alpha opacity of the color.

Example 1

Orange & Overlay

coffeepot.jpg? blend=FA653D & bm=overlay

Example 2

Sky Blue & Screen, slightly transparent

coffeepot.jpg? blend=9915c5f7 & bm=screen

Blend Modes

imgix supports a number of different blend modes, each of which has a unique way of blending your original image with its blend target. The most common and useful of which are multiply, screen, overlay and color. All of the available modes may be placed into five groups.

Consider the following image and color:

original

#CF8DCC

Darkening Modes

Transformations that result in darker values.

bm = multiply

bm = darken

bm = burn

Lightening Modes

Transformations that result in lighter values.

bm = screen

bm = lighten

bm = dodge

Contrast Modes

Transformations that mix and adjust highlight and shadow values depending on the blend color or image.

bm = overlay

bm = softlight

bm = hardlight

Component Modes

Transformations involving HSL and color components.

bm = hue

bm = saturation

bm = luminosity

bm = color

Comparison Modes

Inverts and highlights differences in pixel values between the two images.

bm = difference

bm = exclusion

Applied Usage

Here are some examples on potential uses for blend modes with imgix. These explore ways of achieving scalable image filters, textures, and enhancement effects.

Scalable Filters

Blend modes allow for an easy way to create customized image filters. One of the best ways to make a filter that can work on any sized image, is to serve a native vector PDF (using Adobe Illustrator or Sketch) and use it as the blend image. Using vector PDF files as blend composites will give you the flexibility of vector scaling to make complex color filters or gradient effects.

For the following examples I'm using a PDF file with multiple pages http://assets.imgix.net/blog/blog-blends.pdf, and am using the page param with imgix to set each graphic. These graphics are vector, and can scale to any size dynamically, without any degredation to quality to the output when set as blends.

Note: The page parameter is applied to the multipage pdf to select the graphic. When using parameters on an embedded URL its best to use encoded URI values. For example, ?= %3F, /= %2F, := %3A, and == %3D

Split Tone

Using a diagonal gradient with two colors, making use of bs=inherit and a screen blend mode.

original

blend filter pdf

? blend=http%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog%2Fblog-blends.pdf%3Fpage%3D3 & bs=inherit & bm=screen

Text Underlay

A common way to title imagery is use a dark to transparent gradient over a portion where the text overlays. With this example, I am using a black to transparent black gradient graphic, with the multiply blend mode. For this example, the sizing and cropping for the blend image are set manually.

original

blend filter pdf

? blend=http%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog-blends.pdf%3Fpage%3D1 & bc=bottom,center & ba=bottom,center & bf=crop & bh=360 & bw=640

Here are some sample params for adding text. View imgix Text API documentation

& txt=Sample%20Text & txtclr=ffffffff & txtfont=Helvetica,bold & txtalign=bottom,left & txtsize=45 & txtpad=32

Graphic Overlays

You can also use more complex vector graphics over images, think of them as advanced watermarks. Along with a screen blend mode I am layering the imgix logo.

original

blend filter pdf

? blend=http%3A%2F%2Fassets.imgix.net%2Fblog%2Fblog-blends.pdf%3Fpage%3D2 & bs=inherit & bm=screen

Adding Texture

Blend modes make it easy to add texture to images, giving them a bit more character. The ability to add a texture dynamically and non-destructively is quite powerful. In these examples, I am also making use of the invert parameter to vary how the same texture can be applied.

Multiply Texture

When you multiply paper texture, the darker values will show through. In this example, the paper texture image is mostly white, with subtle greys and blacks. When blend multiplying the texture onto the main image, the greys and blacks will show through, providing the texture.

original

texture

Texture image, multiply blend mode.

? blend=texture.jpg & bs=inherit & bm=multiply

Screen Texture

In this example I will use the same texture image and invert it. I will then screen the inverted texture to have the resulting sparse white values show through to produce the texture for the image.

original

texture

Texture image with invert=trueapplied, screen blend mode.

? blend=http%3A%2F%2Fassets.imigx.net%2Fblog%2Ftexture.jpg%3Finvert=true & bs=inherit & bm=screen

Image Enhancement

A common effect used in Adobe Photoshop to enhance the appearance of portraits and photos involves using a duplicate of an image layered above itself with some adjustments. In this example, a portait is used with a screen blend that has been blurred with imgix (blur=40), and reduced opacity (balph=80) to achieve a soft lens effect. Blend sizing (bs=inherit) is used to maintain the same width, height, and alignment for the blend image to match the original image.

original

original, blurred

? blend=http%3A%2F%2Fassets.imgix.net%2Fcoffee.jpg%3Fblur=40 & bs=inherit & bm=screen & balph=80

With imgix, the results of these complex operations is always a standard image that can be set to an img tag. This means all images are compatible with any browser, and quicker to render and less taxing on a destination device. To make use of the imgix service and API, please visit http://www.imgix.com/ .

#imgix #blend modes #imgaing #compositing #multiply #screen #news item #imgix news

Refer imgix & Get Some Love

It's no secret that people who use imgix love talking about it. In fact, you might not be surprised to hear that the majority of our business has come from word of mouth referrals. Now we'd like to reward you, our customers, for spreading the word! Today, we are launching our official referral program, which gives substantial financial incentives for simply introducing your friends and colleagues to the tool you already know and love.

How it works

For every enterprise customer who signs up with us, you will receive a 5% credit off your next 6 months of imgix invoices. Yes, this is 5% across the board, regardless of how much your usage levels increase over the next 6 months. And here's the best part: There are no limits to the discounts you receive. If you refer 3 enterprise customers to us, that's 15% off for 6 months. Refer 20 enterprise customers? Yes, that means your imgix services are entirely FREE! We know you love telling people about imgix and how it's helped you. Now we're putting our money where our mouth is, and showing you how much it means to us. For more details on this program, visit our referral details page or you can contact us directly.

Thanks so much for all of your support so far, we look forward to issuing some great discounts in the coming months!

imgix Referral Program

#imgix-news #news item #news #imgix #imagery

New Feature: Download Behavior for Linked Images

Typically, when an image is linked to on a web page, it will open in a new window or navigate away from the current site. However, this is not always the desired result. The user's expectation may be that the image would actually download to their computer. To handle such cases, imgix customers can now set the linked image URLs with the download dl parameter. This modifies the HTTP headers of that image forcing a web browser to download it, instead of opening it in a web browser.

When linking to an image configured with imgix and setting the <a> tag, use the dl parameter to trigger the download. The dl parameter should be set to a name you want used in the resulting file. The parameter fm can be used to control the output format. Appending ?dl=original&fm=png to a link will force the web browser to download that image as "original.png".

The download parameter can be used with any combination of other imgix parameters to download specific variants. A typical case for this would be to download assets from a press kit, or screen sizes for a desktop wallpaper.

View dl parameter in documentation.

Example Link Code:

<a href="http://assets.imgix.net/examples/leaves.jpg?dl=original">Download<a>

Additional Examples:

?dl=original Download Original

?w=400&dl=medium Download Medium

?w=200&dl=small Download Small

#imgix #feature #imgix-news #download #html #news item

Announcing imgix.js for Auto Responsive Imagery

Announcing imgix.js, a #javascript library for automatic #responsive image sizing http://www.imgix.com/imgix-js

imgix.js is a dependency-free Javascript library that allows you to easily use the imgix API to make images on your site or app responsive to device size and pixel density. imgix.js also allows for intuitive use of imgix features like text formatting, color palette extraction, color adjustments, effects, and watermarking.

imgix.js, Examples and Documentation

#imgix #graphics #responsive #responsive images #responsive imagery #engineering #imgix-news #Image processing #image editing #image sizing #news item

WebP, JPEG XR, & Progressive JPG Support w/ Auto Content Negotiation

Today, we are announcing support for several new web image formats. These formats allow you to serve your images more efficiently while maintaining high levels of quality. The formats are WebP, JPEG XR, and progressive JPEG. At the same time, we are also announcing automatic content negotiation. Automatic content negotiation makes it incredibly easy to serve these new image formats to the right browsers without any additional work.

WebP and JPEG XR

WebP and JPEG XR are newer image formats that provide much higher compression ratios and lower quality loss. However, they are not fully supported in all browsers. WebP is supported in newer versions of Chrome and Opera. JPEG XR is supported in newer versions of Internet Explorer. About 60% of users use browsers that support either of these two formats and therefore can enjoy much faster images.

The results are pretty amazing. On average, our customers have seen images that are about half of their equivalent file size using these formats! The same quality image, half of the size. (We discuss how we measured this at the end of this post.)

You can begin using these formats right now with the addition the new values “webp” and “jxr” to the format parameter (fm). For example:

http://static.imgix.net/treefrog.jpg?fm=webp (Returns a WebP image) http://static.imgix.net/treefrog.jpg?fm=jxr (Returns a JPEG XR image)

Progressive JPEGs

Progressive JPEGs restructure your image so that a low-resolution version of your image loads first, followed by progressively higher resolution versions of the image. While this does not necessarily accelerate the transfer of the image, it does give faster visual feedback to your user. Your user sees a blurry image load very fast before improving to the full quality image. This is instead of having the full quality image just pop in after a long pause. Giving visual feedback quickly is especially useful for larger images in slow connection environments (e.g. roaming mobile phones).

By default, if an image is being served as a JPEG and the total number of output pixels is more than 22,500 (~10kb in JPEG compressed image data), we will return a progressive JPEG automatically. Otherwise, the increased image weight of supporting a progressive JPEG is not worth it and we deliver a regular JPEG instead.

You can force the use of progressive JPEGs by setting the new value “pjpg” as the format parameter (fm). For example:

http://static.imgix.net/treefrog.jpg?fm=pjpg (Returns a progressive JPEG image)

Automatic Content Negotiation

The struggle with using these new image formats is that you have to be careful to only serve them in the situations where you know they will work and provide the most benefit. For instance, serving a WebP image to a browser that does not support it will cause the image to not show up. Or, creating a progressive JPEG out of a small image will increase the file size of the image without actually providing much value to the user. Fortunately, we have already solved the headache of supporting these formats in a simple manner. It is called automatic content negotiation. What this effectively means is that we use the various signals available to us, including headers, user agents, and image analytics, to select the optimal image format for your user. We then serve this format back and make sure the image is cached correctly.

Behind the scenes, these are the following steps that we take during content negotiation:

Check if your browser supports WebP. If it does, we serve back a WebP image and return.

Check if your browser supports JPEG XR. If it does, we serve back a JPEG XR image and return.

Check if the request has a fallback format. If it does, we serve back the image in the fallback format.

If we hit this point, serve back the image in its original format.

To use automatic content negotiation, simply set the “auto” parameter to “format”, like so:

http://static.imgix.net/treefrog.jpg?auto=format

This will cause the image referenced above to serve as a WebP image to browsers that support it, a JPEG XR image to browsers that support it, and JPEG to everyone else. imgix makes sure that the image is varied and cached properly.

For lossy images, you can still use the quality parameter (q) to control the output quality that will be returned, regardless of which format is used. For example:

http://static.imgix.net/treefrog.jpg?auto=format&q=65

By setting the format parameter (fm) in addition to the auto parameter, you can provide a fallback format. So for example, WebP and JPEG XR support alpha transparency for lossy images whereas JPEG does not. You can choose to respond with a lossless PNG as fallback in these cases in order to maintain alpha transparency. For example:

http://static.imgix.net/feature-retina.png?fm=png&auto=format

WebP and JPEG XR also support lossless implementations. Though they incur higher file sizes than their lossy counterparts, they are often much better compressed than PNG. To ensure your images are lossless, simply add the lossless parameter like so:

http://static.imgix.net/feature-retina.png?fm=png&auto=format&lossless=1

In Production Now!

A handful of our customers have been field testing these features for us and the results are incredible. We have seen an average decrease in file size of 41% across all of our customers for images served in these new formats. One of our particularly photo heavy customers saw image file size decreases of 18-74% for every image in their entire image set when serving out these new file formats!

We could not be more excited to be rolling out these advanced image formats to our customers. Everything we have just described is available for you to use in production right now. Sign up at https://webapp.imgix.com/signup to start using these image formats today!

– Team imgix

UPDATE: As it was brought up in a Hacker News thread, we wanted to explain how we obtained our numbers.

1.) We randomly sampled ~1% of image requests from the set of image requests from our customers who were testing content negotiation in our beta. This yielded 1,159,515 records for about a 48 hour window.

2.) We isolated and deduplicated all requests that were returned as JPEG, or PNG. This yielded 118,037 unique image requests.

3.) We isolated and deduplicated all requests that were returned as WebP or JPEG XR. This yielded 119,303 unique image requests. A single JPEG or PNG may be served as both WebP and JPEG XR depending on the browser support or never served as one of these formats. This is why the numbers differ from the previous bullet.

4.) We outer joined unique original formats to unique new formats. This gave us the ability to compare the file size of JPEG or PNG against their WebP and JPEG XR equivalents. This yielded 123,791 comparisons.

5.) We then measured the comparisons to arrive at the numbers we included in this blog post. We included statistical percentiles and average numbers in the blog post.

#imgix #webp #content negotiation #responsive web #jpeg #jpeg xr #news item

A Visual Tour of our Newest Datacenter

At imgix, our mission is to help you increase the value of your images. We do this by delivering your images faster, giving you tools to make your images look their best, and optimizing your images for the devices and browsers your users are using. imgix is designed from the ground up to achieve this mission.

In late 2013 we broke ground on our largest data center space to date. We put a tremendous amount of effort and experience into this project and wanted to share some of our photos from it.

View entire photo set on exposure

On–the–Fly Image Auto Enhancement

To provide our customers with the ability to deliver the best images possible, the imgix team will be continually rolling out new features to ensure smooth and exceptional image delivery.

The imgix URL API currently incorporates custom parameters like exposure (exp), gamma correction (gam), and saturation (sat) to losslessly adjust the output appearance of your images. However, most aesthetic image adjustments will not be suitable across entire image libraries. So we decided to simplify the image adjustment process.

Introducing auto: our now-operative URL API parameter. When set to true, auto adjusts an image by using the distribution of highlights, midtones, and shadows across all three Red, Green, and Blue (RGB) channels. Essentially, we have created our own special recipe for making image sets more vibrant and compelling, all while minimizing the effort expended by you, the customer.

yourexample.imgix.net/image.jpg?auto=true

auto = true auto = false

The following side-by-side comparisons show the original image and the auto enhanced version:

Original Image 50/50 Split Auto Enhanced

Depending on the image, the results may range from subtle to striking. Each enhance operation takes into account the current image and uses it as a base to create a more vibrant, engaging, and better looking image. The bonus is that you don’t need to use an external program and auto can be switched on for millions of images at once—saving you valuable time.

Red–eye Removal & Advanced Options

The auto enhance feature also provides red-eye removal. Adding fit=crop & crop=faces to the URL string will enable face detection, and auto enhance will look for and attempt to resolve any red-eye issues that are detected.

Original Image 50/50 Split Red Eye Removal

In the event you want to further fine-tune the application of auto enhance or the red–eye removal parameter—such as by separating the red-eye removal from the other features of auto enhance and employing red–eye removal on its own—you can use the following values for auto instead:

auto = enhance,redeye auto = enhance auto = redeye

This formatting will also allow for adding future auto enhancement operations.

The image comparison below demonstrates the auto enhanced image, and then the same image (unenhanced) but treated with red-eye removal.

Auto Enhance Only 50/50 Split Red Eye Remove Only

For more on how to use imgix parameters, you can refer to our Help Center article on accessing images and consult the URL API documentation.

#imgix #new feature #feature #imaging #enhance #image editing #image processing #news item

Trending Blogs

Recently Viewed Blogs

imgix