Оптимальный размер фото для сайта


  • Конверсия
  • Наполнение интернет магазина

Слева изображение до оптимизации, а справа после.

logo

У меня тоже не получилось найти 10 отличий, так как их попросту нет. Собственно, к чему это я вообще?

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

Для начала поймём зачем вообще надо это делать?

Ведь все мы с вами боремся за качество фотографий в карточках товаров и на сайте в целом, но мало кто задумывается о том, что это может привести и к негативным последствиям. Часто вижу как владельцы магазинов загружают фото по 5 МБ сразу после фотосессии к себе в магазин, а потом удивляются почему их сайт так долго загружается.

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


pagespeed_otsenka

Многие считают это простой рекомендацией от Google, однако тесты показывают, что скорость работы сайта прямо влияет не только на ранжирование в поисковых системах, но и на продажи в целом, ведь медленная работа сайта может легко раздражать и самого пользователя.

Поэтому в сегодняшней статье я хочу вам рассказать про простую методику оптимизации изображений как до, так и после загрузки их на сайт. Этой ошибкой «грешат» почти все сайты, которые попадают мне в работу.

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

Приступим.

А надо ли оптимизировать изображения?

Чтобы понять актуальна ли вообще эта задача для вас, проведите эксперимент.

Шаг №1
Заходим на Google PageSpeed: ссылка.

Шаг №2
Берем три ссылки с вашего сайта:

  1. Главная страница
  2. Страница каталога
  3. Страница товара

Поочередно проверяем ссылки в тест и смотрим какие результаты будут выдаваться.

Если вы увидите в отчетах «Оптимизируйте изображения»:

pagespeed_resultat

То проверьте какие изображения Google рекомендует оптимизировать. Путь к этому изображению будет показан в отчёте.

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

Что такое оптимизация изображений?

Сравните две фотографии наших пижам.

Фото №1.
2640х3960 пикселей, размер 4.5 мегабайта, сразу после фотосессии. Можете скачать и проверить размер.

 

0u9a2699

 

Фото №2.
682х1024 пикселя, 73 килобайта. Скачайте и проверьте 🙂

0u9a2699_optimized

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

Давайте я вам даже рядом эти фото поставлю:

kak_optimizirovat_izobrazhenie_dlya_sayta

Разница в размере фотографии в 60 раз! А для покупателя внешней разницы никакой.

Так что сплошные плюсы:


  1. Меньше размер — быстрее загружается;
  2. Меньше размер — качество то же;
  3. Меньше размер — довольны поисковые системы.

Теперь давайте поймем как это делать.

Какую я использую программу для оптимизации изображений?

В этих делах мне помогает бесплатная программа XnConvert. Скачать её можно тут. Работает под Windows/Linux/Mac.

В качестве примера возьму папку с изображениями с одной из наших  фотосессий. 50 фотографий общим размером в 164 мегабайта:

optimiziruem_izobrazheniya

Шаг №1
Скачиваем и устанавливаем программу. На первой вкладке добавляем файлы или папку в качестве входных данных.

optimiziruem_izobrazheniya_1

Шаг №2
Настраиваем 3 правила в этой программе для оптимизации изображений.

На второй вкладке нажимаем «Добавить действие» -> «Изображение» -> «Удаление метаданных»

Получаем такую картинку:


optimiziruem_izobrazheniya_2

Снова «Добавить действие» -> «Изображение» -> «Изменение глубины цвета»

Настраиваем как на скриншоте:

optimiziruem_izobrazheniya_3

Снова «Добавить действие» -> «Изображение» -> «Изменение размера»

Размер в пикселях вы можете подобрать под себя. Если ваше фото меньше, чем 1024 пикселя по наибольшей стороне, то оно, наоборот, будет растянуто:

optimiziruem_izobrazheniya_4

Шаг №3
Указываем папку куда нужно будет выгрузить оптимизированные изображения и нажимаем «Преобразовать»

optimiziruem_izobrazheniya_5

Шаг №4
Сравниваем результат

Напомню, что до этого размер всех фотографий был 164 мегабайта, а стал…


optimiziruem_izobrazheniya_6

 

4.69 мегабайта!

Разница в 32 раза, при том, что визуально качество фотографий не изменилось.

Просто ведь, да?

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

