Оптимизация картинок — что это такое?


Игорь | 2011-04-15 | 23 комментария

Когда-то в одном из своих уроков, Евгений Попов поднял тему оптимизации картинок на сайт. А затеял он разговор вот по какому поводу. Однажды хостер ему строго помахал пальчиком, дескать: «Нарушаем, товарищ, порядок пользования хостингом, превышаем лимит помесячного трафика. Создаете нагрузку на сервер».

Вот и начал Евгений рыть, где же проблема? И обнаружил следующее: неоптимизированные картинки на сайте.

Что это значит?

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

Давайте займемся арифметикой.

Каждая страница имеет свой вес — это текст, видео, изображение, скрипты — вот её «килограммы». При этом, допустим, что хорошая добротная картинка весит 100 кб. Если в сутки на сайт зашло 100 человек — трафик (по картинкам) = 10 мб. Если в сутки зашло 1000 человек — уже 100 мб. А если на одной странице висит 5 таких мощных картинок, сверкающих своими пикселями? Тогда что? Тогда 500 мб.

Идем дальше. А если каждый второй посетитель активный, в наглую не хочет покидать ваш сайт и шастает со страницы на страницу, туда-сюда, туда-сюда, как угорелый?! 🙂 Это же сколько он вам метров намотает?

Оптимизация картинок - это сжатие их размеров

Я шучу, конечно, дай Бог каждому таких заинтересованных посетителей...

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

А теперь её решение.

Оптимизация картинок.

Нужно сделать так, чтобы на сайт размещались картинки минимальные по весу без потери её качества. (О  роли изображений не будем говорить, но кто не знает, вам сюда «Картинки и заголовки вашего блога»)

Итак, например, если картинку можно сжать, чтобы она вместо 100 кб весила 70 или 50 кб — это уже что-то!

Как это делается? Приходится прибегать к «дедовскому методу», с использованием программы Фотошоп. Только вместо обычного «Сохранить как», пользуемся пунктом меню «Файл — Сохранить для веб». Вот и вся премудрость.

Второй способ достичь того же результата — это воспользоваться сайтом https://www.punypng.com/.

оптимизация картинок для сайта

Как пользоваться этим сервисом? Жмете Upload и грузите свою любимую картинку из компа.

Рunypng тут же её обрабатывает и выдаёт вам уже оптимизированное изображение. Тут же вы увидите насколько процентов она была сжата. Например, скриншот Рunypng (1 картинка c двумя мышками) был оптимизирован на 32 процента.

Читайте также:  Какие профессии будут востребованы в ближайшее время?

Как сжать картинку? Воспользуйтесь сервисом Рunypng

Вторая картинка — ещё на 43%. Вот вам и трафик. Вот вам и экономия. Сохраняете обработанную картинку на свой комп (download) и грузите в блог или на сайт.

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

Отчасти, да.

Оптимизация картинок нужна ещё и потому, что не у всех быстрый интернет.

Случается, я иногда попадаю на такой сайт , что думаешь или у меня скорость интернета упала, или это какая-то ГЛЫБА падает в мой браузер. Впечатление, что вебмастер решил поиздеваться, натыкав images в паре с баннерами и моих 4 мбита в секунду для того, чтобы уследить за его гениальным полетом мысли, просто мало.

Конечно, приходится, просто уходить подальше от этого ТЯЖЕЛОВЕСА.

Итак, вот она ещё маленькая хитрость. Оптимизируйте картинки перед их загрузкой на сайт, если они имеют большой вес. Это общий принцип. Инструменты для этого есть и скажу, что при необходимости, быстрее будет — это воспользоваться сервисом Рunypng .

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

