Image Formats | SvelteKit from Scratch #6 | Web Development
1Website work starts at 00:42:10
Creating a website from scratch in SvelteKit, starting with the mobile views.
This stream focused on Images & optimizations
Resources followed:
Image Optimization Tips - https://www.youtube.com/watch?v=hJ7Rg1821Q0
AVIF & WebP info - https://www.youtube.com/watch?v=hT1764wkBdk
Responsive images - https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Timestamps:
00:00:00 Stream setup
00:04:24 Recap
00:10:30 Diffle, Cine2Nerdle, Gamedle
00:42:10 ffmpeg, image generation and file conversion
01:01:30 Testing compression types (jpg vs png vs webp vs avif)
01:53:00 Comparing different compression options
02:21:00 Figuring out a photo compression and resize plan
02:39:30 Reviewing and retesting the plan
03:05:00 Utility component to generate ffmpeg commands
03:18:00 Testing the utility component
03:45:00 webp vs jpg research
04:07:00 srcset & picture element research
04:21:33 Wrap up and future plans
-------------------------------------------------------------------------------------------------------------------------------------------
Music on stream from:
GameChops - https://www.gamechops.com,
StreamBeats by Harris Heller - https://www.youtube.com/c/StreamBeatsbyHarrisHeller, or
White Bat Audio - https://www.youtube.com/c/WhiteBatAudio
-------------------------------------------------------------------------------------------------------------------------------------------
Tune in here at https://youtube.com/@LombyGG or on https://twitch.tv/LombyGG
-------------------------------------------------------------------------------------------------------------------------------------------
Mulitstreaming powered by Restream https://restream.io
-------------------------------------------------------------------------------------------------------------------------------------------
Massive thank you for watching my videos! Every view, like, and subscribe is hugely appreciated!