Обычно ситуации две:

  1. Изображения еще не загружены на сайт, надо их оптимизировать перед загрузкой. В таком случае просто следуйте по пошаговой инструкции выше и потом загружайте;
  2. Изображения уже загружены и надо их их оптимизировать с минимальными усилиями. В таком случае с помощью FTP клиента выгружаете со своего сайта изображения на компьютер, оптимизируете их (не меняйте название фото!) и загружаете обратно. К сожалению, XnConvert не умеет сохранять структуру папок, поэтому придется оптимизировать каждую папку в отдельности. Но это все равно быстрее, чем делать поштучно.

По всем вопросам пишите в комментарии, я подскажу.

Какие еще варианты существуют?

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


Если вам надо быстро оптимизировать несколько изображений без потери качества, то можно воспользоваться одним из онлайн сервисов.

Например, https://tinypng.com/

Шаг №1
Загружаем фото, перетаскивая в рабочую область.

optimiziruem_izobrazheniya_7

Шаг №2
Скачиваем оптимизированное фото.

optimiziruem_izobrazheniya_8

В результате то же фото имело размер 4.5 мегабайта, а стало 400 килобайт без потери качества. Размер в пикселях остался прежним.

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

Какие выводы?

Казалось бы, среди всех моих тем статья про оптимизацию изображений выглядит как-то обособленно, но нет.

Достаточно сказать, что это напрямую влияет на продажи.

Причина №1
Скорость работы сайта существенно возрастает, так как не приходится подгружать лишние данные. Вспомните сами, комфортно ли вам совершать покупки на медленно работающем сайте?


Причина №2
А пользователи с мобильных устройств с мобильным интернетом будут благодарны вам вдвойне.

Причина №3
Сами файлы сайта будут меньше занимать места на хостинге. А тут копейка рубль бережёт.

Причина №4
Поисковые системы не будут высоко ранжировать медленно работающие сайты. А их алгоритмы легко вычислят такие сайты.

Так что оптимизируйте изображения на своем сайте, прогоните его через тест PageSpeed и вы увидите как у вас выросла оценка сайта. Критических ошибок нет:

pagespeed_otsenka1

 

И возьмите себе за правило оптимизировать изображения перед их загрузкой на сайт.

Буду рад ответить на любые ваши вопросы 🙂

idivpered.ru

Добавить изображение на сайт с помощью редактора Wix не составляет никакого труда, но это еще не значит, что дело сделано. В этой статье мы расскажем вам, почему не стоит недооценивать важность оптимизации изображений для сайта. Оптимизация изображений – это не только хороший способ удостовериться, что ваши фотографии будут отлично смотреться на сайте, но и еще один инструмент для привлечения органического (и бесплатного) трафика из поисковых систем. Вот пять простых советов, которые помогут вам максимально оптимизировать изображения для вашего сайта:


1. Используйте правильный формат: в конце названия каждого файла пишется его формат. Вероятно, вы уже знаете, что наиболее распространенными форматами изображений в сети являются .png, .jpeg и .gif. Но знаете ли вы, что все эти форматы могут отображаться по-разному при загрузке на сайт? Выбирая формат файла, дизайнеры смотрят на яркость цветов, размер, информационную плотность и многое другое. Но совсем не обязательно быть дизайнером, чтобы уметь оптимизировать изображения. Вы можете значительно улучшить ваши снимки, прочитав эту статью о трех основных форматах изображения.

3 основных формата графических файлов

 

2. Выберите качество изображения: практически все современные редакторы позволяют сохранять изображения разного качества (плюс вы всегда можете использовать бесплатные инструменты типа Pixlr, если вам нужны дополнительные настройки). Вы удивитесь, но сохранять изображение в наилучшем качестве — не всегда хорошая идея. Фоновые изображения и картинки, которым не обязательно иметь большое разрешение, можно сохранять в качестве чуть выше среднего, чтобы уменьшить размер файла и увеличить скорость загрузки сайта.


Разница в разрешении графических файлов

 

3. Используйте понятные названия файлов: откройте папку с фотографиями на вашем компьютере и посмотрите: сколько из них имеют непонятные имена вроде image1.jpg, 012794.gif или пикник-июнь-2012.png? Сразу сообщаем, что для загружаемых на сайт файлов такие имена не подойдут. Самыми правильными названиями для изображений являются те категории, по которым их могут искать в поисковиках. Правильно назвать файл важно потому, что поисковые машины считывают их названия для выдачи в поисковых результатах. Лучше всего, чтобы названия точно описывали изображения, используя при этом минимум символов.