Автор: Игорь
Чистый звук в мире инфобизнеса



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

  1. Людмила:

    Спасибо за статью. Значит чем меньше картинка, тем лучше?

    Ответить
    • Игорь:

      Меньше по весу, а не по размерам, хотя эти параметры взаимосвязаны. Поэтому ищется всегда компромисс: между качеством-размером и весом картинки.

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

      Ответить
  2. Нина:

    Хорошая статья, очень нужная, спасибо, так как во всех этих тонкостях предстоит еще разбираться

    Ответить
  3. светлана:

    не чего не пойму как их сжимать значит нам не нужно картинки закачивать я их люблю без картинок мне не интересно

    Ответить
    • Игорь:

      А что тут понимать. Принцип один для любого сайта. Чем меньше весит страница — тем лучше и для вас, и для посетителя. Это нужно знать. Это общий принцип. А вывод: «значит нам не нужно картинки закачивать» — неправильный. Закачивайте.

      Ответить
  4. Юрий:

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

    Ответить
  5. Наталья:

    Приятно читать, когда мысли выражены ясно:без «зауми» и чтения между строк!)

    Ответить
    • Игорь:

      Приятно читать такой комментарий!

      Ответить
  6. Oleg:

    Картинки можно сложить в другом месте и ссылаться на них. Правда есть один минус если с местом чтонибудь случится сайт останется без картинок.

    Ответить
    • Игорь:

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

      Ответить
  7. Жанна:

    Как не зайдешь к вам обязательно, что либо интересное и полезное найдешь. Здорово.

    Ответить
  8. Protey:

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

    Ответить
  9. Людмила Алешина:

    Игорь, а при загрузке картинки на сайт и уменьшении её размеров до 400х... она теряет вес? 😈

    Ответить
    • Игорь:

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

      Ответить
  10. Философ:

    Да, я тоже за оптимизацию картинок. Как-то был момент... Зашел на какой-то блог и буквально «завис» там по причине загрузки кучи тяжелых картинок. Не смотря на то, что текст был отменным, желания посещать тот блог у меня более не возникло (тем паче, что у меня не такой быстрый интернет). Так что я всеми руками «за» оптимизацию изображений.

    Ответить
    • Игорь:

      Новички обычно вообще понятия об этом не имеют. Грузят картинки как есть, не проверяя их вес. Я когда-то зашел на одну подписную страницу, картинка на моих глазах Ме-е-едленно грузилась. Как потом оказалось её вес был 5 мб.

      Ответить
      • Философ:

        Так вот именно 🙂 А представь, у тебя скорость инета (если не ошибаюсь) 4 мб, а у меня от 0 и выше... 🙂 Так для меня просто мучение ходить по подобным сайтам, блогам и т.п. Хотя, должен признать, что на них порою находится очень интересная информация (тексты). Но, увы и ах, скорость мне не позволяет...

        Ответить
        • Игорь:

          У меня 15 Мбит/с)) 1.5 гб за 15 минут скачивается. А можно взять и 50 мб и 100 только уже не понимаю, зачем мне такая скорость.

          Представляю твои «мучения».

          Ответить
          • Философ:

            Ой, извини, значит я ошибся по поводу твоей скорости. Видимо просто прочел в старом посте 🙂

            А мне такая как у тебя и не снилась 😀 Да, ну я как-то уже привык, благо не всегда она у меня на 0, бывает и до 1мб доходит в лучшие времена 😀 Мне как бы для работы почти хватает, а фильмы там и т.п. я особо не качаю. Но, «тяжеловесных» сайтов стараюсь избегать...

            Ответить
            • Игорь:

              Было 4, года 1.5 назад. Да, в какой-то статье писал, наверное ещё 2011 год. Тоже тогда хватало, но сейчас просто уже не думаю о скорости. Другой провайдер. Деньги почти те же самые, а обслуживание и скорость другая.

              Ответить
              • Философ:

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

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

                Хотя тебе об этом вообще можно не думать 🙂

                Ответить
                • Игорь:

                  Виталий, а зачем ты сделал у себя на блоге авторизацию для оставления комментов? Так вряд ли будет кто-то оставлять.

                  Ответить
                  • Философ:

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

                    В принципе, даже пробовал использовать сторонний сервис блокирующий спамеров через .htaccess (Если интересно, могу поискать его).

                    В общем, решил вообще запретить регистрацию на блоге 🙂

                    Мне как бы сейчас особо комменты не нужны. Времени на блог маловато, в основном пишу на чужие. 🙂

                    Может в скором времени ситуация изменится и открою.

                    Ответить

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

Ваш адрес email не будет опубликован.