Сегодня в сфере интернет-маркетинга стало популярным выражение Content is King. В вольном переводе "Контент – это наше все". А еще можно сказать – доброе слово и кошке приятно, а пользователю интернета очень хочется найти в интернете полезные тексты, еще лучше – красиво оформленные тематическими картинками статьи.
Однако нельзя просто так взять и вставить изображение на страницу сайта или блога. Существуют определенные требования к подготовке графики для публикации, обусловленные спецификой современных веб-технологий.
И если не соблюсти все приличия, картинка будет не просто выглядеть сикось-накось, а еще принесет вашему веб-проекту множественные беды и неприятности.
Зачем нужны картинки на сайтах?
Да, зачем? Начнем разбираться с самого начала. Британские ученые определили, что визуальная информация в 60 раз сильнее привлекает внимание, быстрее обрабатывается и на дольше запоминается, чем текстовая.
Пока кора головного мозга тратит колоссальный объем энергии на попытки понять, что же имеет ввиду автор теста, подсознание уже все поняло, отреагировало эмоционально и приняло решение как действовать.
Маркетологи утверждают, что 99% покупок совершается на основании внешнего эмоционального впечатления, полученного от упаковки товара. И только 1% покупателей на самом деле читают, что там написано на яркой баночке мелкими буковками.
Если вы хотите на сайте, в блоге или социальной группе, что-то донести до своих читателей – вам нужно позаботиться о картинках, фотографиях, иконках и прочих графических объектах.
Особенности обработки графики в браузерах
Обратите внимание, что сегодня более чем половина интернет-пользователей смотрят на веб-страницы с использованием сенсорных экранов смартфонов и планшетов.
- Мобильный интернет значительно медленнее десктопного.
- На маленьком экранчике большая фотография может перекосить всю страницу, разбить текст на неудобные куски, либо края изображения вылезут за пределы дисплея.
- Иногда браузер принудительно отправляет изображения вниз страницы, куда редко кто добирается.
Отсюда определенные требования к графике.
- Слишком тяжелые изображения замедляют загрузку страниц сайта. У многих потенциальных посетителей просто не хватит терпения дождаться.
- Например – файл фотографии с цифровой камеры весит порядка 15MB. Веб-страница с парочкой таких фоток будет грузиться до конца рабочего дня.
- Чтобы изображения не расплывались на экранах разного размера и формата, нужно в HTML-коде размер картинки задавать не в пикселях, а процентах. Тогда фотография будет гибко вписываться в любой тип дисплея без искажений.
Иногда неопытные веб-мастера для скорости масштабируют картинки, растягивая за квадратики по углам. Так вот – этого делать нельзя категорически. Такого рода принудительное масштабирование обязательно приведет к некорректному отображению в разных типах браузеров.
Чтобы картинки одинаково хорошо выглядели везде и всюду – подгонять размер под страницу необходимо в абсолютном размере, в пикселях по ширине и высоте.
Веб-мастер сначала вымеряет изображения на своем сайте – а потом при конвертации задает нужные параметры в настройках обработки файла.
Веб-совместимые форматы графических файлов
Здесь есть несколько очень простых правил.
- Качественные фотографии публикуются на сайтах в формате JPEG. Этот формат сам по себе сжимает данные и делает изображение достаточно качественным при небольшом весе.
- Рисунки с ограниченным числом цветов лучше публиковать в формате PNG.
- Иконки, маленькие символические изображения, логотипы – можно в формате GIF либо ICO.
Про GIF следует отдельно добавить, что в этом формате удобно создавать анимированные баннеры для рекламы. Фишка в том, что большинство мобильных устройств не поддерживают Flash-видео и такие баннеры на экранах смартфонов и планшетов будут выглядеть, как пустые глазницы домов после артобстрела.
По весу файлов можно запомнить следующую таблицу вычислений.
- Высококачественные фотографии (JPEG) – до 100KB.
- Картинки (PNG) – до 30
- Иконки, кнопки, указатели (GIF) – до 10KB.
Вот где-то так. Помните эти советы и не забывайте конвертировать картинки перед публикацией.