Используйте понятные названия файлов

 

4. Используйте названия и описания: при загрузке изображения на сайт следует добавить к нему название и несколько слов в описание (Альт-текст). Этот текст служит информацией о вашем изображении для поисковых роботов и помогает им лучше понять, чему посвящен ваш сайт, а значит и улучшает ваши позиции в поисковой выдаче. Вот почему так важно правильно описывать изображения. В идеале описание изображения должно содержать ключевые слова вашего сайта и при этом действительно являться текстовым описанием изображения. В нашем Центре поддержки объясняют, как добавить текст к изображениям в редакторе Wix.


Добавьте название и Альт-текст, чтобы описать изображение для поисковиков

 

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

ru.wix.com

Размеры и пропорции картинок

Размер

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

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

У картинки два размера:

  1. Пространство, которое она занимает на экране. Этот размер измеряется в пикселях (px) — точках, из которых состоит экран.
  2. В Эквид-магазин можно заливать картинки любого размера, они всегда оптимизируются под ширину окна браузера и загружаются одинаково быстро.

    Если ваш магазин не на Эквиде и вы не знаете, оптимизирует ли он размер картинок, не пожалейте времени и уменьшите изображения товаров примерно до 1000*1000 px. Такой размер достаточно велик, чтобы рассмотреть товар, и достаточно мал, чтобы быстро загружаться.

  3. Место, которое картинка занимает в памяти устройства. Память измеряется в килобайтах (kB).

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

Подходящий размер для фотографий товаров — 1000*1000 px на 200 kB

Однако сильное сжатие ухудшает «качество» картинки: появляется характерный шум или резкие переходы цветов. Чтобы такого не произошло, достаточно сохранить картинки в правильном формате. Для файла габаритов порядка 1000 px хорошим результатом будет вес в 200 kB. Как для этого выбрать формат, мы расскажем ниже.

Кадрирование

  • Картинка стала меньше, но пропали мелкие элементы, которые я хотел показать!

Вы правы! Детали важны. Откадрируйте важные детали товаров, вырезав их из основного изображения. Залейте дополнительные картинки в галерею.

Миниатюры товаров

Мы разобрались с главным изображением товара, но для витрины нужны миниатюры. Об этом Эквид заботится сам. Миниатюры товаров создаются автоматически. Размер по умолчанию 230 px. Вы можете изменить его в настройках контрольной панели.

Если у вас не Эквид, сделайте миниатюры размером до 40-50 kB.

Пропорции

Исследования показали, что не любое соотношение сторон приятно глазу. С годами был определен «стандартный» набор пропорций, пользуюсь которыми вы всегда получите приятный результат: 1:1, 4:3, 3:2, 16:9.

идеальные пропорции иллюстраций

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

Резкость

Если вы уже пробовали уменьшать изображения, то скорее всего заметили, что после уменьшения снимки «тускнеют». Они теряют свою резкость. Как сделать, чтобы фотографии «звенели»?

Простой способ

В большинстве современных редакторов при сохранении для Web можно задать новые размеры снимка и алгоритм уменьшения, который напрямую влияет на резкость. В Фотошопе установив правильные параметры (Image Size не больше 1000 px и Quality = Bicubic Sharper), мы получим результат, не нуждающийся в последующей корректировке.

простой способ увеличить резкость изображения

Если изначальное изображение было очень большим, например более 5000*5000 px, не уменьшайте его сразу до нужного. Сделайте это в 2-3 этапа, поправляя после каждого резкость.

Способ для опытных

  1. Уменьшите картинку до нужного размера: Image → Image Size + выберите Bicubic Sharper.
  2. Уменьшите картинку до нужного размера

  3. Копируйте изображение на второй слой (Layer → Duplicate Layer).
  4. Копируйте изображение на второй слой

  5. Повысьте резкость второго слоя (Filter → Sharpen → Sharpen).
  6. Повысьте резкость второго слоя

  7. Откорректируйте прозрачность слоя, чтобы отрегулировать резкость (в окне Layer → Opacity), и готово.
  8. Откорректируйте прозрачность слоя

Маленькие хитрости:

  • Второй слой наложите в режиме luminosity, это позволит избежать возникновения цветных ореолов.
  • Второй слой наложите в режиме luminosity

  • Нежелательную резкость уберите протерев второй слой стёркой (или маской).

