Оптимизация картинок на сайте

Доброго времени суток, дорогой читатель! Уверен, что Вы уже пробовали свой сайт на скорость загрузки при помощи «PageSpeed Insights», что находится тут: https://developers.google.com/speed/pagespeed/insights/. И, конечно же, Вам Google рекомендовал оптимизировать картинки, что расположены на Вашем Интернет проекте. Что такое «оптимизация картинок»? Это снижение веса, без значительной потери качества фотографии или без потери качества вообще. Многие фотографии, сделанные современными цифровыми фотоаппаратами весят в среднем восемь мегабайт, такие фото можно сжать до одного мегабайта (а то и меньше), качество при этом не пострадает, а если уменьшить картинку в габаритах, то она будет весить еще меньше. Что дает оптимизация изображений? Она дает всего одно – это снижение веса. Интернет страница с картинками, которые мало весят, загружается куда быстрее, чем страница с картинками, которые весят по пять мегабайт. Пользователю не придется ждать, когда же загрузиться страница, так как она буквально влетает в компьютер пользователя. К тому же, место на сервере, где расположен Ваш сайт не «бездонное». Если пользователи будут загружать фотографии сделанные цифровиками без оптимизации, то вскоре Вам понадобиться увеличивать место, а это дополнительная трата денег. Как Вы уже поняли, сейчас пойдет речь о оптимизации картинок.

Если на Вашем сайте не много картинок, они не обновляются и их не добавляют, то их оптимизировать можно при помощи софта, например, «ФотоШоп» или специальными онлайн сервисами, например, http://resizepiconline.com/. При необходимости выбираем качество, размер картинки и формат. Можете попробовать и увидите, как из трех мегабайт можно выкинуть пару без потери качества. Операция по оптимизации будет выполнена всего один раз, это навсегда! Если на Ваш сайт постоянно загружаются новые фотографии, тут не обойтись без автоматического (программного) сжатия. Можно конечно, наложить разного рода ограничения, чтобы пользователи сами сжимали фото перед загрузкой, но это доставляет неудобства им и, скорее всего большая часть пользователей «плюнут» на сайт с такими «выкрутасами». По этому программное сжатие остается единственным верным решением.

Приведу пример, как можно сжимать фотографии на языке программирования PHP. Для этого я буду использовать класс «Imagick», о котором можно почитать на официальном сайте PHP: http://php.net/manual/ru/class.imagick.php. Есть недостаток (куда ж без него), данная библиотека работает только с расширением «.jpg/.jpeg». С форматом «.png» можно схитрить, пересохранить его в «.jpg», с «.gif» можно поступить так же, но если картинка анимированная, то этот вариант не уместен.
Вот сам код (для понимая, прокомментировал все строки):

«$img» — полный путь и название изображения.
Название сжатого изображения можно изменить в последней строке: «’compress_’ . $img», можно оставить оригинальное имя, тогда картинка будет автоматически заменяться на новую, сжатую. Чем ниже качество фотографии, тем меше вес файла. Думаю, более подходящая для сжатия цифра будет от 70 до 80, в зависимости от оригинала, цифру можно сделать еще меньше, особенно для фотографий, что весят около пяти мегабайт. Очень старые фотографии можно сжимать с установленным параметром от 50 до 70, разница в качестве не должна быть заметна.

Еще один вариант сжатия изображения, без потери качества вообще, путем удаления матаданных файла. Такие данные служат для информировании пользователя о устройстве, которым фотографировали, дата создания изображении, какие-то комментарии и так далее. Не думаю, что Вашим пользователя нужна вся эта информация. Приведу простой пример, как это можно сделать на PHP + Imagick (код прокомментировал):

«$img» — полный путь и название изображения. Опять же, работа для «JPEG».

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

Добавляем:

Готово!

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

Напоследок хочется сказать, что изображения больших размеров, например 3800 на 2900 пикселей, не получиться ужать до менее, чем двести килобайт, без значительной потери качества. Такие фотографии все ровно будут занимать большую часть места, и влиять на загрузку страниц. Тут могу посоветовать: не вставлять картинки таких размеров на страницу, а делать «превью» (маленькая картинка – «представительница» картинки больших размеров). Пользователь будет видеть картинки размером ~двести — ~триста пикселей, и если ему захочется посмотреть картинку в полном объеме, то он кликнет на превьюшку и в новой вкладке (или вторым слоем (как Вам сделаете)) откроется оригинал. Удобно и практично!

На этом у меня все. Если Вам есть, что добавить или остались, какие-то вопросы, пожалуйста, пишите комментарий, постараюсь ответить всем.
Спасибо за внимание! До новых встреч!

 

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *