Сколько изображений на вашем сайте? Какую задачу они выполняют, способствуют ли повышению продаж или, наоборот, мешают воспринимать нужную информацию?
Встречают по картинкам, а провожают по контенту
Для чего нужны картинки на сайте — очевидно.
Они не только иллюстрируют текст, запоминаются и позиционируют вас лучше тысячи слов, но и «ловят взгляд» пользователя, привлекая внимание к тексту. Все исследования, основанные на анализе движений глаз человека при просмотре сайта (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 и др.) используется в основном в полиграфической печати, а также при создании рисованной флеш-анимации. На сайте ее можно выкладывать только в виде файлов для скачивания.
Что такое хорошо и что такое плохо?
При грамотном использовании картинки повышают конверсию сайта. А при неудачном — могут испортить и сам сайт, и отношение пользователей к вам. Несколько простых правил помогут научиться эффективно использовать графику на вашем сайте.
В чем смысл?
Прежде всего, изображения должны быть явно связаны по смыслу с текстом, стоящим рядом. Именно РЯДОМ, а не где-то на странице. Помним главный закон юзабилити: «Не заставляйте пользователей думать!»
Сколько вешать в пикселях? Качество, размер и вес
При публикации изображений важно соблюдать баланс «качество — размер — объем файла». Качество и размер картинки должны быть достаточными для четкой видимости деталей, о которых идет речь в контексте. Изображение не должно распадаться на пиксели.
 |
 |
| Качественное фото | Фото распадается на пиксели |
С другой стороны, избегайте избыточного качества: чем выше разрешение и размер картинки, тем больше объем файла, а значит — ниже скорость загрузки страницы.
В некоторых случаях важно опубликовать фото большого размера с высокой четкостью — например, фото товара, особенно когда нужно продемонстрировать текстуру или мелкие детали. В таких случаях делайте картинки всплывающими с помощью специального инструмента в режиме редактирования. Тогда на странице будет отображаться небольшое превью, а исходное фото откроется при нажатии на него.
Расположение
Если вы публикуете несколько картинок подряд (в том числе в фотогалерее), старайтесь группировать их равномерно по вертикальному / горизонтальному формату.
ХорошоПлохо
Редактирование изображений
Изменить размер картинки, кадрировать (обрезать) или повернуть ее на UMI.ru очень просто — это можно сделать в режиме редактирования вашего сайта, кликнув на изображение:
Обратите внимание: все изменения, сделанные при помощи этого инструмента, будут применены к оригиналу файла на сервере, и восстановить предыдущую версию после сохранения не получится. Поэтому лучше на всякий случай хранить копию исходного файла на компьютере.
Для других несложных операций с изображениями (добавить подпись, откорректировать цветовой баланс, увеличить резкость и т.п.) вам понадобится простой графический редактор. Из бесплатных программ можно использовать, например, графический редактор IrfanView, онлайн-редактор PIXLR или встроенные в ваш компьютер программы просмотра с графическими инструментами (для Windows это «Paint», для Mac OS — «Просмотр»); из платных — например, ACDSee.
Битый небитого не увезет
Не допускайте появления «битых» (то есть не отображающихся) картинок на вашем сайте — они могут испортить не только его внешний вид, но и впечатление пользователей о вас. Они могут появиться по нескольким причинам:
-
файл с картинкой отсутствует на сервере;
-
неверно указан путь к файлу в HTML-коде (ошибочное написание; файл был перемещен в другую папку);
-
сервер, на котором находится файл с картинкой, недоступен (если вы вставили путь к файлу с другого сайта);
-
ваш сайт превысил лимит дискового пространства.
Картинки «из топора»
Даже если ваши товары или услуги нематериальны и их нельзя сфотографировать, это не повод отказываться от иллюстраций на сайте. Всегда можно использовать ассоциативные изображения, фотографии счастливых клиентов, красиво отрисованные схемы. В конце концов, любой товар или услугу можно визуализировать в виде схематичной картинки или иконки.
Где взять
Чтобы получить качественные изображения для сайта, совсем не обязательно проводить профессиональную фотосессию, нанимать дизайнера или иллюстратора. А если вы только начинаете бизнес, то это просто не рационально. Существует множество бесплатных и низкобюджетных легальных источников.
Для получения качественных фотографий или иллюстраций используйте фото-банки — сайты, которые содержат огромные коллекции изображений на разнообразные тематики. Среди них можно найти фотографии, иллюстрации, иконки и даже заготовки для логотипов.
Стоимость составляет от нескольких центов до нескольких десятков долларов и зависит от изображения, его разрешения, лицензии и тарифа.
Фото-банков существует множество, и найти их не составит труда. А мы подскажем несколько бесплатных источников изображений:
-
фото-сток SXC;
-
бесплатная коллекция фотографий на Dreamstime;
-
база иконок FindIcons.com;
-
банк логотипов известных брендов Logobank.
Разумеется, не стоит брать из фото-банков фотографии товаров для вашего каталога, так как они должны быть достоверными.
Как видите, найти в интернете уникальные изображения не так сложно, а немного изучив вопрос, можно украсить свой сайт и собственными непрофессиональными фотографиями, которые будут работать на ваш бизнес.
