New feature: Responsive images

Responsive images now on the Push Platform as standard

To keep pace with the explosion of device sizes and resolutions. Today, we can access the internet through many devices, on networks that range from lightning-fast to slow-paced. Add to that reality our clients and investors require and demand high quality images, we face a problem of website load times.

We want the web to be lean and fast  — but we also want need our website to look great. So most of us end up optimizing for retina mobile devices.

But it’s an unrealistic hope — most mobile users will just bounce from a slow page load time, in fact Google will not even show images on mobile chrome over 2mb.

That’s why we’re bringing responsive images to Push — for everyone.

How it works

For the technically inclined: this means we’ve built srcset and sizes into every inline <img> element, automatically generating variants for each image you upload and serving the most efficient option to optimize page load speeds for every site visitor.

Our approach to building responsive images into all Push sites offers three key benefits:

  1. Speed: Modern browsers use a technique called “pre-fetching” or “pre-caching” to improve page-load speed by loading images before you even visit the page. To take advantage of this speed boost, we chose to use srcset and sizes and not a JavaScript-based method, which would have required an initial page load before we could serve the correct variant.
  2. Quality: Aside from slowing down page loads, JavaScript-based methods serve low-quality placeholder images on initial load, or, if using <noscript>, create bloated HTML that’s not standards-compliant.
  3. Efficiency and automation: We want to help you design high-quality websites faster, so we’ve taken the time-intensive process of generating image variants, measuring sizes, and writing code and automated it all, so you can focus on design. Doing this yourself or using a standalone JavaScript library still leaves you with the task of processing each master image into variants — tedious work that only slows down the web design cycle.

And finally, we made responsive images free for everyone who uses Push.

The result?

Based on our before-and-after tests of page load speeds for some of our more image-heavy templates, this change can improve mobile page loading speeds by up to 10 times (and even more for very image-heavy pages). Even on desktops and large screens, this change will make a sizeable impact for high-quality stock image sized photos—which in most cases are far larger than necessary.

how responsive images work on the push platform
‍‍In this example, the 500px variant loads 95% faster than the 3500px original. Which is great news for your mobile users.

If we focus this comparison on the image files themselves, the performance improvements are even more pronounced. Take the above example of a high-quality (but not unreasonably large) stock photo that we ran through our normal variant generation process. Compared to the original 3500px width image, the 500px width variant is nearly 95% smaller, and will load 20 times faster on mobile.

Lets put it this way, since the luanch of responsive images our customers now enjoy website that load up to 10X faster.

See how Push can help you company grow its investor relations website and the befits of the of our platform.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form