ВЕРСТКА зображень під RETINA дисплеї | туторіал початківцю за 6 хв

Привіт, девелопери!
Досліджуємо основні базові варіанти верстки фонових і контентних зображень для різних екранів. Визначаємо різницю між векторною та растровою графікою, говоримо про графічні елементи, які підлягають оптимізації. Розбираємо варіанти оптимізації фонових і контентних зображень, а саме background-image для різних resolution та CSS function image-set.

0:00 - 0:30 Інтро
0:31 - 01:07 Чи потрібно оптимізувати векторну графіку?
01:08 - 01:19 Що потребує оптимізації?
01:20 - 02:59 Оптимізація фонових зображень через різні коефіцієнти
03:00 - 04:03 Оптимізація фонових зображень через функцію image-set
04:04 - 05:32 Оптимізація контентних зображень
05:33 - 06:18 Аутро

🧑‍💻 Репозиторій із кодом: https://github.com/prjctr-ytb-code/explainer-images-on-retina/
Користуйтеся 💙

🏫 А якщо треба допомога наших кураторів, приходьте на курс JavaScript: https://bit.ly/3FUgioE

📱 Ми у соцмережах:
Telegram чат: https://t.me/dev_prjctr
TikTok: https://www.tiktok.com/@0101_prjctr
Х: https://twitter.com/prjctrcom
LinkedIn: https://www.linkedin.com/school/projector-institute/
Facebook: https://www.facebook.com/prjctrcomua
Instagram: https://www.instagram.com/prjctr_institute/

💻 У нашому прикладі використали роботу випускниці Projector Institute Юлії Михайлової https://www.behance.net/gallery/126506867/ETNODIM-E-commerce-UIUX-Design

Тэги:

#верстка_под_ретину #програмування #курси_програмування #курси_з_програмування #курсы_программирования #разработчик #projector #верстка #вертальник #retina_верстка #верстка_под_retina #адаптивный_сайт_retina #ретина_дисплей_css #html #css #html_css #верстка_для_ретины #retina_img #picture_retina #image_retina #css_retina #верстка_изображений #html_retina_images #логотип_retina #retina_ready #ppi_retina #foto_retina #imageset_html #retina_js #css_retina_display #retina_image_css

Скачать видео