logo frelancera
Фриланс доступен всем
Главная » Блог фрилансера » Оптимизация изображений для сайта

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

Здравствуйте, уважаемые читатели! В сегодняшней статье я хочу затронуть довольно серьезную тему про оптимизацию изображений для сайта. И не так важно, работаете ли вы с сайтов на CMS WordPress или какой-либо другой платформой, в любом случае, если вы оплачиваете занимаемое место на хостинге (или выделенном сервере), то вопрос будет для вас безусловно актуальным.

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

Однажды, я уже писал о том, как настроить Вордпресс, чтобы правильно загружать картинки на свой сайт или блог (http://trudolove.ru/nastrojka-vordpress-ili-kak-pravilno-zagruzit-kartinku-na-sajt.html). Проверьте, на всякий случай, если та тема для вас также интересна.

И ещё, сразу сделаю небольшую оговорку, точнее предупреждение, в данной статье будет идти речь о изображениях форматов jpg (JPEG) и png. Если вы используете gif-ки, то для них данный вариант не подойдет! Да и, Windows по умолчанию прячет расширения файлов от простого пользователя (т.е вы можете видеть в проводнике только имя файла изображения), чтобы включить их необходимо поменять некоторые настройки. В частности, в Windows 10 это можно сделать в пару кликов, смотрите…

До:

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

После:

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

Видите, на первом скриншоте только имена файлов, а на втором к именам прибавились расширения после точек? Так Вы легко отличите jpg (JPEG) и png от gif и других.

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

Выгруженная с хостинга папка (за один месяц) до оптимизации весит 130Мб, после оптимизации 120Мб и это при том, что все картинки были созданы в фотошопе и там же уже оптимизированы.

Да, вы можете сказать, «что такое 10Мб разницы», но вдумайтесь на секундочку, а если у вас уже 100 таких папок – посчитайте, сколько будет лишнего объема, который вы оплачиваете?! Думаю, вы понимаете, о чем я…

Что ж, все предпосылки, предупреждения и примеры сделаны, можно переходить непосредственно к вопросу или методу оптимизации изображений перед их загрузкой на сайт (или оптимизацией уже загруженных).

Метод первый: Online сервис

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

Здесь все очень просто, переходите в Online сервис — https://imageoptim.com/online

ImageOptim-Online

В четвертой строке (Format) выбираете формат расширения файла изображения, в седьмой строке жмете на кнопку «Выбрать файлы» (можно выбрать сразу несколько, например, те что приготовлены для одной статьи) и рядом жмете кнопку «Отправить» — через несколько секунд (в зависимости от количества загруженного) получаете готовый результат. Для большего понимания можете запомнить размер файла до и посмотреть сколько будет после. Качество, при этом, практически не меняется, по крайней мере визуально это незаметно.

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

Метод второй: используем программы

Такой метод можно использовать, как для молодых сайтов, так и уже довольно увесистых. Единственным минусом метода можно назвать ресурсоемкость, но с оговоркой: если работать с небольшими объемами изображений (примерно до 100 шт), то справится даже слабенький ноутбук. И конечно, если вы будет работать с большим старым сайтом, то потребуется достаточно времени, в среднем работа оптимизации одной картинки в программе занимает от 1 до 30 сек.

На данный момент времени поддерживаются:

Программа для windows — https://sourceforge.net/projects/nikkhokkho/

Программа для windows

Программа для Mac (требуется macOS 10.9+) — https://imageoptim.com/mac

Программа для Mac

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

  • jpegoptim — утилита для оптимизации и сжатия без потери качества изображений в формате JPEG;
  • pptipng — это небольшая программа, которая позволяет уменьшить размер изображений PNG без потери качества.

Использование программы, в некоторой степени, еще проще, чем оптимизация в Online сервисе, потому что есть поддержка языка, установленного на компьютере и поддержка технологии Drag-and-drop (в переводе с английского означает буквально тащи-и-бросай; бери-и-брось). Смотрите как выглядит окно программы для Windows 10 на русском языке:

окно программы для Windows 10

А работа с данной программой даже проще простого: тащите и бросаете (перетаскиваете) на окно свои изображения прямо из проводника (explorer), жмете «Оптимизировать все» из меню «Оптимизация» (или CTRL+O (буква О)) и получаете готовый результат. А если, вдруг, что-то пошло не так, то заходите в корзину и восстанавливаете все не оптимизированные файлы (настройки по умолчанию). В общем-то, это и так написано в окне программе.

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

Понравилось? Поделись! Подпишись!

Присоединяйтесь к дискуссии! Отзывов уже: 3..

  • Уже отзывчивый!
    Ольга

    Сергей спасибо большое за статью нужную и полезную. Процветания вашему сайту ;-)

    Ответить
    • Главный тут
      Сергей Трутнев

      Вам спасибо за оценку, я стараюсь (хоть и так часто, как хотелось бы) давать людям действительно полезную информацию, особенно касающуюся WordPress сайтов.

      Ответить
      • Уже отзывчивый!
        Ольга

        Если будет ценная информация, то и народ будет читать и делится... Спасибо еще раз, вы меня всегда выручаете и помогаете, я это всегда помню!!! :oops:

        Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Никнейм *
Email *
Сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: