Оглавление
Зачем сжимать картинки?
Как сжимать фотографии?
Как делать SEO изображений?
Зачем сжимать картинки?
Изображения сжимают для уменьшения их веса. Каждая фотография является составным элементом веб-страницы. Кроме графики, на объем сайта влияют тексты, программные скрипты, файлы CSS, flash, html и другие составляющие. Изображения занимают в этом списке критический объем. На диаграммах видно, что при первичной загрузке страницы, картинки потребляют около трети всех ресурсов.
Важно максимально уменьшить вес изображений, чтобы первый опыт использования сайта не был омрачен долгим ожиданием. При следующих посещениях картинки не будут загружаться повторно. Благодаря кешированию, они сохранились на компьютере пользователя.
В начале 2000 годов требования к web-сайтам были гораздо жестче. Негласным стандартом считался вес страницы в 50кб и не больше. Сейчас одна фотография на сайте может весить свыше мегабайта.
Оптимальным считается время загрузки страницы — 2 секунды. Опытным путем установлено, что средний пользователь дольше ждать не будет.
Для сжатия иллюстраций используются разные методы. От оптимизации вручную с помощью графических редакторов, до использования программных скриптов, установленных прямо на сайте. Недостаток последних в отсутствии контроля за качеством изображений.
Как сжимать фотографии?
Для качественного сжатия картинок, размещенных на веб-сайте используют графические редакторы. Существует необозримое множество платных и бесплатных программ для обработки изображений. Они отличаются друг от друга количеством функций и удобством использования, ценой и универсальностью. Из всего многообразия выделяются два приложения:
В Фотошопе для сохранения оптимизированного изображения нажмите сочетание клавиш Alt+Ctrl+Shift+S или меню «Файл» — «Сохранить для WEB». В появившемся окне выберите подходящие параметры и сохраните файл в нужную папку. «Поиграйте» с настройками: качество изображения, его размер, степень и алгоритм сжатия, и прочие. Каждая настройка влияет на будущий вес изображения. Воспринимаемое глазом качество картинки в нашем примере не изменилось, а вес уменьшился втрое.
В «FastStone Image Viewer» нажмите сочетание клавиш Ctrl+S или меню «Файл» — «Сохранить как...». В появившемся диалоге нажмите незаметную кнопку «Опции» в правом нижнем углу. Попадете в интерфейс выбора параметров сжатия. Для оптимизации без потерь установите цветовую схему «YCnCr», субдескридетацию цвета «Высокую» (лучшее сжатие), оптимизацию по Хаффману. Выберите прогрессивный алгоритм. Бегунок качества установите на такой уровень, чтобы новая картинка не имела заметных артефактов сжатия. На нашем примере — это около 50%. Объем изображения с такими настройками снизился больше чем в пять раз.
Описанные методы сжатия подходят к фотографиям. Со скриншотами, снятыми с текстовых страниц, лучше поступать по-другому. Сохраняйте их не *.jpg, а в *.png. Назначьте сжатие без потерь восьмого уровня, а цветовую схему установите на 256 цветов, так как при чтении цвета колористика не очень важна. На выходе получите сжатие почти в 25 раз. Было 343 кб — стало 14 кб. Отличный результат и облегчение для вашего сайта.
При выборе параметров сжатия изображений с текстом, следите за возникновением артефактов. Они могут помешать чтению скриншота.
Если картинок много, примените пакетное форматирование и переименование. Оно вызывается в «FastStone Image Viewer» кнопкой «F3». Тут есть следующие настройки:
-
изменение размера,
-
поворот,
-
обрезка,
-
размер холста,
-
глубина цвета,
-
настройки яркости, контрастности, гаммы и насыщенности,
-
DPI,
-
наложение текста,
-
наложение водяного знака,
-
рамка,
-
переименование,
-
удаление даты и времени фото,
-
изменение формата файла.
Из приведенного перечня вы видите, что изображения пакетно можно не только сжать, но и переименовать, изменить формат, наложить внутреннюю или наружную рамку, водяной знак, текст, отрегулировать цветовые настройки и разрешение, а также обрезать, повернуть и изменить размер.
Как делать SEO изображений?
При добавлении картинок на сайт, используйте дополнительные ключевые слова. Употребляйте те фразы, которые органично не получилось вписать в текст. Только знайте меру. При переспаме попадете под фильтр от Яндекса «Баден Баден».
При верстке страницы в html, допишите к изображению два атрибута: «alt» и «title». Строка кода с картинкой будет выглядеть так:
<img src="picture.jpg" alt="Альтернативная надпись, когда картинка не видна" title="Всплывающая подсказка">
В системе управления контентом «Wordpress» воспользуйтесь удобной формой для ввода этих атрибутов.
В других CMS имеются похожие элементы управления тегами изображений.
Удачи вам!
Читайте также о том, что SEO больше никому не нужен.
