Нажимая на кнопку, я даю согласие на рассылку,
обработку персональных данных и принимаю
политику конфиденциальности
Топ комментаторов
  • Анастасия14
  • Вадим12
  • titris9
  • Светлана7
  • kain6
  • ddv56

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

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

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

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

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

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

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

горы

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

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

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

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

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

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

личинки

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

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

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

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

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

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

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

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
(45 голосов, в среднем: 4.7 из 5)

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

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

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

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

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

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

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

sjcam sj6 legend обзор

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

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

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

комментариев 5

  1. Александр
    Ответить

    Спасибо Тимур за полезную и увлекательную статью. Все классно и красиво, а главное доступно для понимания. Очень понравился и сам сайт, просто и оригинально. От всего сердца желаю Вам удачи и продвижения.

    • Тимур Мустаев
      Ответить

      Спасибо. Заходите еще)

  2. Александр
    Ответить

    Приятно зайти на прекрасно оформленный сайт. Спасибо.

  3. Сергей
    Ответить

    Спасибо большое. Очень вовремя для меня, попалась ваша статья.

  4. Василий
    Ответить

    Спасибо за статью. Уже давно занимаюсь наполнением сайта статьями, ну и конечно же куда без картинок!)))

    И вот сегодня я что то засомневался по поводу размера картинок. И узнал, что размер 800 пикселей на 500 с копейкой. Я ставил 600 на 400.

    [;-)]

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

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

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