< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Начинающему веб-мастеру » Оптимизация картинок для сайта — как?

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

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

Пост был обновлен: Авг 21, 2015

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

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

Прежде чем приступить к действиям давайте я сначала объясню что такое оптимизация картинки и зачем их нужно оптимизировать.

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

Теперь давайте разберемся зачем оптимизировать картинки для сайта. Представьте у вас на странице, скажем, в каком-либо обзоре имеется 10 картинок. В не оптимизированном варианте каждая картинка весит ~1 Мб. Т.е. представим, что эти картинки сняты на хорошей камере (хотя в реальности такие картинки весят еще больше). Я здесь беру по минимуму. Все 10 картинок мы загружаем на сайт. В итоге страница с обзором у нас будет весить как минимум 10 Мб. Как минимум потому что на сайте может быть и другая графика, относящаяся к дизайну. Вы представляете грузить страницу в 10 Мб. Я понимаю, что сегодня у каждого в доме имеется проводной интернет и Wi-Fi. А вы подумали о пользователях мобильного интернета? Мне кажется многие пользователи просто не дождутся загрузки страницы вообще.

Читайте также:  Правильное подключение стилей и JS плагинов в Joomla

Теперь давайте представим, что эти же самые картинки после оптимизации будут весить не 1 Мб, а 100 кб. Это в десять раз меньше. В итоге все картинки суммарно будут весить 1 Мб. 1 Мб куда быстрее загрузится на мобильном устройстве, чем 10 Мб.

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

Для примера я возьму любую картинку. Посмотрим на ее размер в оригинале.

Вес графического файла. Как оптимизировать картинку для сайта

Как видим из скриншота картинка весит 1,47 Мб. Это много. Нельзя ее на сайт такую грузить. Также сразу хочу обратить ваше внимание на разрешение картинки, т.е. ее размер. Он указывается в пикселях.

Разрешение графического файла. Как оптимизировать картинку для сайта.

Видим разрешение — 2560 x 1600 пикс. Это тоже очень много. Зачем загружать такую картинку, если она все равно будет уменьшена до ширины главного контейнера сайта. Обычно это не больше 1200 пикс. Если картинка должна открываться в лайтбокс, т.е. всплывать по клику, то разрешение должно быть не более 1200 пикс. Поэтому уменьшаем картинку в 2 этапа — сначала уменьшаем ее разрешение, а потом сохраняем для Web-устройств.

Откроем желаемую картинку в фотошоп: Файл -> Открыть. Далее уменьшаем размер картинки: Изображение -> Размер изображения.

Уменьшаем размер картинки в фотошоп

Далее, сохраним уже уменьшенный файл в формате JPG: Файл -> Сохранить для Web или жмем комбинацию клавиш Ctrl + Shift + Alt + S. В открывшемся окне выбираем формат — JPG и выставляем качество — Высокое — 60. Качество — 60 — это как раз то оптимальное соотношение качество/вес файла.

save-for-web-photoshop

Обратите внимание на вес файла после сохранения — 250,9 Кб. А было ведь 1,47 Мб, вес сократился чуть более в 5 раз.

Почему мы выбрали формат JPG, а не PNG или GIF? Формат JPG этот как раз тот формат при котором оптимизация графического файла будет максимальным. Но следует иметь в виду, что этот формат не поддерживает прозрачность. Для поддержки прозрачности следует использовать формат PNG, но вес файла в таком формате увеличивается в разы. GIF формат используют для небольших файлов (иконки) или для анимированных картинок.

Читайте также:  Как создать материал в joomla 2.5? Добавление статей и категорий.

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

Способ, что мы рассмотрели выше позволяет оптимизировать картинки по одному. Есть, конечно, в фотошоп функционал для массовой обработки, но я в нем так и не разобрался. Для массового изменения размеров картинок я использую небольшую программку — XnView MP. Я записал небольшой видеообзор по работе с этой программой, можете посмотреть. Особенно порадовала меня программа тем, что на выходе получались уже оптимизированные файлы для Web, причем еще оказалось, что XnView MP лучше оптимизирует картинки, чем фотошоп.

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

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

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

Всем пока. До новых встреч!

Пост был обновлен: Авг 21, 2015

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (3 оценок, среднее: 3,67 из 5)
Загрузка...

Проверка орфографии

Система Orphus

