Одной из самых распространенных ошибок среди новичков являются растровые иконки.

Да, именно так. Недостаточно просто взять PNG-файл с флетикона и считать, что это приемлемо. После завершения дизайна сайт переходит к верстке, и твои растровые иконки на одном из устройств обязательно будут выглядеть пикселизованными.

Почему так происходит? Реальный размер изображения будет не 100 пикселей, как указано на макете, а 200 или даже 400, поскольку разрешение экрана на самом деле намного выше, чем то, что мы рисуем. Например, если речь идет об iPhone, реальное разрешение составит не 414, а 1242. Или на десктопе вместо 1920 будет 5120 пикселей.

Растровые изображения подвержены пикселизации при увеличении, в то время как векторные изображения сохраняют свое качество. Поэтому так важно знать форматы и понимать, как они работают.

Хорошо, а как насчет фотографий? Тут тоже не все так просто. Допустим, ты создал иллюстрацию в Photoshop размером 1920. На устройстве с Retina экраном она будет выглядеть размыленно. Но если ты создашь изображение с двойным разрешением — 3840, то размытия не будет.

— Но это же будет очень большим файлом и долго загружаться?

Да, если это PNG или JPG без сжатия, то, конечно, да. Однако есть специальный формат, который поддерживается всеми современными браузерами и уменьшает размер изображений на 25-30%. Если сильно сжать JPEG, ты получишь размытое изображение. А с этим форматом все будет выглядеть четче.