Нежелательную резкость уберите протерев второй слой стеркой

Итак, вот что у нас получилось в сравнении с оригинальным изображением:

повышение резкости изображения: до и после

На тему резкости написано много статей, вы найдете их в поисковиках по запросу «как увеличить резкость фотографии».

Выбор формата

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

Самые популярные форматы:

  • GIF (англ. Graphics Interchange Format — «формат для обмена изображениями») способен хранить сжатые данные без потери качества в формате не более 256 цветов. Формат поддерживает анимационные изображения. Долгое время GIF был самым распространённым форматом в интернете, пока не был создан формат PNG.
  • PNG (англ. portable network graphics) использует сжатие без потерь и хранит неограниченное количество цветов.
  • JPEG (англ. Joint Photographic Experts Group, по названию разработчика) — самый распространенный формат для хранения фотографий и других изображений. Алгоритм JPEG позволяет сжимать изображение как с потерями, так и без потерь. Чем меньше потери, тем больше размер файла.

Так что же выбрать?

Действуйте по следующему алгоритму:

  1. Если у вас фотография, выбирайте JPEG со значением качества порядка 50-80 единиц.
  2. Если иллюстрация с большими ровными заливками, JPEG не подойдет. На ровных поверхностях будут видны артефакты (искажения изображений). Выбирайте PNG.
  3. Анимированная картинка? Ваш выбор GIF.

И не используйте в интернете TIFF. Этот прекрасный формат создан для печати, но не подходит для web.

А можно еще меньше? — Да!

Сжатие файлов без потери качества делают специальные сервисы: TinyJPG, JPEGmini, TinyPNG.

Если нет Фотошопа

У Фотошопа есть бесплатный онлайн редактор, в нем доступны базовые манипуляции с изображениями (например, обрезать картинку или изменить размер). Или можно купить минимальную версию за 644 рубля в месяц.

Для наших целей ничем не хуже бесплатные графические редакторы:

GIMP

Программа подходит для Windows, Mac и Linux. Есть всё необходимое для профессиональной обработки рисунков и фотографий: работа со слоями и масками, инструменты для цветокоррекции, ретуши и рисования. Gimp поддерживает все основные форматы графических файлов.

редактор изображений GIMP

Paint.NET

Графический редактор для Windows. Простой, интуитивный и удобный интерфейс. Набор инструментов уступает Фотошопу, но для редактирования фотографий для интернет-магазина достаточно. Сохраняется вся история изменений, любое действие можно отменить. Редактор поддерживает работу со слоями, имеет большой набор инструментов и фильтров с гибкими настройками.

редактор изображений Paint.net

PicMonkey

Онлайн-редактор с простым интерфейсом. Есть все базовые функции: кадрирование, поворот картинки, управление резкостью, работа с цветом, выбор разрешения фотографии. Огромный набор фильтров от профессиональных (например, эффекта зернистости фотопленки) до шуточных (например, эффект облаков или зимы). Чтобы перейти на новую операцию, нужно сохранить или отменить предыдущую.

Большинство инструментов доступны бесплатно, но за некоторые продвинутые функции придется заплатить.

редактор изображений PicMonkey

www.ecwid.ru

СЕО оптимизация изображений

Практически на каждом сайте есть картинки, фотографии, какие-то графические изображения или даже галереи изображений. Как и тексты, изображения требуют оптимизации и организации в дополнение к прочим элементам страницы. В результате, размещение и поисковая оптимизация изображений может дать плюс не только к релевантности страниц сайта и повышению позиций в поисковой выдаче, но и плюс к трафику за счет появления изображений в выдаче сервисов картинок Google и Яндекс. И вот как оптимизировать картинки и изображения на сайте.

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

Чем больше картинка — тем лучше. Если поисковая система найдет несколько дублей одного изображения, она выберет картинку большего размера. Это не значит, что надо вставлять на страницу огромные изображения. Большая картинка в полном разрешении может открываться отдельной страницей по ссылке. На самой же странице достаточно разместить превью изображения. Миниатюра изображения не должна быть слишком миниатюрной (а масло слишком масленым). Изображения меньше 100-150 пикселей поисковики могут расценить как элемент дизайна и не пустить в выдачу.

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

<a href="адрес оригинального изображения"><img src="адрес миниатюры изображения" /></a>

