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

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

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

Так как же нам уменьшить размер всех картинок на сайте? Прежде всего эти картинки необходимо загрузить с хостинга к себе на компьютер, так как оптимизацию картинок мы будем делать посредством установленной на компьютер программы под названием XnConvert.Для того что бы подключиться к хостингу воспользуйтесь уроком про FTP доступ к хостингу. После подключения по FTP перейдите в папку wp-content и скачайте папку uploads к себе на компьютер. В папке uploads как раз и хранятся все изображения сайта, через админку wordpress их можно посмотреть в разделе «Медиафайлы».

Установка и настройка программы для оптимизации картинок XnConvert.

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

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

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

После того как Вы выбрали папку, можете переключиться на вкладку «Действия», на скриншоте выше видно что я выбрал 2 действия, какие именно сейчас покажу.Первое действие которое мы будем производить при оптимизации изображений и картинок — это удаление метаданных.Как я уже говорил в прошлый раз, метаданные это такая себе служебная информация, которая никак не отражается на самом рисунке, ну а все таки занимает какое то место.Удалив метаданные картинок, внешний вид их визуально не изменится.

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

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

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

При таких настройках общий вес картинок сократился в 2-2.5 раза к примеру прогнав одну папку которая предварительно до обработки весила 12 мб, то после обработки она стала весить 3 мб, и при этом качество осталось на нормальном уровне. Если Вы хотите более лучшего качества, тогда можете сделать обработку и указать вместо «Цветное» -> 24 бита.

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

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

Теперь смело можете нажать на кнопку «Преобразовать», и во вкладке «Состояние» проследить за ходом оптимизации картинок. Чем мне нравится эта программа, так это тем что вся обработка происходит очень быстро.449 Файлов обработалось у меня за 51 секунду, что очень быстро.

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

  • http://lenpro.org Александр

    Ну во-первых, хотел бы Вас поблагодарить за проделанную Вами работу. Как в отношении данной статьи, так в отношении всех уроков которые Вы описываете на своём сайте. Много из того, что Вами описано я испробовал и довольно таки успешно. Огромное Вам спасибо!
    Ну а по поводу данной статьи, я также решил испробовать, но к сожалению результат меня не обрадовал. Я уменьшаю размер картинок каждый раз перед загрузкой на сайт при помощи Photoshop. А именно, открываю в нем картинку (формат jpeg) и просто сохраняю заново. При сохранении появляется окно с параметрами jpeg, в котором я устанавливаю качество на 0 и сохраняю. В результате размер картинки уменьшается в разы (!!!) Например, картинка с размеров 4,3 Мб уменьшается до 380 кб. А при помощи программы описанной в данной статье программы эта же самая программа уменьшается до 1,3 Мб. Но все равно, огромное Вам спасибо и жду с нетерпением следующих уроков !!!

    • http://batumi.by Вардан

      В фотошопе есть по-другому оптимизировать картинки — «Сохранить для веб…» (alt+shitf+ctrl+s), тоже очень полезно и эффективно

  • http://emma-dekor.com Алина

    Спасибо огромное Все получилось Эффект потрясающий!!! Результат превзошел ожидания!!! ❗

  • http://nasslagdenie.ru Светлана

    Огромное спасибо.

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

    Низкий поклон.

  • Юрий

    Здравствуйте. Как повлияет на оптимизацию, если я ко всем картинкам в статье поставлю один и тот же тайтл и алт? Навредит ли это?

    • http://wpcreate.ru Артем Петрусенко

      Юрий, я не думаю что это благоприятно повлияет на оптимизацию!

      • http://mirpriroda.ru Игорь

        А не подскажете как уникализировать картинки?
        Спасибо

  • http://rashidagarifulina.ru/ Рашида

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

  • Алексей

    Спасибо БОЛЬШОЕ! Очень нужно то, что Вы делаете!

  • Wasija

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

  • http://klyshko.ru/internet-v-nashej-zhizni/ Олег Клышко

    Надо воспользоваться данной програмой. Нет у вас статьи как добавлять ключевые слова к картинкам? Как правильно их оформлять под сео оптимизацию?

    • http://batumi.by Вардан

      Есть плагин SEO Friendly Images, который автоматически подставляет альты и тайтлы к картинкам. Это более чем достаточно. Можно настроить простановку атрибутов к картинкам, чтобы не было много дублей.

      • http://klyshko.ru/internet-v-nashej-zhizni/ Олег Клышко

        Спасибо Вардан за помощь, а вы пользуетесь этим плагином? Как быть если в одной статье нексколько картинок и я их хочу заточить под нексколько ключей, плагин так сработает?

        • http://batumi.by Вардан

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

          Есть второй вариант, но сложнее. Написать запрос sql для phpmyadmin

          • http://klyshko.ru/internet-v-nashej-zhizni/ Олег Клышко

            Спасибо за плагин установил все работает

        • http://batumi.by Вардан

          Успехов!

  • http://azov-arsenal.com.ua m9lf

    Спасибо за программу просто спасла. ❗

  • Akira Tsukizawa

    Весил шаблон 868 Кб, после программы 364 Кб ➡ Спасибо

    п.с. Последний смайл за линию выходит 🙄

  • http://weinard.in.ua Артур

    а как быть, если png изображения с прозрачным фоном? программа заменяет его на черный

    • http://govnogames.com/ Павел

      Тоже интересует вопрос, т.к. более 50% картинок на моем сайте именно в png с прозрачным фоном. Это необходимость. Как выходить из ситуации?

      • http://iscusstvotorgovli.ru Сергей

        Это классный вариант, но я применил другой. Я поставил себе плагин для оптимизации картинок и получил отличный результат. Название плагина EWWW Image Optimizer. Он оптимизирует и конвертирует изображения не только новые, но те которые уже есть. ❗ ❗ ❗

    • Денис

      Не ужели ни кто не поможет, что делать?

  • http://tvoya-rabota-doma.ru Алексей

    Спасибо большое за материал! Я пока работаю над своим блогом на localhost, но интересуюсь каждой мелочью. Попробовал с картинками — всё получилось. Отлично! Уверен, Что и другие Ваши статьи будут мне очень полезны, когда переносу свой сайт на нормальный хостинг! Ещё раз СПАСИБО!

  • tvent

    спасибо