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

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

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

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

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

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

Способы сжатия

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

Это важно и для пользователей. Нужно понимать, что сегодня все еще далеко не все имеют доступ к высокоскоростному соединению, а если страница будет загружаться более 3-5 секунд, это начнет раздражать человека. Мы – существа нетерпеливые, нам надо вот сейчас уже, поэтому скорость – это не только требование поисковых роботов.

Все, заканчиваю с теорией, переходим к тому, как ваши фото уменьшить в размерах.

Уменьшите размеры под оптимальные для дизайна вашего сайта. Ни в коем случае не загружайте изображение 1024х800, если у вас ширина блока для вывода текста – 600 пикселей. Изображению придется уменьшиться автоматически, но при этом все равно будет загружаться в своем полном размере.

Используйте онлайн-сервисы. Сегодня в сети есть несколько очень хороших сервисов для сжатия картинок. Самым лучшим я считаю optimizilla, потому что в нем вы можете выставлять качество вручную. Таким образом, можно добиться уменьшения на 10-90%, в зависимости от ваших потребностей.

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

Используйте фотошоп. В программе Adobe PhotoShop есть замечательная функция – Сохранить для Web, которая создана специально для того, чтобы генерировать легкие качественные картинки с минимальным размером и вставлять их в последствии на веб-страницу.

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

Не переусердствуйте

Хотя оптимизация размера файлов важна, не нужно заходить слишком далеко. Дело в том, что можно уменьшить размер и в 10-20 раз, но какого качества будет изображение? Вы увидите, что оно просто ужасно. Придерживайтесь золотой середины и если вы видите, что изображение значительно ухудшило свой внешний вид, лучше сжать его меньше, зато люди смогут его рассмотреть как следует.

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

Как оптимизировать картинки для сайта в wordpress с помощью плагинов

Также, если вы используете именно этот движок, могу посоветовать вам супер полезный плагин для этой цели. Называется он EWWW Image Optimizer. Дело в том, что вы можете узнать об оптимизации изображений не сразу, и, возможно, на вашем сайте уже скопились сотни картинок. Вручную сжимать их будет очень грустно, но плагин позволяет в разы ускорить этот процесс – он находит и уменьшает все изображения, с которыми это можно сделать.

То же самое можно сделать и с дополнительными файлами вашего шаблона – иконками и т.д. Кстати, я об этом не упомянул, но это тоже важно. Оптимизация файлов шаблона (картинок) тоже важна. Например, у вас в шапке графический логотип-картинка. Конечно, он должен выглядеть красиво, но постарайтесь хотя бы немного уменьшить его размер.

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

Объединение мелких иконок в спрайты

Что вы еще можете сделать в плане оптимизации, так это соединить мелкие иконки в спрайты. Дело в том, что любая, даже самая маленькая картиночка – это дополнительный запрос на сервер. И чем больше таких запросов, тем медленнее загрузка. В таком случае лучше объединить 10-15 маленьких изображений в одно, сжать его и получать на 70-80% более быструю загрузку, а также всего 1 запрос на сервер, вместо десятка.

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. John Blum

    Интересные советы, спасибо!
    Что касается оптимизации изображения У меня есть лучшие результаты с ShortPixel Image Optimizer, бесплатный веб-сервис и плагин тоже.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree