Изображение для Web

Оптимизация изображений и графика для веб самым простым способом.

А не сделать ли страницу легче?

Сайт с портфолио из изображений. Любой может сделать свой собственный. Когда становиться необходимо выложить шикарные фотоки, создать галерею и выложить туда самые удачные произведения. Которые потом можно посмотреть в виде превьюшек и в шикарнейшем режиме презентации. Но фотографии долго загружаются и тормозят. Если зайти и посмотреть на галерею с телефона то он вообще перестает подавать признаков жизни. Все это потому что есть такие CMS которые не могут представить, что туда будут заливать фотографии прямо с фотоаппарата, с максимальным разрешением. Делается сжатие, ресайз, все как полагается, а размер страницы измеряется в гигабайтах. Никто не хочет смотреть на такие произведения искусства. Такое бывает и это не шутка…  Решаем проблему с жирным размером галерей!

Каким размером сделать картинку для веб?

Самым быстрым и простым способом. Для вставки изображения на сайт надо подобрать размер. Обычно размер проставляется в пикселях. Самые распространение размеры экранов в основном по статистике StatCounter Global Stats, 1366х768 и 1920х1080. На первом месте мобильные устройства с разрешением 640х480 пикселей. Ссылка на сайт со статистикой liveinternet.ru

Лидирующее место у переносных устройств и чем легче будет изображение, тем лучше. Сейчас при создании галереи необходимо ориентироваться на мобильные устройства. Плюс легкие страницы выше в поиске. Человеку проще и быстрее получить нужную ему информацию. И вообще скорость это большой палец к верху!

Для просмотра галереи с компьютера разрешение и качество должно быть на высоте. Для таких заморочек нужны большие изображения и отдельно маленькие для просмотра на мобильном. Не будем вдаваться в тяжелый процесс программного ресайза, хотя почему бы и нет: вычисляем квадратный корень из параллелепипеда и получаем радиоактивного паука.  Дальше разберем как сделать картинки, для галереи которая будет по середине между компьютером и телефоном.

На сайтах для удобства читаемости колонки с текстом примерно 400 -800 пикселей. В качестве примера сделаем изображение 500 пикселей 72 точки на дюйм и сохраняем в джепеге. Для статьи этого достаточно, при котором изображение будет иметь самый минимальный вес и достаточно качественным для вставки в колонку текста. 72 точки на дюйм — это стандартное разрешение, при котором размер максимально минимален, а глаз различает все детали.

Как кадрировать изображение для веб?

Кадрирование перспективы

Поехали делать. Открываем файл в фотошопе. Кадрируем изображение любым способом. Например, инструментом кадрирование перспективы. Проставляем нужный размер в данном случае 600 пикселей. Обязательно ставим разрешение 72 пикселя на дюйм.

Сохранить для веб

Сохраняем для web: Заходим в Файл -> Экспортировать -> Сохранить для Web или нажимаем сочетание клавиш (Alt+Shift+Ctrl+S) Если сохраняем фотографию лучше выбрать формат джепег. С высоким качеством и шириной 600 пикселей, вес изображения будет меньше пятидесяти килобайт. Для картинок и изображений где качество не так важно как на фотографии можно выбрать формат png8 и поставить необходимое количество цветов. Изображение может выйти примерно в пятнадцать килобайт.

ресайз картинки для веб

Для примера jpeg картинка выше: фотография имеет вес всего 44 килобайта, её размер 600 х 357 пикселей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *