[Перевод] Почему стоит использовать тег <picture> вместо <img>

Использование изображений и анимаций в интерфейсах пользователя стало распространённой практикой в современных веб-приложениях. Хотя эти примеры современного дизайна делают упор на повышение удобства работы с приложениями, если изображения не адаптируются ко всем устройствам, то могут возникать проблемы.
Мы, разработчики, должны удовлетворять потребностям пользователей. Но чаще всего мы упускаем мелочи, способные быть очень важными из-за того, что мы ищем решения на более высоких уровнях.
Выбор между тегами picture и img может показаться мелким решением, но сделав правильный выбор, вы сможете повысить и удобство для пользователя, и производительность.
В этой статье мы расскажем о различиях между тегами picture и img и объясним, почему тег picture более совершенен, чем img.
Читать дальше →
Источник: Уроки CSS на Хабрахабре
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Перевод] Отзывчивые изображения на практике (Часть 3)
Последняя часть истории об отзывчивых изображениях, которую мы начали здесь и продолжили тут, рассказывая о применении srcset и sizes. Сегодня речь пойдет об использовании тега для обертывания... читать далее
Частное мнение о Яндекс.Турбо
Данная статья является своего рода взглядом со стороны не искушенного пользователя на Турбо-страницы от Яндекс, до которого наконец-то дошли некоторые особенности работы этой технологии, а так же не... читать далее
[Перевод] Повторная децентрализация веба. На этот раз навсегда
В последние годы веб стал сильно централизованным. Чтобы восстановить свободу и контроль над цифровыми аспектами нашей жизни, нужно понять, как мы дошли до такого состояния и как вернуться на... читать далее
Пишем безопасное браузерное расширение
В отличие от распространенной "клиент-серверной" архитектуры, для децентрализованных приложений характерно: Отсутствие необходимости хранить базу данных с логинами и паролями пользователя. Информация... читать далее
[Перевод] Grid или Flexbox?
Мишель Баркер, автор материала, перевод которого мы сегодня публикуем, говорит, что недавнее обсуждение в Twitter, начатое Крисом Койером, заставило её задуматься о том, как веб-разработчики делают... читать далее
[Перевод] Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?
С момента релиза CodyHouse Framework, пару месяцев назад, многие пользователи спрашивали нас, почему мы выбрали переменные CSS вместо переменных SASS, хотя мы используем SASS в этой среде. В этой... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте