ШаблоныТарифыПартнерамНовостиПомощьПосмотреть сайты

Ликбез по компьютерной графике для начинающих сайтоводов

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

 

Встречают по картинкам, а провожают по контенту

Для чего нужны картинки на сайте — очевидно.

Они не только иллюстрируют текст, запоминаются и позиционируют вас лучше тысячи слов, но и «ловят взгляд» пользователя, привлекая внимание к тексту. Все исследования, основанные на анализе движений глаз человека при просмотре сайта (eye-tracking), единогласно подтверждают: изображения — это первое, что замечает пользователь на странице.

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

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


Форматы графических файлов в веб-пространстве

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

Формат

Описание

Использование

Плюсы

Минусы

JPEG (основные расширения файлов .jpg, .jpeg, .jpe)

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

Оптимален в большинстве случаев.


 

GIF (файлы с расширением .gif)



Используются для простых немногоцветных изображений, а также для изображений маленького размера — например, кнопки. Формат GIF может воспроизводить не более 256 цветов. Из-за этого ограничения он не подходит для фотографий или сложных изображений с градиентами, наложением цветов и эффектов, но идеален для картинок с четкими областями цвета, например: графики, диаграммы, рисунки, простые логотипы. GIF позволяет значительно снизить объем графического файла по сравнению с другими сжатыми растровыми форматами. Данный формат поддерживает полную прозрачность (но не полупрозрачность), поэтому позволяет делать, например, картинки с закругленными углами.

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

Простые немногоцветные изображения с четкими областями цвета.

  • поддерживает анимацию и прозрачность;
  • маленький объем файлов.

  • количество цветов ограничено;
  • не поддерживает графические эффекты.

3. PNG (файлы с расширением .png)



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

Изображения высокого качества.

Поддерживает прозрачность и полупрозрачность;

Сравнительно большой объем файлов.

 

Например, черно-белый скан документа форматом А5 при одинаковом качестве изображения, в формате PNG может занимать на диске около 600 Кб, в JPEG — около 200 Кб, а в GIF — всего 50 Кб. Cравните:

форматы растровой графики

JPEG, 10 Кб

форматы растровой графики

GIF, 4 Кб

форматы растровой графики

Анимированный GIF, 52 Кб

форматы растровой графики

PNG, 26 Кб (прозрачный фон)

 

Какие еще форматы двумерной компьютерной графики могут вам встретиться, и для чего они используются:

ICO (расширение .ico) — формат, который используется в веб-пространстве для хранения иконки сайта (favicon). Это значок сайта, отображающийся в адресной строке браузера, закладках, результатах поиска Яндекса и т.п.:


 

Сегодня некоторые браузеры поддерживают favicon и в других форматах (PNG, GIF, JPEG).

Но будьте бдительны к ограничениям браузеров: например, Google Chrome и Safari не поддерживают анимированный GIF, а Internet Explorer воспринимает только ICO. Загрузить иконку можно в административной части вашего сайта (раздел «Дизайн» > «Иконка сайта»).

Несжатая растровая графика:

  • TIFF (расширения .tif и .tiff) — обеспечивает очень высокое качество изображений и чаще всего используется в полиграфической печати;

  • PSD (расширение .psd) — позволяет создавать и редактировать изображения с помощью программы Adobe Photoshop, сохраняя слои.

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

Векторная графика (расширения .eps, .ai, .cdr и др.) используется в основном в полиграфической печати, а также при создании рисованной флеш-анимации. На сайте ее можно выкладывать только в виде файлов для скачивания.


Что такое хорошо и что такое плохо?

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

В чем смысл?
Прежде всего, изображения должны быть явно связаны по смыслу с текстом, стоящим рядом. Именно РЯДОМ, а не где-то на странице. Помним главный закон юзабилити: «Не заставляйте пользователей думать!»  


Сколько вешать в пикселях? Качество, размер и вес
При публикации изображений важно соблюдать баланс «качество — размер — объем файла». Качество и размер картинки должны быть достаточными для четкой видимости деталей, о которых идет речь в контексте. Изображение не должно распадаться на пиксели. 

качественное растровое изображение (JPEG)некачественное растровое изображение (JPEG)

Качественное фото                                    Фото распадается на пиксели

 

С другой стороны, избегайте избыточного качества: чем выше разрешение и размер картинки, тем больше объем файла, а значит — ниже скорость загрузки страницы.

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

редактирование изображения в UMI.ru

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


ХорошоПлохо

Редактирование изображений
Изменить размер картинки, кадрировать (обрезать) или повернуть ее на UMI.ru очень просто — это можно сделать в режиме редактирования вашего сайта, кликнув на изображение:

редактирование изображения в UMI.ru

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

Для других несложных операций с изображениями (добавить подпись, откорректировать цветовой баланс, увеличить резкость и т.п.) вам понадобится простой графический редактор. Из бесплатных программ можно использовать, например, графический редактор IrfanView, онлайн-редактор PIXLR или встроенные в ваш компьютер программы просмотра с графическими инструментами (для Windows это «Paint», для Mac OS — «Просмотр»); из платных — например, ACDSee.


Битый небитого не увезет
Не допускайте появления «битых» (то есть не отображающихся) картинок на вашем сайте — они могут испортить не только его внешний вид, но и впечатление пользователей о вас. Они могут появиться по нескольким причинам:

  • файл с картинкой отсутствует на сервере;

  • неверно указан путь к файлу в HTML-коде (ошибочное написание; файл был перемещен в другую папку);

  • сервер, на котором находится файл с картинкой, недоступен (если вы вставили путь к файлу с другого сайта);

  • ваш сайт превысил лимит дискового пространства.

 

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

нематериальные услуги

 

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

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

фотобанк

Стоимость составляет от нескольких центов до нескольких десятков долларов и зависит от изображения, его разрешения, лицензии и тарифа.

Фото-банков существует множество, и найти их не составит труда. А мы подскажем несколько бесплатных источников изображений:

  • фото-сток SXC;

  • бесплатная коллекция фотографий на Dreamstime;

  • база иконок FindIcons.com;

  • банк логотипов известных брендов Logobank.

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


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