Оптимизация работы с изображениями c. Простой способ оптимизации изображений для публикации в интернете. Cжатие PNG без потери качества
Что делает наш модуль?Основная функция, максимально оптимизировать изображения, при этом практически не потеряв в качестве. Для чего это нужно?Причин несколько:Экономия свободного место на хостинге, т.к. как правило именно изображения "съедают" большую его часть.Соответствие требованиям PageSpeed Insights - требованиям по оптизимизации сайта, для его максимального ранжирования в поисковой системе.Увеличение скорости загрузки страниц, за счет уменьшения загружаемого траффикаК тому же:В июле Google запустит алгоритм Speed Update и обновит mobile-first индекс. В рамках этих обновлений скорость загрузки сайта и его мобильность станет серьезным фактором ранжирования.Проверить, есть ли у вашего сайта проблемы с размером изображений можно:здесьи здесь.Наш модуль OptiImg позволяет уменьшить размер изображений на сайте до 99% без видимой потери качества.Автоматическое сжатие изображений избавит вас от долгого и нудного пересохранения в сторонних приложениях.Никаких квот и ограничений, купите лицензию и конвертируйте столько файлов, сколько потребуется, без пополнений баланса и всяческих доплат!Уважаемые клиенты, обращаем ваше внимание, что лицензионный ключ дает возможность пользоваться нашим сервисом без ограничений, по истечению срока действия лицензионного ключа доступ к сервису будет возможен, но вы не сможете получать обновления для нашего модуля. Так же, обратите внимание, что при покупке продления, клбч в настройках модуля менять не требуется.Модуль работает по принципу "установил и забыл". Любое загруженное в инфоблок изображение будет автоматически сжато!Все изображения оптимизируются в 1 клик, все изображения загруженные в инфоблоки, медиабиблиотеку или при обмене с 1С - будут сжаты автоматически.На данный момент поддерживаются форматы JPEG и PNG.HTTPS - протокол поддерживается.PHP7 - поддерживается.Демо - период позволяет обработать 1000 изображений.Каждый день с помощью нашего модуля для 1C - Bitrix, обрабатывается до 500 тысяч изображений!Проверить уровень сжатия можно на сайте модуля.Обратите внимание, что модуль практически полностью написан на D7, на версиях 1С - Битрикс младше 16 - может работать некорректно. Как начать пользоваться?Чтобы упростить вам жизнь, наша команда всегда готова установить модуль на Ваш сайт под управлением 1С - Битрикс и произвести оптимизацию самостоятельно, для этого, после покупки присылайте запрос на наш e-mail - [email protected] c темой "Установка" , в теле письма укажите код купона и доступы к сайту на котором требуется произвести работы.Уважаемые клиенты!Не забывайте делиться своим опытом использования наших продуктов, оставляйте отзывы, пишите в обсуждения и на наш электронный адрес - [email protected], мы всегда рады вам помочь и получить обратную связь!
От АльфаГрупп
Купить: 2 000 1 800 руб.
Скриншоты
Описание
Технические данные
Опубликовано: 17.10.2015 Обновлено: 28.03.2019 Версия: 1.3.6 Установлено: Более 1000 раз Подходящие редакции: «Первый сайт» , «Старт» , «Стандарт» , «Малый бизнес» , «Эксперт» , «Бизнес» , «Корпоративный портал» , «Энтерпрайз» Адаптивность: Нет Поддержка Композита: НетОписание
Что делает наш модуль?
Основная функция, максимально оптимизировать изображения, при этом практически не потеряв в качестве.
Для чего это нужно?
Причин несколько:
- Экономия свободного место на хостинге, т.к. как правило именно изображения "съедают" большую его часть.
- Соответствие требованиям PageSpeed Insights - требованиям по оптизимизации сайта, для его максимального ранжирования в поисковой системе.
- Увеличение скорости загрузки страниц, за счет уменьшения загружаемого траффика
Проверить, есть ли у вашего сайта проблемы с размером изображений можно:
Наш модуль OptiImg позволяет уменьшить размер изображений на сайте до 99% без видимой потери качества.
Автоматическое сжатие изображений избавит вас от долгого и нудного пересохранения в сторонних приложениях.
Никаких квот и ограничений, купите лицензию и конвертируйте столько файлов, сколько потребуется, без пополнений баланса и всяческих доплат!
Уважаемые клиенты, обращаем ваше внимание, что лицензионный ключ дает возможность пользоваться нашим сервисом без ограничений, по истечению срока действия лицензионного ключа доступ к сервису будет возможен, но вы не сможете получать обновления для нашего модуля.
Так же, обратите внимание, что при покупке продления, клбч в настройках модуля менять не требуется.
Модуль работает по принципу "установил и забыл". Любое загруженное в инфоблок изображение будет автоматически сжато!
Все изображения оптимизируются в 1 клик, все изображения загруженные в инфоблоки, медиабиблиотеку или при обмене с 1С - будут сжаты автоматически.
На данный момент поддерживаются форматы JPEG и PNG.
HTTPS - протокол поддерживается.
PHP7 - поддерживается.
Демо - период позволяет обработать 1000 изображений.
Каждый день с помощью нашего модуля для 1C - Bitrix , обрабатывается до 500 тысяч изображений !
Проверить уровень сжатия можно на сайте модуля.
Обратите внимание, что модуль практически полностью написан на D7 , на версиях 1С - Битрикс младше 16 - может работать некорректно.
Как начать пользоваться?
Чтобы упростить вам жизнь, наша команда всегда готова установить модуль на Ваш сайт под управлением 1С - Битрикс и произвести оптимизацию самостоятельно, для этого, после покупки присылайте запрос на наш e-mail - [email protected] c темой "Установка" , в теле письма укажите код купона и доступы к сайту на котором требуется произвести работы.
Уважаемые клиенты!
Не забывайте делиться своим опытом использования наших продуктов, оставляйте отзывы, пишите в обсуждения и на наш электронный адрес - [email protected] , мы всегда рады вам помочь и получить обратную связь!
Отзывы (10)
Общая оценка: Всего отзывов: 10
Хорошее решение для оптимизации картинок
На момент 25,02,2019 решение полностью не рабочее, даже на их сайте http://www.optiimg.ru/ напрямую нельзя сжать изображение, оно зависает после загрузки.
Приносим свои извинения, решение рабочее, но именно на нашем хостинге оно не работает, проблема оказалась не в решении, а как уточнил человек из техподдержки "проблема лежит на уровне сетевых коммуникаций хостинговых центров". Сама техподдержка оказалась очень активной в решении нашей проблемы и лично вела переговоры с хостингом нашего сайта.
Модуль отличный!!!
Как ниже писали, присоединяюсь, да это единственное решение, о котором я не пожалела! Модуль работает шустро, не зависает. Почистила сайт на 3 гб. Было 5 гб стало 2гб.
Супер модуль, молодцы!) Рекомендую)
Отличная техподдержка и крутой модуль
Моментальная помощь техподдержки удивила, в воскресный вечер ответили сразу.
Модуль очень крут, давно искал подобное решение. Рекомендую!
Здравствуйте
Техподдержка работает мгновенно, через 10 секунд уже ответили в онлайн чате и ответили на вопросы! Программа огонь, особенно когда много картинок! Всем рекомендую!
Отличная тех поддержка
Возникли проблемы в работе модуля, обратился в тех. поддержку проблему решили очень оперативно, спасибо.
Хорошее решение
Отличное решение! Ребята все сами установили и сжали изображения на 40 %. Спасибо!
Пока единственное решение о покупке которого мы не пожалели
Пока единственное решение о покупке которого мы не пожалели. Очистили 5 гб.
Очень полезный модуль и прекрасная техподдержка!
Благодаря модулю удалось в два раза повысить скорость сайта, что очень важно для интернет-магазина с большим количеством изображений. Техподдержка помогла оперативно решить возникшие вопросы, терпеливо объяснила все тонкости.
Отличный модуль, отличная поддержка.
Приобрели модуль, тут же подключилась поддержка и все настроила. Благодаря оптимизации фото, Google PageSpeed ставит сайту на большинстве страниц оценку более 80 баллов. Всем рекомендую данное решение.
Отличный модуль
Протестировал сайт на google, оказались большие картинки. Думал как сделать оптимизацию. Нашлось простое и не дорогое решение. Ребята из тех поддержки сами установили, всё прописали, теперь при загрузке картинок работает автоматом всё сжимает до оптимальных размеров. Сразу поставил на второй сайт, очень доволен. Рекомендую.
Обсуждения (76)
Обсуждения (76)
Купил, оплатил, оптимизировал картинки. Все круто, за исключением одного глюка, который вызывает этот модуль. А именно, когда с морды сайта пытаюсь править товар вылезает фатал еррор
Детальная картинка:
Access to undeclared static property: Alfa1c\Optiimg\OptiImg::$_1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
#0: OptiImgEvents::CompressOnResize(array, array, NULL, string, string, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
#1: ExecuteModuleEventEx(array, array)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
#2: CAllFile::ResizeImageGet(array, array, integer, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
#3: Bitrix\Main\UI\FileInputUnclouder::getSrcWithResize(array, array)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
#4: Bitrix\Main\UI\FileInput->getFile(string, string, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
#5: Bitrix\Main\UI\FileInput->show(array, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
#6: include(string)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3
Вылезает не всегда, но оооочень часто. При этом иногда на одном и том же товаре сначала глюк есть, на второй-третий раз глюка нет.
Сергей Заботин, судя по тому, что название функции обфусцировано - вы продолжаете использовать демо - версию, удалите модуль полностью и установите заново, если ошибка сохранится - напишите нам на [email protected] мы вам поможем.
Какие у модуля имеются возможности, если изображения хранятся в "облаках"? Например, если это Selectel?
Насколько я понимаю, модуль сжимает и при загрузке, и при ресайзе, но не сжимает, если изображения уже находятся в "облаках"?
Что планируете в этом направлении?
Гаврил Скрябин, CMS в сторонние облака грузит файлы напрямую, на стороне облака наш модуль работать по понятным причинам не сможет, соответственно, только если вы предварительно файлы обработаете и потом переместите в облако.
С облаком битрикса работать будет, т.к. битрикс файлы в облаке актуализирует время от времени.
Добрый день
На какой период действует лицензионный ключ? (обновления)
Иван Прилепин, Обновления доступны в течении 1 года, доступ к серверу не ограничен по времени.
1.2.8 версия.
Роман Петров, Пишите нам на email, разберемся.
Купил оптимизатор год назад, тогда воспользовался очень мало, сейчас хотел снова использовать, но у меня вышла ошибка авторизации?! мне что заново его покупать?
Что мне его каждый год покупать ради 100 фотографий?
Роман Петров, Купить продление вы можете, если хотите обновить модуль, если версия модуля старшей 1.2.2, то обновление сделать придется, т.к. в этой версии был большой рефакторинг в ней же сменился сервер к которому наш модуль обращается. Если ваша текущая версия новее, то пишите нам на электронный адрес, [email protected] - разберемся, почему возникает ошибка.
Что нового
| 1.3.6 (28.03.2019) | Исправлены мелкие ошибки в событиях |
| 1.3.5 (15.03.2019) | Добавлен вариант более безопасной замены файла Переписан класс для работы с событиями |
| 1.3.4 (20.01.2019) | Добавлена анимация в прогрессбар Удаленые deprecated методы |
| 1.3.3 (12.06.2018) | Тест GPSI пернесен на страницу анализа |
| 1.3.2 (06.06.2018) | Мелкие исправления |
| 1.3.1 (05.06.2018) | Добавлена возможность проверить страницу в GPSI Опция сжатия через imageJpeg помечена как устаревшая, возможность включить удалена |
| 1.3.0 (24.04.2018) | Исправлены ошибки с кириллическими папками. Небольшие улучшения интерфейса |
| 1.2.9 (22.02.2018) | Добавлена корректная обработка ситуации, когда библиотека cURL не установлена на сервере. |
| 1.2.8 (24.01.2017) | Исправлена ошибка с правами доступа к модулю |
| 1.2.7 (14.12.2017) | Исправлена ошибка, при которой происходило переполнение временными файлами. |
| 1.2.6 (04.12.2017) | Улучшена стабильность |
| 1.2.5 (15.11.2017) | Изменен способ получения сжатого файла |
| 1.2.4 (30.10.2017) | Исправлена ошибка событий сжатия |
| 1.2.3 (25.10.2017) | Исправлены ошибки в языковых файлах |
| 1.2.2 (24.10.2017) | Изменения в структуре модуля Рефакторинг под D7 |
| 1.2.1 (22.10.2017) | Добавлена возможность задать порт Добавлен фильтр по ошибкам и возможность очистить лог обработки |
| 1.2.0 (20.10.2017) | Переписаны методы Улучшена производительность Добавлена многопоточность |
| 1.1.9 (17.10.2017) | Улучшена стабильность производительность Исправлены ошибки |
| 1.1.8 (03.10.2017) | Исправлена ошибка сохранения позиции Исправлена ошибка отсылки статистики |
| 1.1.7 (01.10.2017) | Большой рефакторинг модуля Модуль переписан под D7 Изменена структура класса Улучшена стабильность Улучшена производительность Удален устаревший режим файлового менеджера Добавлен корректный показ ошибок Исправлены мелкие ошибки |
| 1.1.6 (22.04.2017) | Небольшой рефакторинг кода под D7 Исправлена ошибка, при которой сжатие на лету могло не срабатывать, при определенных условиях. Добавлена возможность исключать директории |
| 1.1.5 (13.04.2017) | Исправлены баги Появилась возможность включить/отключить сжатие на лету в настройках модуля. ВНИМАНИЕ: если вы используете события сжатия в init.php, перед установкой данного обновления их необходимо удалить!. |
| 1.1.4 (21.03.2017) | Исключена необходимость использовать allow_fopen |
| 1.1.3 (19.02.2017) | Добавлена возможность вести лог Добавлена возможность проанализировать сайт перед запуском оптимизации. |
| 1.1.2 (14.02.2017) | Исправлена ошибка, привожившая к подмене изображений при установленной галке в инфоблоке, создавать изображение из детального даже если создано. |
| 1.1.1 (30.01.2017) | Добавлена возможность указать конкретную папку в упрощенном режиме Исправлена ошибка при которой не отправлялась статистика на сервер |
| 1.1.0 (30.01.2017) | Исправлена ошибка, при которой отправка файлов не прекращалась при отсутствующем ключе. Исправлена ошибка, при которой не сжимались файлы находящиеся в папке включающей пустые непустые подпапки. Добавлена возможность продолжать процесс, с последнего обработанного файла. Улучшена производительность. Статистика теперь отправляется при загрузке страницы модуля. |
| 1.0.9 (20.01.2017) | Исправлена критическая ошибка в режиме файлового менеджера. Исправлена ошибка засорения папки upload при неудачной обработке Добавлена возможность не вести статистику |
| 1.0.8 (15.12.2016) | Добавлена поддержка события OnAfterResizeImage для сжатия изображений, измененных с помощью метода ResizeImageGet. |
| 1.0.7 (14.12.2016) | Исправлена ошибка с шаблоном постраничной навигации |
| 1.0.6 (19.10.2016) | Исправлена работа с расширениями верхнего регистра. Добавлена возможность пропускать битые файлы в упрощенном режиме. |
| 1.0.5 (25.04.2016) | Новый интерфейс |
| 1.0.4 (16.02.2016) | Исправлены проблемы с отображением ошибок |
| 1.0.3 (14.02.2016) | Переработан интерфейс Добавлена возможность сжатия через функцию imagejpeg Исправлены баги Улучшены некоторые функции, добавлены новые |
| 1.0.2 (02.02.2016) | Добавлена постраничная навигация для разделов |
Установка
Установка стандартная из Marketplace.
Доступ к модулю осуществляется через раздел
Сервис -> Оптимизатор изображений либо по ссылке:
/bitrix/admin/optiimg_admin.php
Настройки модуля:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
Обратите внимание, что для работы модуля необходимо в поле "Ключ" ввести ключ полученный на почту после покупки.
Решение использует библиотеку cURL, как правило она включена по умолчанию, если нет, обратитесь за помощью к вашему хостеру, либо системному администратору.
Так же обращаем Ваше внимание, на то, что скорость работы напрямую зависит от скорости работы файловой подсистемы сервера и канала связи.
Также модуль умеет "на лету" сжимать изображения, например, добавляемые в элемент инфоблока. Для этого в настройках модуля установите галочки напротив и Сжимать изображения при ресайзе.
Поддержка
Как пользоваться нашим модулем правильно:
- Устанавливаете модуль из маркетплейс.
- Переходите по адресу /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
- Задаете качество сжатия, устанавливаете галочки Сжимать изображения при загрузке и Сжимать изображения при ресайзе, если ваш сайт работает по https протоколу то в поле порт вписываете 443 либо оставляете пустым.
- Переходите в файловый менеджер и удаляете папку /upload/resize_cache/
- Переходите в интерфейс работы с модулем /bitrix/admin/optiimg_admin.php
- Нажимаете кнопку Оптимизировать
Чем больше сжато изображение, тем быстрее загружается страница сайта на мобильном устройстве. Дальше мы разберем шаги, которые позволят сделать картинки оптимальными под любые устройства.
Сбалансированная оптимизация изображения
Проблема оптимизации изображений заключается в том, что нет никаких 100% правил. Оптимизация изображения — это всегда тонкий баланс между пользовательским опытом, привлекательностью и производительностью страницы.
Raluca Budiu, директор исследования Nielsen Norman Group, объясняет:
«Поскольку у мобильных устройств небольшой экран, слишком маленькие изображения дают слишком мало информации, а слишком большие изображения могут очень сильно замедлять страницу. Мы рекомендуем начать с картинки минимального размера и позволить пользователям увеличивать (или загружать увеличенную картинку).
В большинстве случаев у огромных изображений информационная плотность низкая, и людям приходится ждать загрузки страницы, и/или прокрутить страницу вниз для поиска контента».
Нет точных правил насколько маленькое должно быть изображение для мобильного устройства — это компромисс между качеством и размером страницы. Согласно httpArchive, средний JPG составляет 29 КБ, а средний PNG — 16 КБ.
Уменьшение веса изображения частично связано с сохранением его в соответствующем размере и разрешении (количество пикселей), и частично сжатием изображения. Некоторые инструменты, такие как Photoshop, позволяют некоторое сжатие, но часто их недостаточно, особенно с более крупными типами изображений, такими как PNG.
Ряд инструментов позволяют эффективно сжимать изображения по отдельности или по партиям изображений. Например, изображение домашней страницы, приведенное выше, было сжато с использованием TinyPNG, что привело к снижению веса на 79%.
Нужно ли использовать изображения разных размеров для мобильных устройств, планшета и рабочего стола?
При разработке сайтов для мобильных устройств, планшетов и настольных компьютеров, будь то через выделенные URL-адреса (site.com и m.site.com) или на разных сайтах через один URL-адрес (адаптивный веб-дизайн), подразумевается, что размер изображений должен соответствовать самому большому устройству в этой категории.
Такая позиция, не совсем подходит для адаптивного веб-дизайна (RWD). У RWD принцип состоит в том, чтобы обслуживать один и тот же сайт на разных устройствах, используя CSS для форматирования содержимого в соответствии с возможностями устройства и размером экрана.
Однако, это не означает, что веб-сайты должны обязательно применять однообразный подход к изображениям, говорит Alex Painter, консультант по веб-эффективности в NCC Group:
«Страницы часто медленны на мобильных устройствах из-за невозможности загрузки изображений, соответствующих размерам для окна просмотра. Может быть, отчасти виновата популярность RWD — идея о том, что один и тот же контент может быть изменен, чтобы макет работал в любом видовом экране, и может замаскировать тот факт, что изображения не были оптимизированы для мобильных устройств.
Множество сайтов загружают одни и те же изображения как на рабочий стол, так как и на мобильные устройства, — при этом мобильные версии просто уменьшаются в размерах. Пользователь высокопроизводительных устройств в быстрых и надежных сетях может это сразу и не заметить. Но это может сделать веб-сайты совершенно непригодными для людей с более слабыми мобильными устройствами, или с плохой связью.
.
У этой большой проблемы есть две причины. Первая: для доставки излишне большого изображения по сети требуется больше времени.
Вторая причина часто упускается из виду: мобильному устройству приходится серьезно потрудиться, чтобы: а) декодировать и б) масштабировать изображение. Это дорого стоит с точки зрения мощности обработки и памяти».
Но так не должно быть. Поддерживая Responsive Images Community Group, спецификация HTML упрощает разработчикам создание нескольких альтернативных изображений для разных типов устройств — для разных размеров экрана (просмотр), разрешений (количество пикселей) или возможности устройства.
HTML интернет-страницы сообщает браузеру, какое из этих изображений выбрать для экранов с максимальной шириной, и если изображение должно занимать всю или только часть ширины экрана.
Раньше некоторые разработчики использовали JavaScript для указания использования разных изображений, но использование элемента HTML
Alex Painter:
«Выбор правильного изображения для окна просмотра теперь достаточно прост. У нас были мультимедийные запросы CSS для фоновых изображений в течение некоторого времени, но до недавнего времени изображения, упоминаемые в HTML, были скорее проблемой.Теперь у нас есть характеристика чувствительных изображений: элемент
С атрибутом thesrcset, который позволяет определить, какое изображение должно быть выбрано, для какой ширины видового экрана (или разрешить браузеру сделать наиболее подходящий выбор из набора изображений).
Эта функция теперь очень хорошо поддерживается браузерами, и разработчики должны в идеале использовать ее, а не использовать JavaScript для достижения той же цели».
Кто использует изображения с откликом?
Быстрый взгляд на исходный код основных веб-сайтов, таких как Amazon, Facebook и BBC, подтверждает, что ни один из них еще не использует элемент
Получат ли они пользу, если станут его использовать? Обслуживание различных изображений на каждой платформе потенциально имеет ряд преимуществ:
- Позволяет веб-сайту показывать изображение большего размера с более высоким разрешением на рабочем столе.
- Уменьшает размеры изображения и общий вес страницы и тем самым ускоряет время загрузки.
- Позволяет мобильному сайту показывать увеличенное изображение на мобильном устройстве (обратите внимание на обрезанное изображение собаки выше).
- Розничные продавцы могут отображать Mobile-Friendly Hero Images на мобильных устройствах, придерживаясь традиционных снимков на больших дисплеях.
Поиск лучшего формата изображений
Как мы уже знаем, наиболее распространенный формат изображений, используемых на мобильных и дружественных им сайтах: JPEG 46%, PNG 28%, GIF 23% и SVG 1% по данным httpArchive.
Существует два типа веб-изображения: растр и вектор. Первое состоит из точек (например цифровая фотография), а второе состоит из линий и фигур. JPEG, PNG и GIF являются растровыми. SVG — вектор. SVG — это более новый формат, который не так широко используется (пока), но рекомендуется для адаптивного веб-дизайна (RWD).
Есть «за и против» для каждого типа изображений, и у каждого веб-дизайнера есть свое мнение и любимые форматы. В целом:
- JPEG чаще всего используется для веб-фотографий
- GIF характерен для анимаций, а также простых графиков, значков и логотипов
- PNG характерен для графиков более высокого качества, логотипов, значков и других иллюстраций и фотографий с графическими эффектами
- SVG хорош для графов и логотипов, заголовков страниц – то, что разработано иллюстратором.
Альтернативы традиционным изображениям
Веб-страницы состоят из множества небольших изображений, таких как значки и кнопки. Если они сделаны с использованием отдельных изображений GIF / PNG / JPEG, все это добавляет размер странице, и для каждого из них требуется индивидуальный запрос браузера, что может замедлить время загрузки страницы.
Существует три метода, которые могут помочь сохранить размер страницы и запросы изображения:
- CSS sprites – объединяют коллекцию меньшей графики в один файл CSS. Примечание: перегрузка спрайтов со слишком многими графиками или со слишком крупными — будет неоптимальна.
- Icon fonts — это библиотека значков, отправленных как один файл.
- Формы CSS– это формы, построенные с использованием CSS, а не как традиционное изображение.
Mike D’Agruma Lead Front-End Web Developer, E-volve Creative Group:
«Чтобы сохранить размер файла, я, как правило, не загружаю более крупные, более популярные библиотеки значков и использую Fontastic для создания собственных пользовательских шрифтов значков. Этот метод очень хорошо работает на разных уровнях: 1) Поскольку я использую только небольшое количество пользовательских значков, размер файла шрифта значительно меньше; 2) Иконки создаются с помощью SVG, что гарантирует, что они будут чрезвычайно четкими на устройствах; 3) Вы не можете превзойти этот вариант по гибкости, так как значки шрифтов очень легко настраиваются с помощью CSS.
Еще один отличный способ экономии времени, размера файла и запросов сервера — использовать CSS для создания фигур. Вы можете создавать большинство фигур и добавлять столько эффектов и переходов, сколько хотите с помощью CSS.
Возьмите мобильный сайт Summit County Metro Parks в качестве примера, в одном только разделе заголовка я смог использовать комбинацию символов CSS и значков шрифтов, чтобы создать то, что могло быть шестью разными изображениями. Активация меню для мобильных устройств показывает пример анимации в форме CSS (меню в стиле гамбургера, закрывается с помощью «X»), а использование дополнительного значка с правой стороны показывает открытое и закрытое состояния меню».
Методы веб-дизайна для улучшения времени загрузки
Что делать, когда вы уменьшили вес, удалили ненужные изображения и оптимизировали оставшуюся часть, но страница по-прежнему не загружается достаточно быстро?
Удостоверьтесь, что самый важный материал загружается первым, говорит Raluca Budiu:
«Когда страница загружается, убедитесь, что сначала загружается текст, чтобы люди могли начать сканирование содержимого. По мере загрузки изображений не перемещайте уже загруженный контент вокруг них — это заставит читателей потерять место на странице, где они были, а иногда они даже нажимают на неправильную ссылку, потому что их цель неожиданно сдвинулась».
Существует разница между предполагаемым временем загрузки и фактическим временем загрузки. Все, что имеет значение для пользователя, — это то, что контент, на который они смотрят или ищут, доступен. Они не хотят смотреть на пустой экран, в то время как браузер извлекает изображения, которые им не нужны.
Существует три распространенных метода для этого. Robert Gaines, разработчик веб-приложений в Канзасе, США, объясняет:
- Отсроченная или отложенная загрузка использует JavaScript для остановки загрузки изображений и других активов до тех пор, пока основное содержимое веб-страницы не закончит загрузку. Отложенная загрузка уменьшает время, затрачиваемое на первичный контент веб-страницы, но уменьшает необходимость сокращения изображений, которые в противном случае замедляли бы веб-страницу.
- Неспешная загрузка загружает активы, по мере их необходимости. Таким образом, содержимое сначала загружается над сгибом, а затем под сгибом, когда пользователь прокручивает. С галереями изображений, такими как поиск товаров на торговых сайтах, используются миниатюрные изображения, большие изображения загружаются только при нажатии соответствующего значка.
- Активная загрузка изображений сначала загружает картинки низкого качества во время визуализации веб-страницы, а затем заменяет их высококачественными изображениями после того, как загрузилось основное содержание. Активная загрузка картинок уравновешивает производительность с визуальной привлекательностью. В отличие от отложенной загрузки, она не заставляет пользователей ждать загрузки вторичных изображений после основного содержимого.
Такие инструменты, как Photoshop, позволяют сохранять изображения в виде прогрессивных JPEG или чередующихся PNG, которые будут загружаться описанным способом.
По словам сотрудников Яндекса, “картинки являются очень важной частью нашего поиска. Они помогают пользователям увидеть прохождение Венеры по диску Солнца, узнать, как выглядит йоркширский терьер или новый седан tesla, состав группы свинцовый цеппелин и как завязать галстук”.
Благодаря ранжированию в поиске по изображениям, сайт сможет получать значительную долю трафика. В том числе и по коммерческим запросам, когда пользователь хочет увидеть, как выглядит тот или иной товар. Кроме этого, такие положительные поведенческие факторы, как количество переходов, продолжительность и глубина просмотра сайта посетителями, пришедшими из поиска по изображениям, оказывают влияние и на ранжирование сайта в органическом поиске по всем запросам. А привлечение целевой аудитории на коммерческий сайт даже из такого источника, как поиск по изображениям, при грамотной подаче контента может привлечь на сайт значительное количество целевых посетителей, которые будут совершать конверсионные действия.
Просмотр изображений в сервисе Яндекс.Картинки
В материале пойдет речь о стандартных методах оптимизации изображений, применимых для всех типов сайтов и учитывающихся всеми поисковиками. Сейчас каждый из них будет рассмотрен более подробно, также будет дано расширенное описание каждого пункта рекомендаций с пояснениями.
Оптимизация изображений
Наличие на сайте качественных изображений — одна из составляющих успеха большинства интернет-проектов. Пользователи предпочитают получать информацию в виде графических образов, а не текста. Она быстрее и лучше воспринимается, проще запоминается. Для повышения конверсии сайта и улучшения поведенческих факторов необходимо постоянное развитие графического контента. Нужно стараться максимально визуализировать все аспекты и нюансы имеющейся информации. Таким образом пользователи захотят просматривать больше страниц сайта, им будет проще определиться с выбором и совершить конверсионное действие.
Польза от оптимизации изображений недооценивается многими специалистами. Однако благодаря несложным действиям можно получить отличный результат в виде лояльных пользователей, количество которых из поиска по изображениям, а также из органического поиска будет увеличиваться.
Атрибуты изображений alt и title
Важнейшими атрибутами изображений, которые можно указать в соответствующем теге HTML-кода, являются атрибуты alt и title. Их значения — одни из главных источников информации об изображении для поисковых систем.
Атрибут alt — это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута:
Изображение c заданным атрибутом alt
Без заданного атрибута alt изображение будет показано как пустое:
Изображение без заданного атрибута alt
Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения.
Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:
Изображение c заданным атрибутом title
Итак, рассмотрим основные рекомендации поисковых систем по работе с изображениями сайта, чтобы на их основе, а также на основе практики продвижения сайтов определить список действий, благодаря которым можно получить максимальный эффект от оптимизации изображений.
Не встраивайте значимый текст в изображения. Иными словами, все важные надписи должны быть в текстовой форме.
Давайте файлам изображений подробные, информативные названия. В названии файла лучше всего использовать 1-2 слова, описывающих изображение.
Вносите подробный текст в тег alt .
Оптимальный вариант:
Предоставляйте достаточно контекста для изображений. Окружающий изображение текст должен соответствовать тому, что на нем изображено.
Подумайте о том, как лучше всего защитить свои изображения. Это могут быть различные варианты, например, нанесение водяных знаков, размещение кода для вставки изображения на другой сайт, также можно сделать изображения доступными по лицензии, требующей ссылки на источник, например, лицензии Creative Commons.
Размещение фотографий хорошего качества. Качественные фото не только помогают пользователям увидеть все мелкие детали на изображении, но и лучше выполняют функцию уменьшенных картинок в результатах поиска, и с большей вероятностью будут нажаты пользователями.
Создать для каждого изображения отдельную целевую страницу, где будет собрана вся связанная с ним информация. Это актуально для сайтов, где изображения — одни из основных элементов контента, или для интернет-магазинов.
Старайтесь размещать изображения в верхней части страниц, где их можно увидеть сразу. Это позволит быстрее заинтересовать пользователя в просмотре страницы до конца.
Старайтесь структурировать каталоги таким образом, чтобы похожие изображения хранились вместе.
Укажите ширину и высоту всех изображений. Это позволит ускорить загрузку страниц, т.к. браузеры могут отображать их еще до загрузки изображений, если известны размеры места, которое зарезервировано для незаменяемых элементов.
Не забудьте о текстах, описывающих картинку:
- Подписи к картинкам (alt, title);
- Прилегающий к картинке текст;
- Имена файлов и скриптов, в том числе с учетом транслитерации и упрощенного подстрочного перевода;
- Тексты ссылок на картинки с других страниц и с других сайтов;
- Тексты и заголовки коротких документов, обрамляющих одиночную картинку.
Именно по текстам, которые относятся к картинкам, Яндекс находит изображения по запросам пользователей.
Яндекс индексирует картинки только стандартных графических форматов (JPEG, GIF и PNG). Перед загрузкой изображения на сайт стоит убедиться, что оно сохранено в одном из этих форматов.
На ранжирование также влияет качество самого изображения.
В результатах поиска для каждой найденной картинки показывается ссылка на страницу, на которой текстовое описание картинки лучше соответствует словам запроса. Таким образом, текстовый контент страницы — важный фактор ранжирования в поиске по картинкам. Как и в случае с Google, он должен содержать максимум информации о том, что изображено на картинке, а она должна дополнять текст.
Действия, которые необходимо выполнить для оптимизации изображений
1. Изображения должны храниться и открываться на том же сервере и хостинге, что и сам сайт. Это один из показателей качества сайта для поисковых систем. Только серьезные сайты и компании могут позволить себе хранить изображения на своем хостинге или сервере, т.к. это требует дополнительных материальных затрат. Кроме этого, такие изображения будут быстрее загружаться.
2. Использовать оригинальные высококачественные изображения с максимальным разрешением. Эти изображения, в свою очередь, должны обрабатываться системой управления сайта и показываться на соответствующих страницах в меньшем размере, чтобы страница быстро загружалась. При нажатии на изображение оно должно открываться в максимально возможном оригинальном размере, который только доступен.
3. Атрибуты alt и title у изображений должны быть заполнены таким образом, чтобы максимально точно описывать его содержимое. В них необходимо использовать 1-2 ключевых слова, под которые оптимизирована страница. Лучше всего, если это будет основное ключевое слово, совпадающее с заголовком страницы и анкором ссылки на нее из основного меню сайта.
4. Под изображениями разместить подпись, которая будет также показываться снизу при нажатии на него. Подпись может быть идентичной атрибуту alt. Подпись должна стоять в том же абзаце “P”, ячейке таблицы “TD” или теге “DIV”, что и изображение.
5. Страница, на которой размещено изображение, должна содержать соответствующий текст. Текст должен быть в том числе и о том, что представлено на изображении. Оно, в свою очередь, дополняет этот текст.
6. В атрибутах указать высоту и ширину изображения.
7. Переименовать файлы изображений, написав их транслитом. В имени файла в 1-2 словах указать то, что содержится в изображении.
8. К изображениям можно дополнительно добавить атрибут LONGDESC. Подробнее о нем: http://htmlbook.ru/html/img/longdesc.
9. В свойствах jpg — файлов оригинальных изображений заполнить следующие поля:
— Название: совпадает с атрибутом alt изображения;
— Тема: название раздела, к которому относится товар;
— Оценка: 5 звезд;
— Ключевые слова: keywords со страницы раздела, к которому относится товар;
— Комментарии: описание товара из поля «О товаре» со страницы товара;
— Размеры: максимальный оригинальный размер;
— Ширина: максимальный оригинальный размер;
— Высота: максимальный оригинальный размер;
— Горизонтальное разрешение: максимальное оригинальное значение;
— Разрешение по вертикали: максимальное оригинальное значение;
— Глубина цвета: максимальное оригинальное значение;
— Владелец: название компании;
— Компьютер: название компании.
Заключение
Как видно, советов и рекомендаций по оптимизации изображений от самих поисковых систем вполне достаточно, чтобы иметь общее представление о том, что нужно делать, чтобы сайт смог нормально ранжироваться в поиске по картинкам. Многие из рекомендаций пересекаются между собой, некоторые — уникальны. Чтобы реализовать большинство из рекомендаций, достаточно единоразовых действий, благодаря которым будет достигнут стабильный положительный результат. Не стоит пренебрегать возможностью получить значительное количество посетителей на свой ресурс. Всегда следует размещать как можно больше графического контента, благодаря которому сайт сможет завоевать доверие постоянных и новых посетителей.
Ilya is a Developer Advocate and Web Perf Guru
Изображения - те ресурсы, которые часто занимают много места на странице и весят больше всего. Благодаря их оптимизации мы можем значительно уменьшить количество скачиваемых данных и улучшить работу сайта. Чем больше сжато изображение, тем меньше пропускной способности канала занимает скачивание и тем быстрее браузер сможет показать страницу пользователю.
Оптимизация изображений - это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса. Чтобы выбрать оптимальные настройки для изображения, необходимо учесть много факторов: возможности формата, закодированные данные, качество, количество пикселей и т. д.
Удаление и замена изображений
TL;DR
- Удалите ненужные изображения.
- При возможности применяйте эффекты CSS3.
- Используйте веб-шрифты вместо кодировки текста в изображениях.
Прежде всего задайте себе вопрос: действительно ли это изображение необходимо? Хороший дизайн должен быть простым и не ухудшать производительность. Лучше всего просто удалить ненужное изображение, поскольку оно весит гораздо больше байтов по сравнению с HTML, CSS, JavaScript и другими ресурсами на странице. При этом одно изображение в нужном месте может заменить длинный текст, поэтому вам нужно самостоятельно найти баланс и принять правильное решение.
После этого вы должны проверить, нельзя ли достигнуть желаемого результата более эффективным путем:
- Благодаря CSS-эффектам (градиентам, теням и т. д.) и CSS-анимации вы можете создать ресурсы, которые четко выглядят при любом разрешении и масштабе и весят гораздо меньше, чем изображения.
- Веб-шрифты позволяют использовать красивые надписи, сохраняя возможность выбирать и искать текст, а также менять его размер. Благодаря этому работа с вашим ресурсом станет ещё удобнее.
Избегайте кодирования текста в изображении. Красивые надписи необходимы для качественного дизайна, продвижения бренда и удобной работы с ресурсом, но текст в изображении только мешает всему этом. Его нельзя выбрать, найти, увеличить, скопировать, а также он плохо смотрится на устройствах с высоким разрешением. Конечно, веб-шрифтам также требуется оптимизация, но они помогут избежать вышеперечисленных проблем. Для отображения текста всегда выбирайте именно их.
Векторные и растровые изображения
TL;DR
- Векторный формат отлично подходит для изображений из геометрических фигур.
- Качество векторных изображений не зависит от масштаба и разрешения.
- Используйте растровый формат для сложных изображений с множеством нестандартных форм и деталей.
Если вы решили, что для достижения результата вам следует использовать именно изображение, выберите для него подходящий формат:
Векторное изображение
Растровое изображение
- В векторной графике для отображения картинки используются линии, точки и многоугольники.
- В растровой графике индивидуальные значения каждого пикселя в прямоугольной сетке кодируются, и на их основе показывается изображение.
У каждого формата есть свои достоинства и недостатки. Векторный формат идеально подходит для изображений из простых геометрических фигур (например, логотипов, текста, значков и т. д.). Они остаются четкими при любом разрешении и масштабе, поэтому используйте этот формат для больших экранов и ресурсов, которые должны быть показаны в разных размерах.
Однако векторные форматы не подходят для сложных изображений (например, для фотографий). SVG-разметки для описания всех фигур может стать слишком много, но полученное изображение все равно будет выглядеть нереалистично. В этом случае вам стоит использовать растровый формат изображений, например GIF, PNG, JPEG или новые форматы JPEG-XR и WebP.
Качество растровых изображений зависит от разрешения и масштаба: при увеличении оно становится размытым и распадается на пиксели. В результате вам может понадобиться сохранить несколько версий растрового изображения в разных разрешениях.
Оптимизация для экранов с высоким разрешением
TL;DR
- На экранах с высоким разрешением один CSS-пиксель состоит из нескольких экранных пикселей.
- В изображениях высокого разрешения пикселей и байтов гораздо больше, чем в обычных.
- Техники оптимизации можно применять к изображениям любого разрешения.
Говоря о пикселях, следует различать экранные и CSS-пиксели. CSS-пиксель может соответствовать одному или нескольким экранным. Это сделано для того, чтобы на устройствах с большим количеством экранных пикселей изображение было более четким и детализированным.
Конечно, на экранах с высоким DPI (HiDPI) графика выглядит очень красиво. Однако, чтобы хорошо смотреться в высоком разрешении, наши изображения должны быть более детализированными. Но у нас есть решение: векторные форматы идеально подходят для этой задачи. Они сохраняют четкость в любом разрешении. Даже если увеличатся затраты на отрисовку мелких деталей, мы по-прежнему используем один независимый от размера экрана ресурс.
С другой стороны, с растровыми изображениями возникает гораздо больше сложностей, потому что они кодируют данные изображения в каждом пикселе. Таким образом, чем выше число пикселей, тем больше размер такого ресурса. В качестве примера рассмотрим разницу между фотографиями размером 100х100 CSS-пикселей:
Когда мы вдвое увеличиваем разрешение экрана, общее количество пикселей возрастает сразу в четыре раза: в два раза по вертикали и в два по горизонтали.
Подведем итог. На экранах с большим разрешением графика выглядят очень привлекательно, поэтому вы сможете создать хорошее впечатление о вашем сайте. Однако для таких экранов нужны изображения с высоким разрешением. Выбирайте векторные форматы, потому что они четко выглядят на любых устройствах. Если необходимо использовать растровое изображение, добавьте несколько оптимизированных вариантов ресурса (см. далее).
Оптимизация векторных изображений
TL;DR
- SVG - это формат изображений на основе XML
- SVG-файлы нужно минифицировать для уменьшения размера.
- Сжимайте SVG-файлы с помощью GZIP.
Все современные браузеры поддерживают формат SVG (Scalable Vector Graphics). Это формат изображений на основе XML для двухмерной графики. Разметку SVG можно встроить прямо в страницу или на внешний ресурс. В свою очередь, файл SVG можно создать с помощью любого ПО для векторного рисования или вручную в текстовом редакторе.
Пример выше отрисовывает простую круглую форму с черной границей и красным фоном. Она была экспортирована из Adobe Illustrator. Легко догадаться, что она содержит множество метаданных, например информацию о слоях, комментарии и пространства имен XML, которые чаще всего не нужны для отобрадения ресурса в браузере. В результате, следует минифицировать файлы SVG с помощью инструмента svgo .
Например, svgo уменьшает размер приведенного выше файла SVG на 58% с 470 до 199 Б. Кроме того, поскольку SVG - это формат на основе XML, мы может применить сжатие GZIP для уменьшения его размера при передаче. Убедитесь, что на вашем сервере настроено сжатие SVG-ресурсов.
Оптимизация растровых изображений
TL;DR
- Растровое изображение - это сетка пикселей.
- В каждом пикселе закодирована информация о цвете и прозрачности.
- Чтобы уменьшить размер изображения, компрессоры используют различные методы для снижения количества битов на пиксель.
Растровое изображение - это просто двухмерная сетка отдельных пикселей. Например, изображение 100x100 пикселей - это последовательно из 10 000 пикселей. В каждом из пикселей содержатся значения RGBA: красного (R), зеленого (G) и синего (B) канала, а также альфа-канала, или канала прозрачности (A).
Браузер устанавливает 256 значений (оттенков) для каждого канала, которые в пере счете занимают 8 битов на канал (2 ^ 8 = 256) и 4 байта на пиксель (4 канала x 8 бит = 32 бита = 4 байта). Таким образом, зная размеры сетки, мы легко можем вычислить размер файла:
- Изображение 100 x 100 пикс. состоит из 10 000 пикселей
- 10 000 пикс. x 4 Б = 40 000 Б
- 40 000 Б / 1024 = 39 КБ
Может показаться, что 39 КБ - это совсем немного для изображения размером 100x100 пикселей. Однако при увеличении размера файл будет весить гораздо больше, и на его скачивание придется потратить много времени и ресурсов. Сейчас это изображение не сжато. Что можно сделать, чтобы уменьшить его размер?
Один из простых способов оптимизации изображения - снизить глубину цвета с 8 битов на канал, выбрав палитру меньшего размера. Установив глубину в 8 битов на канал, мы получаем 256 значений для канала и 16 777 216 (2563) цветов. Может, стоит уменьшить палитру до 256 цветов? Тогда нам будет нужно всего 8 бит для всех каналов RGB и только 2 байта на пиксель, а не 4, как раньше. Нам удалось сжать изображения в два раза!
Оптимизировав данные в отдельных пикселях, обратим внимания на соседние пиксели. Оказывается, цвет таких пикселей на многих изображениях, особенно на фотографиях, часто похож. Благодаря этому компрессор может применять дельта-кодирование . Вместо сохранения отдельных значения для каждого пикселя можно указать только разницу между соседними пикселями. Если они одинаковы, то дельта равна нулю, и нам нужно сохранить всего один бит. Но это ещё не все!
Мы часто не замечаем разницы в некоторых оттенках, поэтому мы можем оптимизировать изображение, уменьшив или увеличив палитру для этих цветов. У каждого пикселя в двухмерной сетке есть несколько соседей, поэтому мы можем усовершенствовать дельта-кодирование. Сконцентрируетесь не на непосредственных соседях пикселя, а на целых блоках похожих цветов и закодируйте их с помощью разных настроек.
Как вы видите, оптимизация изображения становится все сложнее и интереснее. На эту тему ведутся научные и коммерческие исследования, потому что изображения весят много байтов, и развивать новые техники сжатия выгодно. Если вы хотите узнать больше, прочитайте или ознакомьтесь с конкретными примерами в .
Итак, как весь этот сложный материал поможет нам оптимизировать изображения? Повторим: нам не нужно изобретать новые методы сжатия. Однако нам нужно знать о ключевых аспектах вопроса: пикселях RGBA, глубине цвета и разных техниках оптимизации. Это необходимо, чтобы продолжить разговор о растровых форматах.
Сжатие данных с потерями и без потерь
TL;DR
- Учитывая особенности человеческого зрения, для изображений можно применять сжатие данных с потерями.
- Для оптимизации изображения используется сжатие данных с потерями и без потерь.
- Разница в форматах изображений - это отличия в том, как и какие алгоритмы этих сжатий применяются для уменьшения размера ресурса.
- Не существует самого лучшего формата или настройки качества, которые подошли бы для всех изображений. При сочетании разных компрессоров и ресурсов мы никогда не получим одинаковый результат.
Для определенных типов данных, например исходного кода страницы или исполняемого файла, крайне важно, чтобы компрессор не удалял и не менял первоначальную информацию. Из-за пропавшего или неправильного бита данных может быть полностью искажено или уничтожено значение контента файла. Однако другие типы данных вполне можно передать в приблизительном виде.
Из-за особенностей человеческого зрения мы можем не заметить отсутствия какой-либо информации о каждом пикселе, например мы не увидим различия между некоторыми оттенками цвета. Поэтому мы можем использовать меньше битов для кодирования некоторых цветов и благодаря этому уменьшить размер ресурса. Таким образом, стандартная оптимизация изображения состоит из двух основных этапов:
- Сжатие изображения [с потерями](http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями) , при котором удаляются некоторые данные пикселей.
- Сжатие изображения [без потерь](http://en.wikipedia.org/wiki/Lossless_compression) , при котором данные пикселей сжимаются.
Выполнять первый шаг необязательно. Точный алгоритм зависит от определенного формата изображения, однако учтите, что каждое изображение можно сжать с потерей данных. На самом деле, разница между форматами изображений, например GIF, PNG, JPEG и т. д., состоит именно в комбинации различных алгоритмов сжатия данных с потерей и без потерь.
Как лучше всего совмещать сжатие с потерями и без потерь? Это зависит от самого изображения и других условий, например баланса между размером файла и шумами. Чтобы получить четкое детализированное изображение, вы можете не применять сжатие с потерями. Если же для вас больше важен размер файла, смело используйте этот метод оптимизации. Единого варианта настроек для всех изображений не существует. Вы сами должны определить желаемый результат и принять решение.
При использовании сжатия с потерями, например JPEG, вы сможете выбрать настройки качества (вроде ползунка Сохранить для Web в Adobe Photoshop). Обычно это значение от 1 до 100, которое определяет применение алгоритмов сжатия с потерями и без. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
Note: Обратите внимание, изображения с одинаковыми настройками качества, но в разных форматах будут отличаться. Это происходит из-за разницы в алгоритмах сжатия изображения. Например, JPEG и WebP с настройками качества 90 выглядят по-разному. На самом деле, даже изображения в одном формате и с одинаковыми настройками качества могут отличаться в зависимости от использованного компрессора.Выбор формата изображения
TL;DR
- Выберите подходящий стандартный формат: GIF, PNG или JPEG.
- Попробуйте установить разные настройки для каждого формата (качество, размер палитры и т. д.) и выберите наиболее подходящие.
- Для современных клиентов добавьте ресурсы в форматах WebP и JPEG XR масштабированные изображения:
- Масштабирование изображений - один из самых простых и эффективных методов оптимизации.
- Если вы используете изображения большого размера, пользователь может скачивать лишние данные.
- Reduce the number of unnecessary pixels by scaling your images to their display size Снизьте количество ненужных пикселей, уменьшив изображение до отображаемого размера.
Помимо алгоритмов сжатия с потерями и без потерь, в форматах изображения поддерживаются другие функции, например анимация и канал прозрачности (альфа-канал). Таким образом, при выборе подходящего формата вам нужно учесть желаемый визуальный эффект и требования к сайту или приложению.
| Формат | Прозрачность | Анимация | Браузер |
|---|---|---|---|
| GIF | Да | Да | Все |
| PNG | Да | Нет | Все |
| JPEG | Нет | Нет | Все |
| JPEG XR | Да | Да | IE |
| WebP | Да | Да | Chrome, Opera, Android |
Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них некоторые браузеры поддерживают новые форматы WebP и JPEG XR, для которых доступно большее сжатие и дополнительные возможности. Итак, какой формат выбрать?
- Изображение должно быть анимированным? Тогда выбирайте формат GIF.
- Цветовая палитра GIF состоит всего из 256 цветов. Это недостаточно для большинства изображений. Кроме того, формат PNG-8 лучше сжимает изображения с маленькой палитрой. Таким образом, выбирайте GIF, только если вам требуется анимация.
- Нужно сохранить все мелкие детали в самом высоком разрешении? Используйте PNG.
- В формате PNG не применяется сжатие с потерей данных, не считая выбора размера палитры. Благодаря этому изображение сохраняется в самом высоком качестве, но весит гораздо больше, чем файлы других форматов. Используйте этот формат только там, где это необходимо.
- Если изображение состоит из геометрических фигур, конвертируйте его в векторный (SVG-) формат!
- Избегайте текста в изображениях. Его нельзя выбрать, найти или увеличить. Если текст необходим для создания дизайна, используйте веб-шрифты.
- Вы оптимизируете фотографию, скриншот или изображение похожего типа? Используйте JPEG.
- В JPEG используется комбинация сжатия с потерями и без потерь для уменьшения размера файла. Чтобы выбрать лучшее сочетание качества и размера изображения, попробуйте установить несколько уровней качества JPEG.
Определив подходящий формат и его настройки для всех ресурсов, добавьте дополнительный вариант в WebP и JPEG XR. Это новые форматы, которые пока не поддерживаются во всех браузерах. Однако с их помощью может значительно уменьшить размер файла. Например, WebP сжимает изображение на больше, чем JPEG.
Поскольку WebP and JPEG XR поддерживаются не во всех браузерах, вам надо добавить дополнительную логику в приложения или на серверы, чтобы отправлять пользователю соответствующий ресурс.
- Некоторые сети доставки контента предоставляют услуги по оптимизации изображений, в том числе предоставление файлов в JPEG XR и WebP.
- Некоторые инструменты с открытым кодом, например PageSpeed для Apache и Nginx, автоматически производят оптимизацию, преобразование и доставку соответствующих ресурсов.
- Вы можете добавить дополнительную логику приложения, чтобы определить клиент и его поддерживаемые форматы, а затем отправить оптимальный вариант ресурса.
Обратите внимание, что если вы используете Webview для отрисовки контента в нативное приложении, тогда вы можете полностью управлять клиентом и использовать только WebP. В приложениях Facebook, Google+ и т. д. используются именно WebP-ресурсы, так как они действительно повышают производительность. Чтобы узнать больше об этом формате, посмотрите презентацию WebP: Deploying Faster, Smaller, and More Beautiful Images от Google I/O 2013.
Инструменты и выбор параметров
Не существует одного идеального формата, инструмента или алгоритма оптимизации, который бы подошел бы для всех изображений. Чтобы получить наилучший результат, вы должны выбрать формат и его настройки в зависимости от контента, а также визуальных и технических требований.
| Инструмент | Описание |
|---|---|
| gifsicle | создает и оптимизирует GIF-изображения |
| jpegtran | оптимизирует JPEG-изображения |
| сжимает PNG без потерь | |
| pngquant | сжимает PNG с потерями |
Не бойтесь экспериментировать с параметрами компрессоров. Установите разные настройки качества, выберите подходящий вариант и примените его к другим похожим изображениям на сайте. Но помните: не все графические ресурсы нужно сжимать одним и тем же методом!
Масштабирование передаваемых изображений
TL;DR
Warning: A tag here did NOT convert properly, please fix! ""Размер изображения - это сумма пикселей, умноженная на число байтов, используемых для кодирования каждого пикселя. Оптимизация изображения сводится к уменьшения этих двух составляющих.
Таким образом, один из самых простых и эффективных методов оптимизации - убедиться, что размер отправляемого изображения не больше, чем его отображаемый размер в браузере. Ничего сложного, но многие сайты совершают серьезную ошибку. Они размещают крупные ресурсы, и браузеру приходится самому масштабировать и отображать их в более низком разрешении. Помимо всего прочего, это увеличивает нагрузку на процессор пользователя.
Отправляя лишние пиксели и предоставляя браузеру самому масштабировать ресурс, мы упускаем возможность оптимизировать количество байтов, нужных для отрисовки страницы. Обратите внимание, что при масштабировании не только уменьшается количество пикселей, но и меняется исходный размер изображения.
| Исходный размер | Отображаемый размер | Ненужные пиксели |
|---|---|---|
| 110 x 110 | 100 x 100 | 110 x 110 - 100 x 100 = 2100 |
| 410 x 410 | 400 x 400 | 410 x 410 - 400 x 400 = 8100 |
| 810 x 810 | 800 x 800 | 810 x 810 - 800 x 800 = 16100 |
Обратите внимание, что во всех трех случаях отображаемый размер всего лишь на 10 пикселей меньше, чем исходный. Однако чем больше первоначальный размер изображения, тем больше лишних данных приходится кодировать и отправлять. Даже если вам не удастся установить полное совпадение исходного и отображаемого размеров, вы должны максимально сократить количество ненужных пикселей.
Список методов оптимизации
Оптимизация изображений - это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса.
Помните о некоторых советах и техниках, которые помогут вам оптимизировать изображения:
- Выбирайте изображения в векторных форматах. Их качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.
- Минифицируйте и сжимайте SVG-ресурсы. Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.
- Выбирайте наиболее подходящие растровые форматы. Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.
- Пробуйте разные настройки качеств для растровых форматов. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
- Удаляйте ненужные метаданные. Многие растровые изображения содержат лишнюю информацию о ресурсе: геоданные, сведения о камере и т. д. Для их удаления используйте соответствующие инструменты.
- Масштабируйте изображения. Уменьшайте файлы на сервере, чтобы исходный и отображаемый размеры были практически одинаковы. Обратите особое внимание на большие изображения. Если их масштабирует браузер, производительность вашего сайта значительно снижается.
- Автоматизируйте. Используйте надежные инструменты и ПО, которые будут автоматически оптимизировать изображения на вашем сайте.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our . Java is a registered trademark of Oracle and/or its affiliates.
Обновлено Август 8, 2018
С каждым годом поисковые системы все жестче закручивают гайки во внешней оптимизации. И все больше внимания уделяют внутренним факторам сайта. Например скорость загрузки вашего сайта тоже влияет на рост ваших позиций в выдаче.
Конечно существует масса способов как ускорить свой сайт, но сегодня мы поговорим только об одном из них — это оптимизация изображений для сайта. Нет это не пресловутые метатеги — 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. Мобильный интернет растет, так что задумайтесь об удобстве для своих пользователей.
