(Re-)Building a scalable CDN for Coolblue

CDN. When quality matters.

• Introduction • Our current CDN characteristics • Introduce a
new feature • Rebuilding our CDN: • Resizing and Quality • Dissimilarity • What’s in it for us? IN THE NEXT 45 MINUTES.

• Software developer for 11 years at Coolblue • Started
as a backoﬃce developer • Became web developer • Get into the DevOps mindset FRANK VAN BOVEN.

• Web developer for +10 years • Working ~4 years
for Coolblue • DevOps mindset HARRY DANES.

OUR CDN.

SHOPS. Share the content.

GROWTH. Every day a little bit more.

CURRENT CDN CHARACTERISTICS.

BANDWIDTH ~100 MBIT/SEC.

FEATURE. Everything for a smile.

DYNAMIC SIZE.

OUT OF DISK SPACE. Caching as a problem

FIX IT.

• Scalability • Performance • Quality REQUIREMENTS.

1. SCALABILITY.

CURRENT SETUP .

IMPROVED SETUP .

2. PERFORMANCE.

• Original ﬁle size: 1.6MB • 1261px x 1417px •
Display size: 300px by 300px RESIZE.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Coolblue</title> </head> <body> <img
src=“http://img.cbcdn.net/content/125836” width=“300” height=“300” /> </body> </html> Resize image in HTML - 1/1

IMAGEMAGICK. Resize server side.

<?PHP $imagick = new Imagick(); $imagick->readSourceImage($blob); $imagick->thumbnailImage(300, 300, true); return
$imagick->getImageBlob(); ImageMagick resizing snippet - 1/1

RESIZE RESULTS.

3. QUALITY.

QUALITY. Appearance matters.

<?PHP $imagick = new Imagick(); $imagick->readSourceImage($blob); $imagick->thumbnailImage(300, 300, true); $imagick->setImageCompressionQuality(80);
return $imagick->getImageBlob(); ImageMagick quality snippet - 1/1

80 PERCENT.

RESIZE AND QUALITY RESULTS.

COMPRESSION LIBRARIES. Less is more.

• jpegoptim • jpegtran • jpegrescan • libjpeg-turbo • mozjpeg
• etc. JPEG LOSSLESS COMPRESSION LIBRARIES.

COMPRESSION RESULTS.

QUALITY. 80%

STRUCTURAL SIMILARITY. The numbers tell the tale.

DISSIMILARITY.

DISSIMILARITY. Change is bad, mkay.

81. Simply the best for the human eye.

81 PERCENT.

IMAGE QUALITY. A picture is worth a thousand words.

SOUNDS INTERESTING. What’s in it for us.

LIVE DEMO. Prepare for disaster.

IMAGE QUALITY. A picture is worth a thousand words.

DIMENSIONS. When size does matter.

REAL RESULTS.

• The dissimilarity is a value which is computed between
two images. • Result: The smallest ﬁles with the best quality. • Deﬁne your own quality boundaries. • 80% too high (for us). RECAP .

PRODUCTION READY. Live within a few weeks.

QUALITY MATTERS. Whenever you want to be successful.

(Re-)Building a scalable CDN for Coolblue

(Re-)Building a scalable CDN for Coolblue

More Decks by Frank van Boven

Other Decks in Programming

Featured

Transcript