Tackle Responsive Images Responsibly

Simple, Fast, Powerful

The web isn’t one-size-fits-all anymore

TweenPics is a Responsive Image Service Solution. It offers on-demand responsive image generation combined with a smart and unobtrusive javascript library, all based around a no-nonsense, testable, URL-based API.

Why it's awesome?

Pixel Perfect

Deliver your images perfectly sized at the correct DPI for any device.

learn more

Blazing fast

Resize, crop, compress your images on the fly in milliseconds.

learn more

Reliable

99.999% service uptime and 99.99% image delivery success on average.

learn more

Friendly API

Intuitive API and efficient JS library with minimal footprint.

learn more

Ideal compression

Reduce image size by up to 75% without compromising quality.

learn more

Global CDN

Serve your images closer to your end user via a worldwide CDN powered by Amazon™.

learn more

Playground

To get started right away, just add a class to your image elements and turn their src into a data-src. This is but the very beginning though: TweenPics will give you access to a simple yet powerful API that can adapt to all kind of situations and works hand in hand with native HTML5 Responsive images helpers.

<html>
<head>
  <style>
  img { width: 100%; height: auto; }
  </style>
  <script src="//i.tween.pics/v1/script"></script>
</head>
<body>
  <img class="tweenpics" data-src="
"> </body> </html>
<html>
<head>
  <style>
  html, body { height: 100%; }
  body { background-position: center; background-repeat: no-repeat; background-size: 
; } </style> <script src="//i.tween.pics/v1/script"></script> </head> <body class="tweenpics" data-background="url(
)"></body> </html>
<html>
<head>
  <style>
  img { width: 100%; height: auto; }
  </style>
  <script src="//i.tween.pics/v1/script"></script>
</head>
<body>
  <img class="tweenpics" src="//i.tween.pics/v1/resize=320/
" data-src="
"> </body> </html>
<html>
<head>
  <style>
  img { width: 100%; height: 100%; }
  </style>
  <script src="//i.tween.pics/v1/script"></script>
</head>
<body>
  <img class="tweenpics" data-src="
" data-src-transform="focus=
/crop=
/cover"> </body> </html>
<html>
<body>
  <?php $picture = "
"; ?> <picture> <source media="(min-width: 1200px)" sizes="100vw" srcset="//i.tween.pics/v1/focus=50px75p/cover=12:4/resize=2400/<?= $picture ?> 2400w, //i.tween.pics/v1/focus=50px75p/cover=12:4/resize=1200/<?= $picture ?> 1200w"> <source media="(min-width: 769px and max-width: 1199px)" sizes="100vw" srcset="//i.tween.pics/v1/focus=50px75p/cover=9:3/resize=1538/<?= $picture ?> 1538w, //i.tween.pics/v1/focus=50px75p/cover=9:3/resize=769/<?= $picture ?> 769w"> <source media="(min-width: 768px and max-width: 1023px)" sizes="100vw" srcset="//i.tween.pics/v1/focus=50px75p/cover=4:3/resize=1536/<?= $picture ?> 1536w, //i.tween.pics/v1/focus=50px75p/cover=4:3/resize=768/<?= $picture ?> 768w"> <img src="//i.tween.pics/v1/focus=50px75p/cover=1:1/resize=320/<?= $picture ?>" srcset="//i.tween.pics/v1/focus=50px75p/cover=1:1/resize=800/<?= $picture ?> 800w, //i.tween.pics/v1/focus=50px75p/cover=1:1/resize=400/<?= $picture ?> 400w" alt> </picture> </body> </html>

How it works?

TweenPics acts as an image proxy. It requests your master image, stored on your own web server or in a cloud storage like Amazon S3, then generates a device-adapted version of it, encoded using the best compression available, that's delivered directly to the end-user from the closest delivery point available.

Let's take the example of a full width image much alike the header of this very page. A Paris user with an iPhone 6 will fetch a 750px wide 33KB JPEG image from one of our two delivery points in Paris. A brazilian Chrome user on a non-retina MacBook will fetch a 1440px wide 114KB WEBP image from our delivery point in São Paulo or in Rio de Janeiro, whichever is the closest.

Width and size will vary if the iPhone is not in landscape mode or Chrome is not in full screen. TweenPics will even handle changing orientation and resizing browser windows dynamically.

Last month in numbers

256 millions
images delivered
5.7 TB
data transfered
60 ms
avg time per image

Some of our happy customers

Fake Customer
Fake Customer
Fake Customer
Fake Customer
Fake Customer
Fake Customer

ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nulla sed pharetra condimentum

Jean, Company CTO

ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nulla sed pharetra condimentum

Jean, Company CTO

The Simplest, Most Powerful Way to tackle Responsive Images