🇺🇦 Тег IMAGE - Lazy Loading, Пропорції зображення, обробка помилок якщо зображення не завантажується

🇺🇦 Тег IMAGE - Lazy Loading, Пропорції зображення, обробка помилок якщо зображення не завантажується Зроби цей світ краще 👇 👇 👇 🇺🇦 Фонд Притули - 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 Опис відео роліка: У відео розберемо як корректно створювати тег зображення Image у HTML? На що треба звернути увагу, вказання ширини і висоти, для зеревування місця і уникнення скакання контенту, та коректної калькуляціі пропорцій зображення - aspect ratio. Також поговоримо коли треба додавати loading lazy для зображення, а коли додавати lazyloading - не треба. Також Поговоримо про те як додавати будьякі ресурси в прелоадінг - що б браузер одразу починав завантажувати картинкі які знаходяться на першому екрані, щоб одразу показати їх користувачу - так званий preload link. Ну і на останок поговоримо про обробку зображення у випадку якщо зображення не завантажилося з сервера або завантажилося з помилкою - атрибут onerror #css #html #js #курсиCSS #урокиCSS #HTML #ТегЗображення #ЛінивеЗавантаження #ПропорціїЗображення #ВебРозробка #ФронтендРозробка #АдаптивнийДизайн #ПродуктивністьВеб #ОбробкаПомилок #Прелоадінг #SEO #UXДизайн #ПорадиЗHTML #ВебДизайн #Доступність #HTML #ImageTag #LazyLoading #AspectRatio #WebDevelopment #FrontendDevelopment #ResponsiveDesign #WebPerformance #ErrorHandling #Preload #SEO #UXDesign #HTMLTips #WebDesign #Accessibility