Мы начинаем Вам рассказывать о типах адаптивных изображений и способах где их правильно применять.

Сегодня мы поговорим о так называемой «ретине», то есть резиновых изображениях и как правильно их использовать.

Сначала приведем исходный код, а потом объясним принцип его работы:

адаптивный дизайн

Поясню принцип его работы:  у нас имеется исходное изображение скажем 400 пикселей (название изображений могут быть любые), когда у нас меняется устройство с разрешения 400 пикселей на 600 пикселей,то подгружается картинка с разрешением 600 пикселей, то плотность пикселей возрастает в 1,5 раза, когда разрешение экрана становиться 800 пикселей, то подгружается картинка с плотностью пикселей 800, и так далее, то есть мы сообщаем браузеру, какие картинки нужно загружать в каждой определенной ситуации, этот подход в корне отличается от  ситуации когда у нас «резиниться» одно и тоже изображение, что иногда приводит к весьма неожиданным результатам.

Надеемся статья принесет практическую пользу, в следующий раз мы обсудим «адаптивные» изображения.

Посмотрите так же нашу статью о трендах в мире веб-дизайна на 2017 год

Автор: Денис Краснокутский

Дата добавления: Апр 9th, 2017