36 комментариев к статье "Оптимизация картинок для сайта — как?"

  • Дмитрий Мар 22, 2016 в 16:21

    Для сайтасохраняю картинки с помощью «Сохранить для web». Но узнал об этом не так давно. До этого всё сохранял обычным способом)

    • Максим Апр 20, 2016 в 15:46

      Дмитрий, та же самая ситуация… Об этом способе не знал до сего момента… Спасибо автору, буду применять.

  • bytrina Мар 18, 2016 в 17:26

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

    • Заур Магомедов
      Заур Магомедов Мар 19, 2016 в 1:32

      Вы уникальность картинок имеете ввиду? Если да, то вам следует рисовать картинки с нуля, заказывать у дизайнера опытного. Другого способа я не знаю.

  • Шахрудин Чапаев Фев 26, 2016 в 12:07

    Довольно старый способ, года 3 назад наверное использовал)
    Вот поучите автор https://www.npmjs.com/package/grunt-contrib-imagemin

    • Заур Магомедов
      Заур Магомедов Фев 26, 2016 в 12:14

      Во-первых, про этот способ я знаю и учить меня не надо.
      Во-вторых, я обычным пользователям что про Грант буду рассказывать, т.е. настраиваете gruntjs — там не трудно, нужно лишь всего несколько команд в консоле написать. Это вообще отдельная тема. Про него я буду еще писать.

      P.S. Не надо судить всех по себе. Если для вас этот способ старый, то для кого-то это самое то. Я понимаю, написали бы про Панду сервис, что есть плагин для WordPress и Photoshop, но Grunt…
      Grunt сойдет только для разработчиков.

      • Gu U Мар 02, 2016 в 11:31

        Спасибо! Все просто и доступно!

    • Заур Магомедов
      Заур Магомедов Фев 26, 2016 в 12:32

      Ответил на e-mail, только вот письмо что то не доходит. В паблик писать не стал.

  • Вадим Ноя 30, 2015 в 13:38

    Статья написана чётко и по делу. Всё, что реально нужно. Жаль, что не нашел эту информацию раньше. На досуге надо будет остальные статьи почитать.

    • Заур Магомедов
      Заур Магомедов Ноя 30, 2015 в 20:12

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

  • Антон Александрович Ноя 20, 2015 в 16:07

    то что искал сегодня. Все статьи Ваши пересмотрю много что интересного…

    • Заур Магомедов
      Заур Магомедов Ноя 20, 2015 в 16:14

      Будут вопросы, задавайте…

      • Антон Александрович Ноя 20, 2015 в 16:19

        вопросик такой по wordpress отдельные работы делаете мой сайт http://camead.ru/ и под логотипом я хочу сделать соц значки как у Вас

        • Заур Магомедов
          Заур Магомедов Ноя 20, 2015 в 16:45

          Работы делаю, но сейчас занят, не могу взяться.

          • Антон Александрович Ноя 20, 2015 в 16:46

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

            • Заур Магомедов
              Заур Магомедов Ноя 20, 2015 в 16:48

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

              • Антон Александрович Ноя 20, 2015 в 16:50

                хорошо так и сделаем. удачного Вам дня спасибо

                • Заур Магомедов
                  Заур Магомедов Ноя 20, 2015 в 16:56

                  Не за что! Вам спасибо!

  • Анна Окт 23, 2015 в 17:38

    Как удобно) Спасибо. Надо у себя во многих статьях по оптимизировать)

    • Заур Магомедов
      Заур Магомедов Окт 23, 2015 в 17:40

      Советую также обратить внимание на коммент БобрДобр

  • Андрей Окт 05, 2015 в 23:09

    Есть программа fileoptimizer? отлично оптимизирует без потери качества

    • Заур Магомедов
      Заур Магомедов Окт 06, 2015 в 1:25

      Уверен таких программ есть не мало.

      • Андрей Окт 07, 2015 в 13:14

        Скорей всего, но еще надо картинки объединять, если их много на странице

        • Заур Магомедов
          Заур Магомедов Окт 07, 2015 в 13:45

          Объединяют в основном иконки. Это так называемые спрайты. Я делаю так, когда много иконок и еще когда при наведении они меняют цвет. Здесь без спрайтов не обойтись.

          • Андрей Окт 07, 2015 в 13:48

            Я и фото объединяю, когда они небольшие и равного размера, у меня на сайте так сделано

            • Заур Магомедов
              Заур Магомедов Окт 07, 2015 в 14:21

              Можно объединить фоновые изображения, но вставленные в статью картинки (

              <img />

              ) как вы объедините?

              • Андрей Окт 07, 2015 в 14:27

                есть плагин который объединяет, но он платный

                • Заур Магомедов
                  Заур Магомедов Окт 07, 2015 в 15:15

                  В любом случае, мне он пока точно не нужен. Тем не менее спасибо за подсказку.

  • БобрДобр Авг 25, 2015 в 0:18
    • Заур Магомедов
      Заур Магомедов Авг 25, 2015 в 0:52

      Проверил, на самом деле сервис хорош. Уменьшил картинку с 138 Кб до 42 Кб, и это при том, что в качестве картинка не потеряла. Занесу в свою коллекцию сервисов. Спасибо, что поделились!

      • БобрДобр Авг 25, 2015 в 11:23

        Было бы интересно почитать про коллекцию сервисов

        • Заур Магомедов
          Заур Магомедов Авг 25, 2015 в 12:29

          Давно хочу статью написать. Но пока их у меня не так много.

        • Имран Ильясов
          Имран Авг 25, 2015 в 12:38

          Ооо Малик, как ты? Что нового у тебя?

          • БобрДобр Авг 25, 2015 в 17:51

            Да всё как обычно: косячу (:

            • Заира Окт 02, 2015 в 21:23

              Спасибо за сайт)

              • Заур Магомедов
                Заур Магомедов Окт 02, 2015 в 21:49

                Не за что! Я старался )))

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]