Пошаговая инструкция создания оптимального размера фотографии для сайта

И снова здравствуйте, дорогие мои читатели. С вами на связи, Тимур Мустаев. Сегодня хочу отойти от основной темы и рассказать вам, про оптимальный размер фото для сайтов. Многие совершают грубейшие ошибки, когда публикуют фотографии, взятые сразу из фотоаппарата. Сегодня вы узнаете, как правильно подготавливать фотографии, для публикации на сайтах.

С чего все начинается?

Изображения, получаемые цифровой камерой, преобразуются в формат JPEG прямо в самом фотоаппарате. Там для этого есть аппаратный кодек.

Исходный формат RAW имеет слишком большой объем данных, хотя он и хранит максимум информации об изображении, о снятом кадре. Можно сказать, что это копия матрицы камеры на момент съемки.

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

Большинство репортеров и даже художников довольствуются JPEG, настраивая камеру под свои цели. (Любой фотограф вам скажет – дайте мне светосилу, а зерно во вторую очередь. Поэтому огромный объектив с просветленной оптикой ценится больше, чем матрица с огромным разрешением.)

горы

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

Делать веб-страницы с такими фотками, при всем их качестве, – дело неблагодарное. Они медленно грузятся.

Скорость загрузки является одним из самых-самых важных параметров сайта, особенно коммерческого. Да и простые блоги быстро разочаруют своих поклонников, если появления какого-то интересного или интригующего фотосета придется ждать несколько десятков секунд или даже несколько минут. Так что тут важно, и что предпочесть, и как это сделать?
Давайте разберем по порядку.

Оптимальный размер изображения

Во-первых, не только текст, но и изображения индексируются поисковыми системами, которые предпочитают большие картинки маленьким. Значит, размер картинки целесообразно брать побольше. Но до каких пор?

Очевидно, что до размеров экрана устройства в пикселях. Это максимум, а еще на странице может быть использован двух- или даже трехколоночный макет. Много чего еще зависит от атрибутов тега img. Загруженное изображение может масштабироваться самим браузером, если это предписано в разметке страницы.

личинки

Во-вторых, разрешающая способность экрана на большинстве устройств 72 пикселя на дюйм или 96. Совершенно незачем пытаться отображать на таких экранах изображения с 300 пикселей на дюйм. Лишние пиксели будут просто усреднены и будет взята их проекция на один.

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

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

Процесс обработки

Есть много программ для работы с изображениями, в том числе и бесплатных. Но лучше, если мы сейчас возьмем какой-либо стандартный, общепризнанный редактор изображений. Например, Adobe Photoshop.

Фотошоп той или иной версии есть практически у всех, кто занимается сайтами, их созданием, поддержкой и продвижением и так далее.

Посмотрим на конкретном примере, как делается оптимизация фотографии, полученной с цифровой камеры, в редакторе Photoshop. В моей случае, я буду пользоваться Adobe Photoshop CS6 русской версией. Для тех шагов, которые мы с вами выполним, подойдет Photoshop любой версии. И так начнем.


style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-2001113425232777"
data-ad-slot="4495127640">

1. Открываем фотографию в редакторе

ФайлОткрыть. В появившемся окне выбираем нужную фотографию.

открываем фотографию в photoshop

открытая фотография в photoshop

На рисунке мы берем фото, имеющее размер около 4,5 Мб. Этот файл у нас в формате JPEG, полученную с зеркальной фотокамеры.

2. Уменьшаем размер фотографии

ИзображениеРазмер изображения

уменьшаем размер изображения в photoshop

Здесь выбираем:

  • Разрешение, ставим 72 пикселя на дюйм, нам больше и не надо.
  • Размер. Ширину ставим 800 пикселей, он автоматически назначит высоту, в данном случае, он поставил 533 пикселей, согласно пропорций фотографии.

Важно! Ставим все галочки, картинки. Это:

  • Масштабировать стили;
  • Сохранить пропорции;
  • Интерполяция: Бикубическая автоматическая

 

настройки размера изображения

3. Правильное сохранение

Здесь, мы будем сохранять, специально для веб публикаций. Для этого заходим, ФайлСохранить для Web.

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

4. Выставляем качество

Но у нас остался еще вопрос качества. Какой размер фото считать разумным для загрузки? Ну, например, в пределах 200 Кбайт. Такие изображения являются вполне приемлемым компромиссом между качеством и размером.

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

Выбираем «Высокое» качество 60%. У нас получилось в этом примере 193.5 Кбайт при качестве 60%. Ну и ладно. На вид обработанное изображение почти неотличимо от оригинала. Вот в таком самом виде его и сохраняем. Готово!

5. Проверим в браузере

И наконец, проверим, как будет выглядеть картинка в интернете. Для этого совсем не обязательно грузить ее на хостинг или даже прописывать в html-коде локальной странички. Достаточно просто открыть ее вашим браузером, как это показано на последнем рисунке.

просмотр изображения в браузере

На этом и все. Теперь вы можете выкладывать фотографию куда угодно, веб-сайт, социальные сети и так далее.

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

Всех вам благ, Тимур Мустаев.

Оцените статью:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(15 голосов, в среднем: 4.2 из 5)

Этой статьёй стоит поделиться:

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных
данных и принимаю политику конфиденциальности

Вам так же может быть интересно:

виртуальные облачные диски

Приветствую вас, уважаемый читатель. С вами на связи, Тимур Мустаев. Недавно столкнулся с такой проблемой, как нехватка свободного места на своем жестком диске. Вроде бы и нормальный объем 1 Тбайт. И еще одно неудобство, я часто пользуюсь ноутбуком и планшетом, а за стационарным компьютером сижу только по вечерам дома. И вся важная...

вариофокальный объектив что это

Рад вновь вас приветствовать, уважаемый читатель. С вами на связи, Тимур Мустаев. На страницах моего блога уже имеются статьи о различных видах объективов. В основном, они предназначены для работы с фотокамерами. Сегодня же я расскажу вам о механизме, который устанавливается только на видеокамеры, но не на все. Речь пойдёт о вариофокальных линзах,...

sjcam sj6 legend обзор

Приветствую вас, уважаемые читатели! На связи, Тимур Мустаев. С развитием социальных сетей, образовалось популярное движение видео блогеров. А, как известно, для того, чтобы снимать интереснейшие видео из разных точек земного шара, необходимо портативная камера, с минимальными габаритами и высококачественной начинкой. Хорошо, когда финансы позволяют приобрести несколько камер для сравнения и выбрать своего...

sjcam sj5000 обзор экшн камеры

Приветствую вас, уважаемые читатели! На связи с вами, Тимур Мустаев. Последнее время экшн-камеры стали очень популярны, как среди любителей экстремальных видов спорта, так и обычных людей. Топовая модель на рынке товаров является GoPro, которая снимает наравне с профессиональными фотоаппаратами, но имеет один огромный недостаток – слишком высокую стоимость. Тем не менее, существует...

Коментариев к статье: 0

    Оставить комментарий:

    Внимание: все отзывы проходят премодерацию.

    Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности
    Вверх