Is your JAMstack app really JAMstack?

What are we missing?

@obinnaspeaks

Speaker Bio

  • Obinna "Speaks" Ekwuno

  • Media developer expert at Cloudinary

  • Technical writer at Scotch.io & LogRocket

  • Full-Time NERD

     

@obinnaspeaks

Talk Goals

 

  • Get the right image formats

  • Improve performance with the right Image delivery strategy

  • Handling videos properly

JAMstack Superpowers

Security

Performance

WHAT IMAGE FORMATS ARE YOU CURRENTLY USING?

FORMAT

  • PNG
  • SVG
  • GIF
  • JPEG

STUFF

  • PHOTOS
  • SCREENSHOTS
  • ANIMATIONS

Wait there's more??

Web P for Chrome - 10KB

JPEG-XR EDGE - 13KB

JPEG 2000 SAFARI-10KB

Do I always have to pick by myself?? 

Title Text

 

HANDLING MEDIA  LIKE A PRO 101

Let's talk about

  • Automatic image format featuring
  • Ensuring quality doesn't drop

Title Text

USING AUTOMATIC  FEATCH FORMATTING


https://res.cloudinary.com/demo/image/upload/w_300,f_auto/pond_reflect.jpg

F_auto Tag

REGULAR JPEG - 20KB

WEB P DELIVERED TO CHROME USING F_Auto - 9.8KB

WHAT HAPPENS TO THE QUALITY??? 

ABSOLUTELY NOTHING!

OPTIMIZING IMAGE QUALITY USING q_auto 


https://res.cloudinary.com/demo/image/upload/w_400,f_auto,q_auto/canyons.jpg

 HANDLING SLOW NETWORKS.

Popular Image delivery strategies

  • Image Preloading
  • Dynamic/Lazy Loading
  • Progressive Loading

Progressive image loading 

Ah!!

Title Text

Fl_progressive 


http://res.cloudinary.com/demo/image/upload/w_300/sample.png


http://res.cloudinary.com/demo/image/upload/w_300,fl_progressive/sample.png


js
cloudinary.image("sample.png", {width: 300, flags: "progressive"})

USING SDK INSTEAD

fl_progressive parameters

  • progressive:semi - A smart optimization of the decoding time, compression level and progressive rendering (less iterations). This is the default mode when using q_auto.
  • progressive:steep - Delivers a preview very quickly, and in a single later phase, improves the image to the required resolution.
  • progressive:none - Use this to deliver a non-progressive image. This is the default mode when setting a specific value for quality.

HOW TO BEST HANDLE VIDEOS 

So many formats 

  • MP4 
  • WEBM
  • MOV

Problems with handling videos

  • Using the wrong video resolution

  • Using the wrong video codec

  • Using too high a video bitrate

  • Not muting autoplaying videos

  • Not using adaptive bitrate streaming

HOW DO WE MAKE SURE WE HAVE GREAT PERFORMANCE VIDEOS

BUFFERING?

Adaptive Bitrate Streaming

Title Text

HTTP Live Streaming and MPEG-DASH adaptive bitrate streaming formats

Cloudinary::Uploader.upload("big_buck_bunny.mp4", :resource_type => :video, 
  :eager => [
     {:streaming_profile => "full_hd", :format => "m3u8"},
     {:streaming_profile => "full_hd", :format => "mpd"}], 
  :eager_async => true,
  :eager_notification_url => "http://mysite/notify_endpoint",
  :public_id => "bb_bunny")

CLOUDINARY TO THE RESCUE.

THANKS FOR LISTENING 👂

@obinnaspeaks

Made with Slides.com