Одновременно с этим не стоит превращать крупное изображение в миниатюру, сжимая размер картинки при помощи стилей. Кроме того, что изображение может исказиться, картинка будет полностью прогружаться, замедляя общую скорость загрузки страницы. А если таких пережатых миниатюр на странице будет много? Вопрос риторический. Более того, поисковые системы распознают соотношение стилей с параметрами размера самого изображения и при больших расхождениях могут расценить такое техническое решение как некорректное, а после анализа сайта на скорость загрузки страниц — и вовсе решить, что данное изображение вредит странице.

Расположение изображения

На странице сайта может быть написана великолепная статья, но если в статье есть хорошие иллюстрации, поисковые системы оценят статью выше и ценность страницы с точки зрения поисковой оптимизации от картинки в тексте только возрастет. Изображение может характеризовать страницу или отдельную смысловую часть страницы. От того, где будет размещена картинка — зависит то, как будет оценено ее значение для страницы. А значит, размещаем изображение ближе к тексту или окружаем изображение текстом так, чтобы суть картинки дополняла суть текста.

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

Подпись под картинкой

Одним из способов окружить изображение текстом являются подписи под картинкой. Если на странице много изображений и мало текста, подпись под картинкой будет более чем полезна. Подпись под изображением требует SEO оптимизации, так как, во многом, именно по ключевым словам, использованным в подписи, будет определяться тематическое соответствие картинки содержимому страницы. Кроме подписи под изображением, есть и другие возможности описать содержимое картинки с помощью текста. В этом нам помогут атрибуты изображения alt и title.

Атрибут изображения alt тега img

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

<img src="адрес изображения" alt="Описание изображения" />

Оптимизация описания изображения в атрибуте alt может крайне положительно повлиять на оптимизацию всей страницы сайта. Поэтому настоятельно рекомендуется всегда заполнять данный атрибут. Описание в атрибуте alt должно точно и коротко описывать то, что изображено на картинке. Длинные описания поисковые системы не воспринимают полностью, поэтому желательно ограничиться 50-60 символами.

Атрибут изображения title тега img

Атрибут title отображается как всплывающая подсказка и дает еще одну возможность для СЕО оптимизации изображений. Если в случае с атрибутом alt описывается содержимое картинки, то в случае с атрибутом title, можно сообщить дополнительную информацию о изображении. Атрибут title хорошо знаком по тегу <a>, где ему и надлежит быть в случае, если изображение является ссылкой. Для изображений, наличие атрибута title необязательно. Содержимое тега должно отличаться от содержимого атрибута alt.

ЧПУ названия файла изображения

Еще один существенный способ обозначить содержимое картинки и еще больше оптимизировать изображение для поиска — сделать так, чтобы название файла с изображением соответствовало содержимому картинки. Например, если на картинке изображен белый кот, то так и надо написать — belyj-kot.jpg. Так сразу становится понятно, что (скорее всего) внутри файла. ЧПУ (человекопонятный урл) формат гораздо лучше информирует как человека, так и поискового робота, чем pic_7642.jpg. Понятные названия очень позитивно влияют на SEO оптимизацию изображений.

Формат изображения

Чем меньше будет размер картинки в килобайтах, тем быстрее она будет загружаться на странице. Самыми популярными форматами изображений для web являются — .jpg, .png, .gif. Эти форматы изображений в разной степени оптимизированы и позволяют получить хорошее соотношение размера картинки и веса файла для каждого типа изображений (иконки, рисунки, фотографии). Правильно выбирайте формат изображения.

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

Итог: СЕО оптимизированная картинка

В результате мы получаем примерно следующую конструкцию SEO оптимизированного изображения:

<img src="/belyj-kot.jpg" alt="Белый кот Васька" title="Васька - большой красивый белый кот с ужасным характером" />Мой белый кот Васька

или

<a href="/belyj-kot.jpg" title="Васька - большой красивый белый кот с ужасным характером"><img src="/mini-belyj-kot.jpg" alt="Белый кот Васька" /></a>Мой белый кот Васька

В оптимизации картинок для поиска нет ничего сложного. Главное — не лениться и прописывать уникальный alt, title и ЧПУ название файла картинки. Такми образом, можно внести на страницу очень много дополнительного текстового контента, который поможет сделать страницы сайта более релевантными. Ну и конечно же не забываем про трафик, который дают СЕО оптимизированные изображения, если они попадают в Яндекс.Картинки и Google Картинки.

