Изображения формата GIF, JPEG и PNG объединяет то, что все они являются битовыми изображениями (также называемыми растровыми). При увеличении растрового изображения вы можете увидеть, что оно похоже на мозаику, состоящую из большого количества пикселов (крошечных квадратов одного цвета). Это отличает их от векторной графики, которая состоит из плавных линий и заполненных областей и полностью основана на математических формулах. Рисунок ниже демонстрирует разницу между растровой и векторной графикой.
Растровая и векторная графика.
Если вы использовали растровые изображения для печати или для Всемирной паутины, вам может быть уже знаком термин разрешение — количество пиксел на дюйм. В мире печати разрешения изображения, равные 300 и 600 пикселов на дюйм (ppi), являются наиболее распространенными. Однако во Всемирной паутине понятие дюймов неуместно. И хотя я могу создавать изображение с разрешением 72 пиксела на дюйм, вряд ли при отображении оно будет размером точно один дюйм (рисунок ниже). Фактически с появлением экранов с высокой плотностью пикселов, таких, как дисплеи Retina, даже понятие «дюйма» стало гораздо более запутанным.
Значения «точки на дюйм» не подходят для цифровых устройств, где размер изображения зависит от разрешения монитора.
Точки на дюйм.
Поскольку графические изображения для Интернета существуют только на экране, правильно измерять их разрешение в пикселах на дюйм (ppi). Когда дело доходит до печати, устройства и печатные страницы измеряются точками на дюйм (dpi), которые описывают количество напечатанных точек на каждый дюйм изображения. Значение dpi изображения может как соответствовать, так и отличаться от значения ppi. В ходе своей работы вы можете встретить употребление терминов dpi и ppi как синонимов (хотя это не верно). Важно понимать разницу.
Если мы отбрасываем дюймы, то придется отбросить и пикселы на дюйм. Единственное, что мы знаем наверняка, что изображение на верхнем рисунке составляет 72 пиксела по диагонали, и он будет в два раза шире графического объекта, который состоит из 36 пиксел по диагонали. Веб-дизайнеры измеряют свои изображения по общему количеству пикселов, поэтому технически разрешение изображения не имеет смысла.
Однако при этом многие дизайнеры создают изображения с разрешением 72ppi, чтобы они были приблизительно нужного размера. Когда создаются изображения с таким разрешением и просматриваются в программе Photoshop в масштабе 100%, они сохраняют свои пропорции друг относительно друга и отображаются примерно такого же размера, как на экране настольного компьютера. Разрешение 72ppi также замечательно подходит в качестве первоначального при создании изображений для дисплеев с высокой плотностью пиксел (таких, как Retina) — просто увеличьте размеры в пикселах в два раза.
Выбор оптимального размера и разрешения изображений важно при разработке качественных программных продуктов, будь то приложение для мобильных телефонов, веб-разработка или компьютерная программа.
От этого зависит не только привлекательность и яркость конечного продукта, но и его функциональные возможности и скорость работы программного обеспечения.
