Оптимизация изображений — решаем проблему лишнего веса

Оптимизация изображений — решаем проблему лишнего веса

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

Оптимизация изображений и не только…

Первый шаг — оптимизация базы данных вашего блога. Об этом очень подробно рассказано в статье «Оптимизация базы данных – наводим порядок». Читаем и, естественно, наводим.

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

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

Чтобы плагин Hyper Cache приступил к работе, в файле config. php дистрибутива WordPress необходимо вставить небольшой фрагмент кода. Для этого, открываем данный файл на редактирование в программе Notepad+ и помещаем следующую строчку - define(‘WP_CACHE’, true); либо вначале, сразу после - /** Имя базы данных для WordPress */, либо в конце файла перед словами «Это все, дальше не редактируем» (как на моем блоге).

Вставляем код в файл config. php

Сохраняем изменения и закачиваем файл обратно на сервер.

Шаг третий — оптимизация файла стилей. Здесь у меня опыт, увы, плачевный. Использовала я сервис cssoptimiser. com, вернее, пыталась использовать. Первый вариант — в браузере Mozilla Firefox программа почему-то зависала, несмотря на то, что был указан полный путь файла и сам файл скопирован в окно Direct Input. В браузере Google Chrome сервис повел себя немного лучше, файл обработал, но результат – поменялись размеры и шрифты, шаблон стал слегка косеньким. Возможно, я что-то не учла, но там вроде и учитывать нечего – вноси данные и жди результата.

Меня такой результат не устроил и я восстановила исходный файл CSS, воспользовавшись резервной копией. Кстати, на одном из форумов я нашла конкретные цифры по итогам сжатия файла стилей – 12.5 — до и 8,1 – после. Ради 4.4 kb можно, конечно, и постараться, но я эту тему все-таки оставила на потом. Подправила сама явные пустоты, возникшие от моего же вмешательства, остальное пока подождет. Кстати, можно попробовать оптимизировать файл CSS еще на одном сервисе — codebeautifier. com, но это так – к сведению.

Оптимизируя изображения – экономим по полной

Теперь – шаг четвертый — изображения и их оптимизация. Есть по меньшей мере два варианта размещения изображений на блоге:

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

Вариант второй — вы помещаете картинки большого размера, шириной до 450 px, что, как мне кажется, делает страницу достаточно яркой и привлекательной. Особенно на блогах с двумя сайдбарами, где само поле для текста немногим больше, чем ширина размещаемых картинок.

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

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

Уменьшаем размер картинок

Попроще – это программа для оптимизации изображений Оптимизатор фотографий JPEG для WEB 1.1. Небольшая, но очень функциональная утилита для сжатия файлов изображений до нужного вам размера.

Оптимизатор картинок на блоге

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

В программе есть еще ряд дополнительных возможностей для коррекции изображений: настройка яркости, резкости и контрастности, а также возможность получить черно-белое изображение вместо цветного. Дополнительное удобство – возврат к первоначальному варианту, если что-то в результатах редактирования вас не устраивает. Программа работает только с изображениями в формате JPEG, и это, пожалуй, единственное серьезное неудобство. Хотя для своего блога я выбираю картинки исключительно в формате jpeg, поскольку для изображений, предназначенных для публикации в статьях, он наиболее распространен.

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

Оптимизируем изображения в Фотошопе

Оптимизация изображений в Фотошопе ничуть не сложнее, чем в программе Оптимизатор фотографий JPEG для WEB 1.1. Просто, у кого-то эта программа есть, а у кого-то ее нет. Но и установив Фотошоп к себе на компьютер, понадобится определенное время для того, чтобы разобраться, что там и к чему. Если вы видите Фотошоп не впервые — тогда поехали.

Оптимизатор картинок на блоге

Если у вас фотография, а не картинка из интернета – размер ее будет просто запредельный. Поэтому, первое, что нужно сделать – уменьшить его до приемлемых размеров. Для этого идем во вкладку Images – Images Size и уменьшаем размер фотографии в пикселях.

Допустим, исходный размер фотографии 2048 х 1536. Уменьшенный вариант — 450 х 338. Здесь еще стоит обратить внимание на то, нельзя ли как-то ее обрезать (кадрировать) без ущерба для изображения.

Обрезаем инструментом Кадрирование

Подопытную картинку я слегка подрезала снизу и получила размер 450 х 291. Уже лучше. Теперь идем File – Save for Web Devices, и в верхней части открывшегося окна выбираем вкладку 2up. Здесь перед вами появятся два варианта вашего изображения: неоптимизированный – сверху, и тот, который вы получите после оптимизации – снизу.

Оптимизация в Фотошопе

Что дальше? Справа в верхней части программы выбираем: JPEG, Medium и далее нажимаем Quality.

Выставляем необходимые параметры

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

Если в верхней части программы вы выберете не 2up, а допустим 4 up, то сможете сравнить качество оптимизированного изображения с нижней границей в 16 мб. Разумеется, разница ощутима, но, одновременно видя столько вариантов, легче, наверное, выбрать что-то приемлемое. Так что, выбрали, сохранили и забыли. Если вы планируете помещать на блог большое количество картинок, проделать данную процедуру надо обязательно, не откладывая на потом, на когда-нибудь, пока их у вас еще не так много. Я, как всегда, с оптимизацией картинок на блоге слегка припозднилась, спохватившись где-то на 30-й. И то результат после оптимизации показался мне достаточно весомым.

Вывод: для ускорения работы блога делаем все, что в наших силах – оптимизируем базу данных и картинки, ставим плагин Hyper Cache, особо смелые и продвинутые – сжимают файл стилей темы. Все это можно проделать под мелодию «Нас не догонят».

Если про оптимизацию картинок вы узнали сегодня из этой статьи, это значит, что подлежащих сжатию изображений на вашем блоге набралось уже достаточное количество. Можно, конечно, сделать все это вручную, а можно воспользоваться услугами плагина WordPress Bulk Smush. it, который совершенно самостоятельно отправит нужные изображения на сервер, сожмет их и оптимизирует после того, как вы нажмете на Run all my images through WP Smush. it right now. После оптимизации изображений вы получите информацию о размерах обретенной экономии. И все новые изображения, добавляемые на блог, плагин Bulk Smush. it будет оптимизировать автоматически, аккуратно отчитываясь о проделанной работе. На свой блог этот плагин я не ставила. Поскольку оптимизировать изображения по мере их публикации мне совсем не сложно.

И, напоследок, о скорости загрузки моего блога. Как и обещала, проверила его «шустрость» на всех четырех сервисах, о которых писала в предыдущей статье. Результаты абсолютно идентичны — такое чувство, что просто продублированы все предыдущие показатели. Так что я даже не стала делать скриншоты – зачем?


Карта сайта


Информационный сайт Webavtocat.ru