Оптимизация изображений. Как уменьшить вес картинки ?

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

Привет читателям блога dochych.ru!! Ужасно стыдно что так долго не публиковал посты. Проводились другие роботы над блогом. Искал методы для решения вопросов которые предоставлены в  этой статье. Пока ничего толком не применил. Но, время пока есть, и я не отступаю. Как говорил ранее, в ноябре я сделаю отчет о данной роботе.

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

Представьте, что у вас есть блог допустим на тему ремонта автомобильных машин. Вам примерно под 40-50 лет. Вы хотите рассказать и показать на фото как нужно правильно ремонтировать двигатель машины. Естественно это нужно в лучшем случаи показывать на фото.

Вы берёте свой цифровой аппарат, всё фотографируете и выкладываете на свой блог.

Одна статья более-менее подробная должна иметь примерно 10 картинок.

Сколько весит 1 фотография с цифрового?? В среднем 3-5 мегабайт.

И теперь умножьте 10 картинок на 3-5 мегабайт = 30-50 метров тяжестей для блога и это всего одна страница.

Так дела не могут идти. И это нужно кардинально исправлять. Сейчас этим и займемся.

Теперь по плану что будет показано:

  1. Настройки медиафайлов в консоли wordpress.
  2. Извлечения файлов(картинок) из сервера.
  3. Удаление и уменьшения веса картинок с помощью Zoner photo studio.
  4. Kraken.io — онлайн-сервис оптимизации изображений.

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

Настройки в консоли Cpanel

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

Смотрите какой размер на данный момент имеет моё дисковое пространство:

 

дисковое пространство Cpanel

Размер папки public_html составляет почти 83 метра. Что я считаю пока многовато для моего блога. До того как я проделал несколько операций, о которых я дальше буду писать, объем занятого места составлял более 110 метров!! Что это вообще чутли ни крах для моего «восставших из мёртвых» блога.

Что вы должны начать делать??

Зайдите в Консоль — >> Настройки — >> Медиафайлы.

медифайлы

Абсолютно все размеры поставьте по нулям.

До этого у меня стояли значения совсем разные, и благодаря этому создавались вот такие копии фотографий:

дубли фото

На 1 фото приходилось по 3 копии разных размеров, которые как раз и создавали дополнительное место на дисковом пространстве.

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

Есть 2 пути:

  1. Дать задание фрилансеру. И за 50 — 100 гривен он всё выполнит.
  2. Сделать всё самому 🙂

Извлечения файлов(картинок) из сервера.

Открываем cPanel ->> public_html ->> wp-content ->> uploads.

папка з фото

В папках под названиям «2015», «2016» есть папки, которые распределены по числам от «01» до «12». Это последовательность месяцев. Достаточно удобно ориентироваться.

Заходим дальше в папки, выбираем нужную, нажимаем сначала «сжать», оно заархивируеться , потом кликаем «извлечь»

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

Уменьшение и удаление веса картинок с помощью Zoner photo studio

Я вам советую пользоваться программой Zoner photo studio.  Я пользуюсь ней уже более 5 лет. И она меня не разу не подводила. Так как у неё прекрасный и мощный функционал.

Скачиваем, открываем архив, берём все фото и открываем программу.

программа

Найдите свои подобные картинки с названием которых дописано, к примеру: «150х150» или «300х300».

Их смело удаляйте.

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

Как оптимизировать картинку ?

  1. Выберите фото и откройте программу Zoner.
  2. Зайдите в редактор.редактор зонер
  3. Редактирование ->> Изменение размеров..редактор2
  4. С правой стороны откроется такое окно. В нём вы должны будете указать нужные параметры для заданного фото. К примеру: длина и ширина фото, которое подходит под пространство текста на этом блоге составляет 530 на 280.

    редактор3

    *примечание. На фото показано изменение размеров в процентах. Вам же нужно поставить поменять на «пикселизацию».

  5. После этого нужно правильно сохранить фотографию, перед тем как залить её на блог. Для этого нажимаем на меню Файл ->> Сохранить WEB JPEG. Сохраняем..
  6. настройки сохранения
  7. Ставите размер до 50 кб. Это вполне достаточно. Впрочем, рекомендую делать всё как показано на скрине сверху. Нажимайте «Применить». И смело заливайте к себе на блог.

Сервис Kraken.io

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

Что я могу сказать о нём:

  • Он платный, но даёт пробный период бесплатного пользования.
  • Имеет английский язык.
  • Быстро сжимает файлы.
  • Гибкий и понятный интерфейс.
  • Присутствует синхронизация с Google, Dropbox и т.д

Как пользоваться ?

  1. Зайдите на сайт https://kraken.io/Кракен.ио
  2. Нажмите вверху на вкладку «Веб-интерфейс».сервис оптимизации изображений
    1. Загружаете фото либо архив.
    2. Выбираете режим оптимизации: с потерями или без.
    3. Изменяете размер изображения (опционально).
  3. Внизу в % Вам покажут результаты сжатия.

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

На этом сегодня всё! Как видите работы есть немного монотонной, но эффект для блога может оказать колоссальный.

Я считаю, один раз в 3-4 месяца нужно проводить такую профилактику для блога. Тем более память на дисковом пространстве не резиновая!

Как вы то сами оптимизируете изображения ? Если я что то упустил, напишите в комментариях, буду очень благодарен!

Видео на десерт:

С уважением, Дима Дочич

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

1 комментарий к записи “Оптимизация изображений. Как уменьшить вес картинки ?”

  1. Евгений:

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

Оставить комментарий