Калькулятор размера изображения для экрана и сайта
Зачем нужен этот калькулятор и как им пользоваться?
Часто при наполнении сайта возникает путаница. Допустим, вам нужно загрузить красивый баннер, обложку для статьи или карточку товара. В панели управления сайтом (или в ТЗ от дизайнера) указаны странные требования, например: «Загрузите картинку с пропорцией 16:9» или «Размер должен быть 3 на 4 в пикселях». А у вас на руках только физический размер фотографии в сантиметрах.
Чтобы картинка не обрезалась криво, не выглядела размытой на экранах iPhone и не тормозила загрузку страницы, мы создали этот инструмент. Он берет всю сложную математику на себя.
Пошаговое руководство
- Выберите тип графики. От этого зависит, какой формат файла система порекомендует вам в итоге (например, для огромных баннеров лучше использовать современные форматы вроде WebP).
- Укажите исходные данные. Если вы знаете ширину места на сайте в пикселях — отлично. Если вы измерили макет в сантиметрах — просто выберите «В сантиметрах (см)». Компьютеру нужно перевести физический размер в цифровой через показатель DPI.
- Определите пропорцию. Это соотношение сторон. Например, квадрат — это 1:1. Популярный формат для карточек одежды (когда картинка вытянута вверх) — это 3:4. Если у вас нестандартная задача, выберите «Свой размер» и впишите высоту вручную.
- Укажите качество экранов. Это самый важный пункт для мобильных телефонов! У современных смартфонов экраны Retina. Это значит, что в один физический пиксель они упихивают 4 виртуальных. Если вы сделаете картинку 500x500 px, на телефоне она растянется и станет "мыльной". Выбирайте качество «2x», чтобы калькулятор удвоил размер для идеальной четкости.
- Нажмите «Рассчитать». Полученные цифры можно смело вбивать в Photoshop, Figma или любой другой графический редактор при создании холста.
Как работает перевод из сантиметров в пиксели?
Для экрана компьютера обычные метры и сантиметры ничего не значат. Экран состоит из светящихся точек. Общепринятый мировой стандарт для интернета — это 96 точек на один дюйм (DPI). Наш калькулятор использует классическую формулу перевода:
Примечание: 2.54 — это количество сантиметров в одном дюйме.
Вам не нужно считать это в уме. Просто введите значения в поля выше, и инструмент мгновенно подготовит данные, адаптированные под современные веб-стандарты.
Ловушка Retina: почему фото размывается на смартфоне
Вы скачали красивую картинку шириной 500 пикселей, загрузили на сайт в блок такого же размера, а с телефона она выглядит как мыльное пятно. Проблема в плотности пикселей.
Экраны старых мониторов показывали картинку точка в точку (качество 1x). Современные смартфоны используют технологию Retina (2x или 3x). Это значит, что в пространство одного физического пикселя телефон пытается втиснуть четыре. Если лишних пикселей в исходнике нет, система просто растягивает изображение, уничтожая резкость.
Правило вебмастера: всегда готовьте графику в двойном размере. Если блок на сайте занимает 400×400 px, загружаемый файл должен быть 800×800 px.
Реальный пример: готовим баннер для сайта
Представьте, что вы собираете главную страницу магазина. Вам нужен широкий приветственный баннер. Программист сказал: «Сделай ширину 1200 пикселей, а пропорция должна быть строго 16:9, чтобы ничего не обрезалось».
- Считаем высоту: делим ширину (1200) на коэффициент 1.777. Получаем 675 пикселей.
- Базовый размер: 1200 × 675 px. Этого хватит для обычных офисных мониторов.
- Адаптируем под смартфоны (Retina 2x): умножаем обе цифры на 2.
- Итог: в графическом редакторе вам нужно создать холст размером 2400 × 1350 px.
Именно этот финальный файл нужно отдавать в работу. Он идеально встанет в блок и будет «звенеть» от резкости на любых экранах.
Вес и форматы: как не замедлить сайт
Увеличение размера картинки в 2 раза увеличивает ее вес (в мегабайтах) почти в 4 раза. Если загрузить на страницу десяток таких фото без сжатия, сайт будет грузиться мучительно долго, и клиенты уйдут.
| Формат файла | Для чего использовать | Особенности веса |
|---|---|---|
| WebP / AVIF | Баннеры, фоны, карточки товаров | Весит на 30-50% меньше старых форматов. Современный стандарт. |
| JPEG | Сложные фотографии с градиентами | Хорошо сжимается, но не поддерживает прозрачность. |
| PNG | Иконки, логотипы, элементы без фона | Самый тяжелый формат. Использовать только при необходимости прозрачного фона. |
Золотое правило: вес одной картинки на сайте не должен превышать 150-200 килобайт. Даже если размер холста составляет огромные 3000 пикселей, пропустите файл через любой бесплатный сервис сжатия (например, TinyPNG). Визуально качество не изменится, но страница станет летать.