Оптимизируйте  картинки. Используйте контент эффективно.

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

 

convertmonster.ru

dspenza.ru

Размер фотографий для просмотра в интернете

В каком размере лучше сохранять фотографии под web? Эта тема неоднократно затрагивалась в обсуждениях и я обещал описать свой подход. Но для начала мне было интересно оценить, насколько отличаются экраны людей, увлекающихся фотографией, от экранов среднестатистических интернет-пользователей, поэтому я запустил опрос об используемых разрешениях экрана (большое спасибо всем, кто проголосовал). Итак, попробую объяснить цифры.

Зачем вообще нужно обращаться к статистике? Дело в том, что если мы хотим, чтобы наши картинки было комфортно смотреть, необходимо учесть удобство большинства бользователей, а лучше всех. Реально учесть интересы всех вряд ли возможно, т.к. они часто противоречат друг другу. Например, если сделать картинку под большое разрешение вроде 3200х2400 px, её будет очень сложно просматривать на маленьком мониторе. И наоборот, если оптимизировать картинку под разрешение, скажем, 320х240, то на экранах значительной части зрителей она будет выглядить как маленькое пятнышко, где нельзя рассмотреть не только деталей, но и толком сюжета. Встаёт логичный вопрос — где золотая середина?

На мой взгляд, с одной стороны необходимо ориентироваться на большинство пользователей, с другой, учитывать интересы малочисленных групп. К значимым группам я бы отнёс аудиторию, составляющую 5%-10% и выше. Всё-таки менее 5%, это обычно пользователи со спецзадачами, а вот от 10%, это уверенно высокая часть аудитории, пренебрегать которой недопустимо. Есть и другие критерии. Например, иногда специально ограничивают потенциальную аудиторию тематической выборкой, заведомо отсекая «непрофильных потребителей», в угоду комфорта основных. Такой подход также бывает оправдан, но лично я предпочитаю по возможности учитывать интересы максимально возможного количества зрителей.

С максимальным ограничением размера фотографий ситуация более-менее ясна. Редко кто готов бесплатно раздавать графические файлы, поэтому просмотр в интернете обычно подразумевает режим preview (предосмотр). Для вполне качественной печати формата 10х15 достаточно разрешения 200 dpi, чему соответствует файл порядка 1200х800 пикселей. Охраняя свои творения от посягательств, фотографы стараются не допускать размещение в интернете файлов выше размера печати 10х15.

Для того, чтобы определиться с минимальными размерами, обратимся к статистике. В первую очередь к глобальной статистике интернета — например, w3counter.com, spylog.ru, hotlog.ru. Мы видим, что лидер сегодняшних хит-парадов, это разрешение 1024х768. Доля таких пользователей колеблется в среднем от 22% до 47%. Второе место принадлежит разрешению 1280×1024, которым пользуется от 15% до 20% человек. В моём опросе места 1 и 2 поменялись местами — 11% и 49% соответственно. Я думаю, это связано с тем, что мой блог читают в основном люди, в той или иной степени увлечённые фотографией, т.е. обладающие мониторами размеров выше среднего. Вместе с тем даже среди такой аудитории процент использования разрешения 1024х768 уверенно превысил 10%.

В настоящее время, с учётом имеющейся статистики, мне представляется оптимальным ориентация на экраны с разрешением 1024×768 пикселей. В этом случае мы учтём интересы большинства людей и менее численных групп, при этом не сделаем просмотр на незначительно меньших или больших экранах намного сложнее.

Когда мы говорим о разрешении экрана, то должны помнить следующее. Как правило, часть экрана требуется на интерфейсы операционной системы (например, кнопка «Пуск» и полоса навигации в Windows) и интерфейс браузера. Конечно, существуют режимы просмотра full screen (полный экран), но если вспоминать про удобство пользователей, то необходимо уместить картинку целиком в его стандартном поле для просмотра web-страниц. Давайте посмотрим, какового это поле при разрешении 1024х768? А оно примерно таково:

Размер фотографий для просмотра в интернете
посмотреть крупнее (откроется в новом окне)

Размер 1000х620 пикселей определён примерно, т.к. в реальности он варьируется в зависимости от ОС, используемых режимов и интерфейсов браузера. Также некоторые учитывают ICQ-клиент, но я считаю, что для просмотра картинок в интернете человек вполне способен убрать его на это время.

