Создание и продвижение сатйов
8 342 225 01 68 Пермь, ул. Нефтяников, д. 27, оф. 22
Продвижение сайтов

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

Время чтения статьи: около 4 мин.
Автор:
Масалкин А.В.
Опубликовано:
14 июля 2015 г.
Просмотров:
53

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

Конечно существует масса способов как ускорить свой сайт, но сегодня мы поговорим только об одном из них - это оптимизация изображений для сайта. Нет это не пресловутые метатеги - 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. Мобильный интернет растет, так что задумайтесь об удобстве для своих пользователей.

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

Отправляя форму, я даю согласие на обработку персональных данных