Home / Блоговедение / Оптимизация картинок для блога
Оптимизируем картинки

Оптимизация картинок для блога

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

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

Например, на моем блоге на данный момент всего 67 постов и несколько страниц, а картинок – более 1700 штук! И это только иллюстрации, которых самое большее 5-10 штук в каждом посте. При этом весь объем блога – всего около 130 мегабайт, включая несколько скрытых разделов. Поэтому мне до сих пор хватает дешевого тарифа на хостинге, где выделяется всего 200 мегабайт, а это уже финансовая экономия. Чувствуете силу оптимизации картинок?

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

Популярные графические форматы

Картинки бывают разные – я имею в виду их формат, то есть способ, которым они были сохранены. Этот способ можно узнать, посмотрев на расширение файла. Самые популярные из них:

  1. JPG – имеет наименьший размер файла, но может снижаться качество.
  2. PNG – отличное качество картинки, но большой размер файла.
  3. GIF – может сохранять анимацию, небольшой файл.

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

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

Формат PNG может использовать прозрачный фон, поэтому такие картинки надо использовать только там, где нужна эта особенность, в остальных случаях надо использовать формат JPG. Картинки в этом формате довольно “увесистые”, даже если небольшие по размеру. Хотя, если отключить прозрачность и пожертвовать качеством, переведя их в 8-битный цвет, то можно получить очень маленький размер файла. Но так стоит делать только если используется немного цветов, то есть картинка не пестрая.

Формат GIF сегодня потерял свою популярность – из-за низкого качества картинок. В них используется слишком мало цветов, поэтому фотографии в таком формате сохранять глупо. А вот всякие анимированные кнопки, стрелки и прочие “живые” малоцветные элементы делают именно в этом формате. Кроме того, здесь тоже можно использовать прозрачный цвет. Размер файла с такой анимированной кнопкой получается довольно маленький.

Итак, выводы:

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

Формат PNG

Формат PNG используем там, где нужна небольшая картинка с прозрачным фоном, например, чтобы наложить ее на пёстрый фон сайта или эта картинка будет смещаться. Кнопки “Вверх” на многих блогах – в этом формате, они выглядят одинаково на любом фоне. у меня Вы можете увидеть такую кнопку внизу справа.

 

Анимация

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

Оптимизируем большую фотографию в формате JPG

Дальше речь пойдет только о формате JPG, потому что именно он легко поддается изменениям, и именно такие картинки самые распространенные на сайтах и блогах. Кроме того, они же – самые большие.

Сейчас мы попробуем уменьшить размер файла и обрезать картинку обычными средствами Windows, которые есть практически у каждого, у кого установлен Microsoft Office, а он есть у каждого, кто пишет тексты, в том числе для блога, значит есть и у Вас.

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

Исходная фотография

Размер файла 1.11 Мб, размер самой фотографии – 1920 х 2560 пикселей. Это очень большая фотография, ее надо уменьшить перед тем, как размещать на блоге.

1) Идем в папку, где лежит файл фотографии, находи его и жмем правую кнопку мыши. В появившемся меню выбираем “Открыть с помощью” – “Microsoft Office Picture Manager”, как на картинке ниже:

Контекстное меню

 

2) В верхнем меню нажимаем кнопку “Изменить рисунки...”, как на картинке:

Кнопка в верхнем меню

3) Если Вам нужно обрезать на картинке какие-то области, то нужно сделать это сразу. Например, часто надо отсечь какие-то надписи внизу, или лишние участки. Я на фотографии хочу обрезать верхнюю и нижнюю часть. Для этого выберем в правой панели пункт “Обрезка

Правая панель

4) Вокруг фотографии появляется рамка, по углам и по центру каждой стороны. Передвигая границы этой рамки мышкой, а также саму рамку по фотографии, можно точно выбрать тот участок, который нужно оставить. Все, что за пределами рамки, обрежется. Например, я хочу убрать часть сверху и снизу — передвигаю рамку сверху и снизу. В правой панели Вы сможете видеть, какой размер картинки получится. Когда область обрезки выбрана, нажимаем кнопку “Ок” в правой панели.

Обрезка картинки

5) Теперь у нас есть фотография, обрезанная как нужно, но она все еще очень большого размера. Уменьшим ее. Для этого снова нажимаем на кнопку “Изменить рисунки…” вверху, но выбираем пункт “Изменение размера”, как на картинке ниже:

Правая панель

