Оптимизация сайта, уменьшаем изображения

Сегодня я хочу вам рассказать про оптимизацию сайтов, а именно о сжатии изображений. Большую часть веса вашей страницы занимают изображения. Обычно на сайт добавляются изображения в формате .jpg или .png. Но в чем же разница?

Какие использовать форматы?

JPG обычно весит меньше, чем PNG, но и имеет качество хуже. В PNG отсутствуют артефакты и этот формат поддерживает прозрачность.

Есть несколько простых правил. Вам нужна прозрачность в изображениях — однозначно используем PNG, нужно сократить вес — берем JPG.

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

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

Оптимизация изображений

Существует множество сервисов и приложений для оптимизации. Протестировав часть из них, я остановился на сервисе tinyjpg.com Не смотря на название, он отлично справляется и с форматом .png.


Сжатие изображений


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

Как видим, мою небольшую картинку удалось сжать на 87%! c 29,4 KB до 3.8 KB, что дало мне 26 KB экономии. А если у вас на странице загружаются десятки картинок, то это даст вам ощутимый прирост скорости.

Чтобы не быть голословным, давайте посмотрим на полученный результат.

Сжатие png

Флэт изображение PNG (экономия 87%)


Сжатие jpg

Фотография JPG (экономия 38%)

Как видно качество более чем приемлемо. Даже в сравнении тяжело заметить разницу.

Если вы разбираетесь в программировании, и хотите сжимать изображения на лету, то можете воспользоваться API, предоставленные этим же сервисом. 

В нем нужно зарегистрироваться и получить API key. Приведу пример на PHP, вставляете ваш ключ и наслаждаетесь автоматическом сжатием изображений. 


        $key = "<your api key>";
        $input = "large-input.png";
        $output = "tiny-output.png";
        
        $url = "https://api.tinypng.com/shrink";
        $options = array(
          "http" => array(
            "method" => "POST",
            "header" => array(
              "Content-type: image/png",
              "Authorization: Basic " . base64_encode("api:$key")
            ),
            "content" => file_get_contents($input)
          ),
          "ssl" => array(
            /* Uncomment below if you have trouble validating our SSL certificate.
               Download cacert.pem from: <a href="http://curl.haxx.se/ca/cacert.pem">http://curl.haxx.se/ca/cacert.pem</a> */
            // "cafile" => __DIR__ . "/cacert.pem",
            "verify_peer" => true
          )
        );
        
        $result = fopen($url, "r", false, stream_context_create($options));
        if ($result) {
          /* Compression was successful, retrieve output from Location header. */
          foreach ($http_response_header as $header) {
            if (substr($header, 0, 10) === "Location: ") {
              file_put_contents($output, fopen(substr($header, 10), "rb", false));
            }
          }
        } else {
          /* Something went wrong! */
          print("Compression failed");
        }
    


На бесплатной основе, сервис разрешает до 500 сжатий в месяц, чего вполне достаточно для среднего сайта

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

02.04.2015 | В разделе: Разработка | Автор: Амплеев Николай, Веб-студия Морс
Понравились наши работы?