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

🇺🇦 Як зробити placeholder для зображення? Розмите зображення поки основне завантажуються браузером? Ч1 - https://youtu.be/pFD4YkX8QME Зроби цей світ краще 👇 👇 👇 🇺🇦 Фонд Притули - 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