🇺🇦 Як зробити placeholder для зображення? Розмите зображення поки основне завантажуються браузером?

Ч1 –

Зроби цей світ краще 👇 👇 👇
🇺🇦 Фонд Притули – 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

Опис відео роліка:
В відео поговоримо про те – як зробити placeholder для тега image? Тобто як зробити розмиту картинку, blurhash варіант зображення, що буде відображатися поки основне зображення завантажується? Як зробити base64 зображення, щоб не чекати поки blurnes варіант зображення завантажеться з сервера? Які стандатні CSS стилі збросу для тега image бажано використовивати? Та як зробити внімацію що показує, що зображення завантажується? Поговоримо також для чого в такому вибадку на знадобиться onload атрибут
Приємного перегляду

#Зображення #PlaceholderЗображення #CSS #HTML #Blurhash #Base64Зображення #ЗавантаженняЗображення #ВебРозробка #onloadАтрибут #АнімаціяЗавантаження #ФронтендРозробка #ВебДизайн #ПродуктивністьСайту #Україна #webperformance
#ImagePlaceholder #CSS #HTML #Blurhash #Base64Image #ImageLoading #WebDevelopment #onloadAttribute #LoadingAnimation #FrontendDevelopment #WebDesign #PagePerformance #LazyLoading #ImageOptimization #WebPerf