Оптимизируем изображения для сайта

Posted on 24 sep 2019 by Admin   •   Filed under templates, internet   •   Comments (11)

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

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

Следовательно загружаемые изображения на станицы сайта должны иметь незначительный вес.

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

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

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

Что подразумевается под оптимизацией изображений?

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

Форматирование изображений

Во-первых, зачем вам форматировать ваши изображения? Каковы их преимущества перед неформатированными? Существует множество преимуществ оптимизацированных изображений для улучшения производительности. Статистика говорит о том, что доля изображений от общей массы страницы составляет в среднем 21%. Поэтому, когда дело касается оптимизации вашего сайта , то изображения, после видео, безусловно занимают первое место. Следовательно с их оптимизации и следует начать!

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

Допустимое среднее количество байт на страницу (КБ)

Рассмотрим некоторые преимущества оптимизированных изображений перед неоптимизированными.

Вот их основные преимущества:

• Существенно улучшается скорость загрузки страниц. Означающая, что если страница вашего сайта загружается слишком продолжительное время, ваши посетители могут устать от ожидания и перейти на другой ресурс.

• Ваш сайт будет занимать более высокие позиции в выдаче поисковиков. Большие файлы замедляют загрузку страниц сайта, а поисковые системы недолюбливают медленные сайты. Кроме того поисковики также могут просматривать и индексировать ваши изображения быстрее на предмет поиска изображений релевантных тому или иному запросу. Если Вам интересно узнать , какой конкретно процент вашего трафика приходится на поиск картинок, то вы можете воспользоваться системой Google Analytics

• Создание резервных копий вашего сайта будет происходить быстрее.

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

• Оптимизированные изображения, будут кроме того, и на сервере вашего хостинг провайдера занимать куда меньше места.

Каким образом можно оптимизировать изображения

Главная цель адаптации изображений – добиться приемлемого компромисса между размером изображения в КБ и его качеством . Для осуществления оптимизации изображений существует несколько способов. Один из самых популярных из них – это сжатие их непосредственно перед выгрузкой на ваш сайт. Это можно сделать например при помощи Affinity Photo или Adobe Photoshop. В случае если вы используете Wordpress эти задачи могут быть решены с помощью плагинов.

Приступая к оптимизации изображений следует учитывать две основные вещи – первое это формат файла и второе это тип используемого вами сжатия . Подобрав правильную комбинацию, вы сможете в значительной степени уменьшить размер изображения приблизительно в 4-5 раз. Сделать это лучше всего экспериментальным путем.

Выбор необходимого формата файла

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

• PNG – изображения в этом формате как правило имеют более высокое качество, хотя и имеют больший вес в КБ.

• JPEG – наиболее распространенный формат изображений, так как он дает возможность сжатия файлов изображений, позволяя при этом регулировать уровень качества и соответствующего размера файла.

• GIF - Это лучший выбор для чертежей и графиков, а так же анимированных изображений. Создан он был на заре интернета и использует всего 256 цветов.

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

Качество или сжатие изображения

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

При выборе между этими двумя параметрами следует ориентироваться на тот факт, что наиболее оптимальным вариантом будет тот, когда будет общий размер вашей веб-страницы не будет превышать 1 - 2 МБ. Ко всему сказанному можно добавить, что для загрузки на сайт, возможно допустимым обычно бывает сжатие в 3-4 раза.