We got a great response when imgix launched support for HTTP/2 in January. As we’ve talked about it with our customers, we’ve noticed that people are happy to have HTTP/2, but not everyone fully understands how it can improve their site. So here’s a short, jargon-free explanation about what HTTP/2 does and how you can benefit from it.
How HTTP/2 Can Speed Up Your Site
State of the URL API
When you’re looking for information about an imgix feature, the API documentation is your friend—every parameter in the service is listed with examples, ranges, and default values. We also have in-depth tutorials for more complex multi-parameter use cases.
This is great for humans who need to know the ins and outs of imgix, but what about machines? If you’re building tools, libraries, or URL generators based on our Image URL API, having a single, machine-readable source of truth about the capabilities of all available parameters is crucial. Fortunately, it’s available on GitHub in JSON format and as Bower and NPM packages.
HTTP/2 Support Now Live!
HTTP/2 is a big leap forward for websites and web apps. It improves performance by making resource requests more efficient, which means that your pages should load much faster—with a particular boost for image-heavy sites.
imgix is always working to squeeze the most performance out of your images, so we’re pleased to announce that we now offer HTTP/2 free of charge to all accounts.
What You Should Know
- HTTP/2 is on automatically for all accounts, and will be the default connection method over secure (HTTPS) connections. You don’t need to change your account or Sources to use it and there is no additional cost.
- HTTP/2 fixes many of the shortcomings found in HTTP/1.1, so you no longer need to use workarounds such as Source sharding or image sprites to get maximum performance. If you’re using these techniques, you should consider discontinuing them. They can sometimes hurt performance under HTTP/2 due to differences in the way it requests resources like images.
Resources
“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.
Redesigning the Knight Foundation Website with imgix
Recently, Octopus had the opportunity to re-design and re-architect the website for Knight Foundation, a national foundation that invests in journalism, arts, and in the success of cities where the Knight brothers once published newspapers. One of Knight’s biggest priorities—and perhaps one of our biggest challenges—was to make the site as performant as possible across all mobile devices while at the same time displaying their imagery in a big way. That’s no easy feat, but imgix came through for us big time.
Out of the box, imgix provides efficient ways to fulfill the baseline of performance enhancement needs for a site’s images. CDN? Check! Optimized and compressed images on the fly? No problem! Retina-ready photos served to retina devices so users don’t waste data? Yup! Images cropped to predefined aspect ratios, colors auto-enhanced, and the whole thing served at the right size and format for the current device? Surprisingly easy!
Seriously, imgix provides all these tools, and its as simple as adjusting a few parameters on the image’s URL. Having imgix to draw on let us do a surprising amount of optimization with very little fuss. I’d like to talk about a couple of tools in particular that saved us a lot of time—imgix’s auto adjustments API and the imgix.js library.
Optimizing Images for PageSpeed
For any online organization that’s concerned with their website performance (that’s everyone, right?), Google’s PageSpeed Insights tool is a useful guide for improvement. Just enter your website URL, and you’ll get a report about what’s working well and what needs to be fixed.
PageSpeed is great about pointing what might be slowing your page down, but it doesn’t always give you specific guidance about how to fix those things, particularly when it comes to images. PageSpeed might tell you you need to compress them, but it doesn’t give you any indication of what kind of compression is good enough.
To make this a bit easier, we’ve experimented extensively with PageSpeed, and have come up with a set of best practices for optimizing with imgix that will help you improve your score without any noticeable reduction in quality.
Subscribe
Stay up to date with our blog for the latest imgix news, features, and posts.
