Web Images

You are probably doing it wrong

Christian Riesen

him/he

Developer at liip.ch

Creator of rokka.io

Human, I swear

"Why am I not doing this already?"

What's the problem?

"This is fine"

Resources

Resources

Serving images and app from same server

Lots of traffic on images slows app

Server not optimized for either

Resources

Use different server for images

Use different domain (connection pools)

Optimize servers by task

Browser Caching

Browser Cache

Overwriting a file path is bad

"Just reload with shift", yes, tell every user that

Each browser is it's own unique snowflake

Each users environment too

Browser Cache

Image content changes? URL must change!

Optimize for this pattern, not "nice URL's" for images

Send headers to cache for a year

Fastest byte is the one you don't have to send

HTTP/2

HTTP/2

One connection, multiple ressources

Faster transfer, no ramp up for each image

Less resources on server needed

HTTP/2

Use it for your images

Safe fallback to HTTP/1

Supported by all current browsers

No excuses

Come on!!!1!

SSL

SSL

Make image URLs https://

https:// images can be used in http:// sites

No "security" warnings anywhere

SSL TLS

Make image URLs https://

https:// images can be used in http:// sites

No "security" warnings anywhere

Formats and Sizes

Formats and Sizes

Get highest resolution source image

Don't throw away source files

Scaling down is fine

Scaling up looks like 💩

Always scale from originals

Format matters depending on content

Halp!?

Meet rokka.io

• Software as a Service, pay as you use
• Rokka saves high res images, upload by API
• Rokka renders images
• Rokka delivers images (CDN)
• Plugins and integrations

How does it look?

https://liip.rokka.io/www_liiperbig/70dc39c389a9fd1e5f120b1c83661866720da7e7/christian-riesen.jpg

How does it look?

https://liip.rokka.io/www_liiperbig/70dc39c389a9fd1e5f120b1c83661866720da7e7/christian-riesen.jpg

How does it look?

https://liip.rokka.io/www_liiperbig/70dc39c389a9fd1e5f120b1c83661866720da7e7/christian-riesen.jpg

How does it look?

https://liip.rokka.io/www_liiperbig/70dc39c389a9fd1e5f120b1c83661866720da7e7/christian-riesen.jpg

How does it look?

https://liip.rokka.io/www_liiperbig/70dc39c389a9fd1e5f120b1c83661866720da7e7/christian-riesen.jpg

How does it look?

https://liip.rokka.io/www_liiperbig/70dc39c389a9fd1e5f120b1c83661866720da7e7.jpg

Automatic Cropping

It's like magic, only better

Originals

Autocropped

The bad way...

Define subject areas

By default, read from EXIF data

Can be set by hand per source image

Wow, such crops

Crop on subject, not people

Crop smart

Where does Rokka fit?

Public images

Any size or volume (very low to very high)

Integrated into CMS, custom application

Where performance is important (hint: everywhere)

Web as well as mobile

As infrastructure service for other services

Rokka does only web images and that as good as possible

So you don't have to

Thanks for listening!

https://rokka.io

https://www.liip.ch

Thanks for listening!

https://rokka.io

https://www.liip.ch

I have one more cool thing, do you want to see it?

Loading Big Images

Title Text

Thanks for listening!

https://rokka.io

https://www.liip.ch

I'm done now, for real