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

Главная » Продвижение » Оптимизация изображений для сайта — ускоряемся до предела!
Самолетная 614022 Россия, Пермь +79630195620
Продвижение
Apple, seo
8060

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

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

В свое время я даже не задумывался о том, что можно как то оптимизировать изображения. Да и зачем? Ведь интернет широкополосный, безлимитный, картинки с сайтов грузятся моментально. Что даст уменьшение размера картинки на 20 килобайт? Да ничего!

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

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

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

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

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

Для оптимизации изображения в Photoshop, вам необходимо провести ряд несложных манипуляций. Заходите в меню Файл -> Сохранить для Web.

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

После чего видим окно с двумя вариантами изображений.

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

Верхнее — это изображение оригинал, нижнее — это то, что мы получим после обработки.

А теперь я вам покажу фокус. Смотрите на изображения и на стрелки на них.

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

Первая картинка — это сохранение при 100% качестве. Ее вес уменьшился на 85%.

Вторая картинка — это сохранение при 70% качестве. Ее вес уменьшился на 95%, при этом изображения выглядят идентичными.

А теперь представьте сколько времени пришлось бы потратить пользователю на загрузку картинки размером в 2 мегабайта, на мобильном устройстве. А если таких изображений в статье 5–10 штук? Вот почему важно оптимизировать изображения для сайта.

Но Photoshop инструмент не идеальный в вопросе массовой оптимизации изображений. Поэтому давайте переключимся на более специализированный софт.

PictureBeaver — друг для windows пользователя.

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

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

С программой работать очень просто. Открываете папку со скачанным скриптом, и перетаскиваете все изображения которые планируете оптимизировать, на файл optimize.wsf

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

После обработки изображений, появится папка с оптимизированными картинками, и файл отчета по каждой из них.

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

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

ImageOptim — друг яблоководов.

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

Я же свой выбор остановил на бесплатной утилите ImageOptim, так как с основной задачей она справляется на ура. А это — массовая оптимизация изображений для сайта.

Принцип ее работы отличается от PictureBeaver. Она не создает никаких новых папок с готовыми изображениями. Она просто заменяет оригиналы оптимизированными изображениями.

Выглядит она вот так:

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

Окно куда необходимо перетащить изображение.

Окно после оптимизации.

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

Как видите, программе удалось уменьшить общий вес на 24,8%

Первое изображение было уже оптимизировано в фотошопе. Второе нет.

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

Черкни и ты пару строк

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

Не забывайте делиться информацией с друзьями. Жмите на социальные кнопки!

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

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

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

  • Добрый день. Думаю вот стоит ли взять платный хостинг? Ведь бесплатный тоже подходит, проект небольшой. Но гуглу это не нравиться, показывает оценку быстродействия 57/100 (61/100 для мобильных). Как это отразиться на сайте в плане СЕО?

    • Масалкин Андрей

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

      На показатель быстродействия у google speed думаю сильно не повлияет. Обычно гугл пишет из-за чего тормоза. Нужно смотреть его рекомендации и убирать. Но фанатеть тоже не нужно и пытаться что бы то ни стало делать 100%.

      • Хотя да... 100 человек в день и сайт просто сдохнет. Нужно брать платный хостинг.

  • Привет, Андрей! Я оптимизирую изображения при помощи фотошоп, таким же образом, как описано у тебя. Стараюсь чтобы размер изображения не превышал 60 кБ.

    P.s. Кстати у тебя ссылка на PictureBeaver выдает страницу 404.

    • Масалкин Андрей

      Спасибо за наводку, автор убрал со своего сайта информацию о софте, перенес на гитхаб, сделал ссылку туда.

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

  • Юрик

    Если для Линукс, есть програмка Gimp (так же имеется версия для Винды). Она бесплатная, и в принципе неплохо сжимает.

    • Масалкин Андрей

      Знаком с Gimp но не очень мне понравился:)

      • Юрик

        Мне тоже сначала он не очень, но на Линуксе не было куда деваться и пришлось привыкнуть ... как говориться «Стерпится-слюбится» ))))))))))

        • Масалкин Андрей

          По какой причине Линукс выбрал?:) чем винда не угодила:))

  • Юрик

    Ну, винда у меня была разумеется не лицензия, и софт конечно же платный жизнь заставила почему-то скачивать бесплатно ... «не мы такие...» )))))), и в один прекрасный момент, решил установить бесплатное бесплатно... как-то уже поднадоели вирусняковые программы и вечный выбор антивирусника.

    Да, в начале пользования было некое неудобство, ведь все же ноутбук использую только для работы с сайтом, и как-то хотелось как-то время тратить на «привыкание», но, время свою работу знает)).

    Как для меня, сейчас меня Линукс полностью устраивает, все что на винде платно, доступно бесплатно, не все разумеется, пишу только за себя)))

    • Масалкин Андрей

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

  • Юрик

    Пожалуй соглашусь)))...

  • Безусловно, полезное знание. Обязательно займусь сжатием картинок для сайта, думаю, что буду использовать «дедовский» фотошоп.

    • Масалкин Андрей

      Если работаю в фотошопе, то что же его использую для оптимизации. А когда нужно массово сделать, то прибегаю уже к другим инструментам.

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение