🇺🇦 JPEG vs WEBP vs AVIF яка різниця в розмірі? Крос браузерний варіант тег PICTURE та SOURCE

Ч1 –

Ч2 –

Ч3 –

Зроби цей світ краще 👇 👇 👇
🇺🇦 Фонд Притули – https://prytulafoundation.org/
🇺🇦 Стерненко – https://www.youtube.com/@STERNENKO

👻 На розвиток каналу Frontend Shinobi
БАНКА – https://send.monobank.ua/jar/5tEodxQoEu
Крипта – USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395

Лінкі:
Соурси
https://bitbucket.org/fairproject/frontend-shinobi-yt/src/main/25-adaptive-images/

Створення Blur зображення онлайн
https://squoosh.app/editor

SVG to Base64
https://yoksel.github.io/url-encoder/

Image to Base64
https://base64.guru/converter/encode/image/jpg

Компресування jpg|webp|png
https://tinypng.com/

Компресування Avif
https://cloudinary.com/tools/compress-avif

Конвертація jpg – webp
https://www.freeconvert.com/jpg-to-webp

Конвертація jpg – avif
https://picflow.com/convert/jpg-to-avif

Плотність пікселів на різних пристоях
https://yesviz.com/viewport/

Бібліотеки для обробки на стороні backend
https://github.com/axe312ger/sqip
https://github.com/woltapp/blurhash
https://evanw.github.io/thumbhash/

Рекомендовані CSS стилі для скидання стилів зображення
https://gist.github.com/palashmon/35bda7887eb4bc45459d71eca3dda7a5

Інфа про автоматичне відавання підтримуємого зображення браузеру
https://aws.amazon.com/blogs/networking-and-content-delivery/image-optimization-using-amazon-cloudfront-and-aws-lambda/

Додаткові матеріали якщо є бажання
https://www.debugbear.com/blog/responsive-images
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://web.dev/learn/design/responsive-images

NextJs image component
https://nextjs.org/docs/pages/api-reference/components/image

Опис відео роліка:
В відео поговориме про те, що не можна використовувати зображення, що збережені одразу з FIGMA чи adobe Photoshop, бо вони зовсім не зжимаються для WEB і займають занадто багато місця. Поговоримо про те які є онлайн сервіси, що сжимають зображення. А також про різницю в розмірі фото між jpeg webp та avif. Також зробимо тег picture в середині якого оголосимо img та source для різних форматів зображення, щоб зробити кросбраузерний варіант

#ОптимізаціяЗображень #СтисненняЗображень #JPEGvsWebP #AVIFформат #ОнлайнСтиснення #ЗображенняДляWEB #PictureTag #WEBформати #РозмірФайлів #ВебОптимізація #РізніФорматиЗображень #КросбраузерніЗображення #WebPerformance #ОптимізаціяВебЗображень
#ImageOptimization #CompressImages #JPEGvsWebP #AVIFformat #OnlineImageCompression #WebImageFormats #PictureTag #CrossBrowserSupport #WebPerformance #ImageFormats #ResponsiveImages #WebImageOptimization #FileSizeReduction #WebDevelopment #WebDesignTips