С учётом минимально необходимых отступов, получается, что для показа картинки с соотношением сторон 3:2 у нас остаётся 600 пикселей по высоте. Что соответствует 900 по ширине.

900х600 — этот формат я определяю для себя в качестве максимального для публикации в интернете. Вот так он выглядит в реальном размере:

Размер фотографий для просмотра в интернете

Фотография в таком размере будет показана целиком (без полосы прокрути) у подавляющего большинства пользователей. При этом такой размер вполне достаточен, чтобы рассмотреть детали и сюжет, даже если просматривать его на большом экране порядка 1600х1200 и более пикселей. Тем более, при слишком больших разрешениях люди часто предпочитают не открывать браузер на всю ширину. При описанном подходе у меня получаются следующие размеры картинок, которые я и стараюсь использовать по возможности:

3:2 (горизонтальный) — 900х600
3:2 (вертикальный) — 400х600
4:3 (горизонтальный) — 800х600
4:3 (вертикальный) — 450х600
1:1 (квадрат) — 500х500

При размещении картинок свыше 900х600 пикселей мы заведомо создаём неудобство просмотра для большого количества людей. В этом случае пострадает в среднем от 10% (увлеченной) до 50% (массовой) аудитории, у которых возникнут полосы прокрутки и которые не смогут без специальных действий просмотреть фотографию целиком на экране.

Несколько примечаний:

1. В случае нестандартных соотношений сторой я ориентируюсь на максимальный размер стороны согласно обозначенному ограничению 900х600. Например, картинку 3000х1500 пикселей я скорее всего уменьшу до 900х450.

2. Квадрат сам по себе создаёт ощущение большой площади, поэтому для гармоничного его просмотра с другими картинками, я беру максимальную сторону чуть меньше, чем для других случаев (500, а не 600).

3. В случае узкой длинной панорамы стараюсь сделать один размер для просмотра целиком на экране + ссылка на более большой вариант. Конкретные цифры зависят от самой панорамы, но для таких случаев при описанном подходе (наличие превью и ссылки) считаю допустимым делать картинку шириной 1200-1500 пикселей и даже больше. Но только, если такая картинка буде скрыта под отдельной ссылкой.

4. Для публикации фотографий в ЖЖ я стараюсь вынести вне ката более маленькую картинку (как правило, одну), чтобы не перегружать френд-ленты. Те, кого заинтересует превью, могут посмотреть нормальный размер под катом. Считаю размещение большой (порядка 900х600 пикселей) картинки вне ката чрезмерным, хотя не критичным. Т.е. я не обижаюсь на такие каринки в своей ленте :), хотя и считаю размеры свыше 900х600 перебором, который мешает удобству. Сам стараюсь для предосмотра (т.е. вне ката) не использовать картинки более 600х400.

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

Примерно так. Описанный принцип не претендует на объективность. Другие подходы также могут быть оправданы, в зависимости от целей и ориентирации на определённую (ограниченную) аудиторию. Просто я рассказываю о своём подходе и надеюсь, что эта информация может оказаться полезной. Как всегда, буду благодарен за отзывы и встречные мнения.

UPDATE. Обновленная статья (2015 год):
http://pavel-kosenko.livejournal.com/642666.html

pavel-kosenko.livejournal.com

Метод попроще

1. Откройте исходное изображение в Adobe Photoshop. Приведите в порядок яркость, контраст, цвета и т.д., то есть сделайте так, чтобы ресайз делался с именно с того изображения, которое потом можно было без проблем напечатать или продать заказчику. 2. Выбираем пункт меню «Изображение» → «Размер изображения». В открывшемся диалоге выбираем следующие параметры

  • Размер изображения 800 на 600 пикселей (при соотношении сторон 4:3) или 900 на 600 пикселей (при соотношении сторон 3:2)
  • Интерполяция: билинейная. Оптимальный размер фото для сайта На надписи «бикубическая, глаже» и «бикубическая, четче» не обращайте внимания, они дают худший результат.