6) Дальше у нас есть несколько вариантов действий. Можно выбрать “Стандартную ширину и высоту” и из списка выбрать один из нескольких вариантов. Можно указать процент – например 50% сделает нашу фотографию меньше вдвое. Но я всегда устанавливаю свои размеры. Например, ширина моей колонки для поста – чуть больше 650 пикселей, и я обычно вставляю иллюстрации шириной 450 пикселей, по центру. Такую ширину я и укажу. Высота вставляется сама – программа вычисляет ее с учетом пропорций фотографии. После этого жмем кнопку “Ок” и фотография уменьшается:

Изменяем размер картинки

 

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

7) Как обычно, идем в меню “Файл” – “Сохранить как…”

Главное меню

8) В появившемся стандартном окошке выбираем папку, куда надо сохранить фотографию и даем файлу осмысленное название. Название должно быть “человеческим”, а не просто набором цифр, потому что поисковики его тоже читают. В общем, это тоже важно. Пишем название, и нажимаем кнопку “Сохранить”:

Сохранение файла

Все! Вот результат:

Результат оптимизации картинки

Что получилось в итоге? Давайте сравним. Вначале был файл в 1.11 МБ. В результате получился файл в 84.1 кб. Естественно, он будет загружаться гораздо быстрее.

Это самый простой способ, доступный практически каждому. Все делается очень просто и быстро. Но он имеет один недостаток – при сохранении результата в формате JPG нет опции выбора качества изображения. А ведь его можно немного снизить, процентов на 20-30, и это будет практически незаметно, но  еще намного уменьшит размер файла, возможно – еще вдвое. В общем, еще есть потенциал в оптимизации. Хотя зачастую вполне достаточно и такого простого способа, особенно, если в посте совсем мало картинок.

В следующем посте опишу еще один отличный способ оптимизации картинок для блога, с помощью бесплатной программы FastStone Image Viewer, что позволит получить конечный файл еще меньшего размера. Чтобы не пропустить этот пост, подписывайтесь на новые публикации!

Читайте также:

Дубли страниц в Wordpress

Как убрать дубли страниц в WordPress и вернуть All in One SEO Pack

Доброго времени суток, уважаемые читатели. Как обычно, долго ничего не писал, но это не значит, …

Нужна ли покупка ссылок для сайта?

Полезна ли покупка ссылок для сайта?

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

9 комментариев

  1. Спасибо, полезный пост!
    Я перепробовал менять размер многими программами, а вот этой — нет, хотя она всегда стоит перед носом. Даже смешно получается. Проверил, да этим способом размер уменьшается без заметного снижения качества фотографии.
    Беру на заметку!

    • Юрий Пономаренко

      Один недостаток — нельзя уменьшить качество. Но для фотографий нормальная программа. А если хорошо поискать, на любом компьютере можно найти минимум 2-3 программы, которые могут делать то же самое)))

  2. Юрий, добрый вечер! Спасибо тебе за чудесный пост, я рада, что ты обратил внимание на нашу просьбу и написал его. Я так много убила времени на создание картинок для моего блога. Мне очень трудно дается перевод картинок в формат .jpg, подбор необходимого размера. То почему-то вдруг картинка уменьшается, но рядом с изображением остается пустое место, от которого я не знала, как избавиться. Я-то знала, что картинки как-то обрезают, но у меня ничего не получалось. Теперь займусь этим, взяв на вооружение твою статью.
    И еще у меня, Юрий, такой вопрос. Я просматривала в поисковой системе Яндекса, есть ли там мой блог вообще. Он, конечно, там есть. Но в одной ссылке показана грифовая цесарка, фотография, которую я переносила для публикации, но не публиковала. Кроме того, еще несколько рисунков, некоторые уже опубликованы на блоге. Что могло произойти? Конечно же, я наверное, что-то не там нажала. Но как именно публиковать статью и рисунки я уже хорошо усвоила, и знаю, что не публиковала. А теперь я хочу спросить тебя, а могу я их убрать, отменить публикацию, чтобы они не торчали в ненужном месте?

    • Юрий Пономаренко

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

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

        • Юрий Пономаренко

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

  3. Я тоже этой программой пользуюсь,есть плюсы,удобство,простота программы,спасибо за статью!

  4. Добрый день. Еще неплохой бесплатный редактор, к тому же входящий в состав Windows — Paint. Насколько я помню он и обрезать изображения может и уменьшать их качество как в процентном соотношении так и пиксельном, при этом сохраняя пропорции.

    • Юрий Пономаренко

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

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

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