Оптимизация картинок для сайтов, блогов и соцсетей


Сегодня в сфере интернет-маркетинга стало популярным выражение Content is King. В вольном переводе "Контент – это наше все". А еще можно сказать – доброе слово и кошке приятно, а пользователю интернета очень хочется найти в интернете полезные тексты, еще лучше – красиво оформленные тематическими картинками статьи.

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

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

Зачем нужны картинки на сайтах?

Зачем нужны картинки на сайтах

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

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

Маркетологи утверждают, что 99% покупок совершается на основании внешнего эмоционального впечатления, полученного от упаковки товара. И только 1% покупателей на самом деле читают, что там написано на яркой баночке мелкими буковками.

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

Особенности обработки графики в браузерах

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

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

Отсюда определенные требования к графике.

  • Слишком тяжелые изображения замедляют загрузку страниц сайта. У многих потенциальных посетителей просто не хватит терпения дождаться.
  • Например – файл фотографии с цифровой камеры весит порядка 15MB. Веб-страница с парочкой таких фоток будет грузиться до конца рабочего дня.
  • Чтобы изображения не расплывались на экранах разного размера и формата, нужно в HTML-коде размер картинки задавать не в пикселях, а процентах. Тогда фотография будет гибко вписываться в любой тип дисплея без искажений.

Иногда неопытные веб-мастера для скорости масштабируют картинки, растягивая за квадратики по углам. Так вот – этого делать нельзя категорически. Такого рода принудительное масштабирование обязательно приведет к некорректному отображению в разных типах браузеров.

Чтобы картинки одинаково хорошо выглядели везде и всюду – подгонять размер под страницу необходимо в абсолютном размере, в пикселях по ширине и высоте.

Веб-мастер сначала вымеряет изображения на своем сайте – а потом при конвертации задает нужные параметры в настройках обработки файла.

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

Здесь есть несколько очень простых правил.

  • Качественные фотографии публикуются на сайтах в формате JPEG. Этот формат сам по себе сжимает данные и делает изображение достаточно качественным при небольшом весе.
  • Рисунки с ограниченным числом цветов лучше публиковать в формате PNG.
  • Иконки, маленькие символические изображения, логотипы – можно в формате GIF либо ICO.

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

По весу файлов можно запомнить следующую таблицу вычислений.

  • Высококачественные фотографии (JPEG) – до 100KB.
  • Картинки (PNG) – до 30
  • Иконки, кнопки, указатели (GIF) – до 10KB.

Вот где-то так. Помните эти советы и не забывайте конвертировать картинки перед публикацией.