3. После того как изображение уменьшено, выбираем пункт меню «Фильтры» → «Резкость» → «Контурная резкость». Оптимальный размер фото для сайта Устанавливаем Радиус 0,3—0,5 пикселя. Эффект — около 50%. Вот и все. Теперь картинку нужно сохранить. Рекомендую использовать не простое сохранение («Файл» → «Сохранить»), а «Файл» &rarr «Сохранить для Web и устройств». В этом случае стирается вся вспомогательная информация, занимающая лишнее место (файл получается меньше по размеру), а также появляется возможность тонкой настройки степени сжатия при наличии возможности визуального контроля качества картинки. Оптимальный размер фото для сайта В верхней линейке вкладок выбираем «2 варианта», тогда слева будет отображаться оригинал, а справа — результат. В панели «Установки» (справа) выбираем формат JPEG, степень сжатия выбираем по принципу «золотой середины». Как правило оптимальный размер файла при разрешении 800 на 600 — около 200 килобайт, однако, если на фотографии много мелких деталей (как в приведенном случае), размер может достигать 300-400 килобайт. Достоинство этого метода — простота. Недостаток — он несколько грубовато работает при большом количестве мелких деталей. Для ресайза таких фотографий придется использовать метод посложнее…

Метод посложнее

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

  • Делаем копию фона. Способов много, проще всего это сделать так: Ctrl+A (выделить все) → Ctrl+C (скопировать) → Ctrl+V (вставить). Теперь у нас два слоя — «Задний план» и «Слой 1».
  • Для заднего плана применяем фильтр «Контурная резкость» («Фильтры» → «Резкость» → «Контурная резкость») с параметрами: Эффект — 200-350%, радиус — 0,3 пикселя. На картинке изменений вы пока не увидите, так как изменения внесены в нижний слой.
  • Для «Слоя 1» делаем размытие по Гауссу («Фильтры» → «Размытие» → «Размытие по Гауссу») с радиусом 1.2 пикселя.
  • Устанавливаем прозрачность верхнего слоя 30-50%, в зависимости от сюжета.
  • Склеиваем слои (Shift+Ctrl+E) и сохраняем файл.

Важное замечание

Значения параметров, приведенные выше — не есть эталон, от которого нельзя отступать. Они актуальны только для ресайза до 800(900) на 600 пикселей. Для больших и меньших разрешений значения параметров будут различаться. Оптимальные параметры определяются только опытным путем.

Результаты

1. Оригинал (только ресайз до 800 на 600) ↓ Оптимальный размер фото для сайта 2. Метод попроще (ресайз и увеличение контурной резкости) ↓ Оптимальный размер фото для сайта 3. Метод посложнее (ресайз, дубликат слоя, резкость на нижнем, размытие и полупрозрачность на верхнем) ↓ Оптимальный размер фото для сайта Рекомендую скачать их в одну папку и посмотреть последовательно в какой-либо программе просмотра, например ACDSee, чтобы почувствовать разницу.

www.artem-kashkanov.ru


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

Максимальные размеры фотографии

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

Для отображения картинки пиксель в пиксель, ее разрешение должно быть меньше разрешения монитора компьютера. Сейчас большинство пользователей имеет мониторы с размерами экрана 17 или 19 дюймов, их разрешение составляет 1280×1024 точек. А стало быть 1280×1024 пикселей и есть тот максимальный размер фотографии, который может отображаться на мониторе компьютера у большинства пользователей, без потери качества.

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

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

Почему нужно уменьшать картинки для сайта

Если выкладывать на сайт фотоснимки, сохранив их исходные размеры, какими их делают современные цифровые фотокамеры, то это не только потребует колоссального времени на их перекачку с сайта на компьютер пользователя, но, что еще важней, заметно ухудшит их качество, и прежде всего, резкость. Ведь их уменьшение на экране монитора все равно произойдет, но будет уже не на столько качественным, как в том же Фотошопе или любом другом графическом редакторе.

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

И так, если все ваши снимки действительно шедевры, и это вам сказал кто-нибудь посторонний и знающий, то уменьшайте их до размеров 800×600 пикселей. Если они нравятся не только вам, а хотя бы жене и лучшему другу, то уменьшайте их до 600×450 пикселей. Если же ваши фотоснимки нравятся пока только вам, то будьте самокритичны и уменьшайте их до 400×300 пикселей.

Кроме уменьшения размеров фотографии, перед ее выкладыванием на сайт, нужно еще выбрать режим сжатия самого графического файла, проще всего это сделать через меню Фотошопа – "Save for Web…"

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

Зачем уменьшать фотографии для сайтов                 Зачем уменьшать фотографии для сайтов                    Зачем уменьшать фотографии для сайтов

www.i-foto-graf.com


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.