Содержание
- 01. Оптимизация без потерь
- 02. Правильные размеры
- 03. Сохранить для Интернета
- 04. Аудит и удаление изображений.
- 05. GIF и PNG
- 06. Понижение разрешения PNG
- 07. Правильный формат файла
- 08. Cache-Control: без преобразования
- Nginx
- Apache
- 09. CSS и SVG
- 10. Прогрессивные файлы JPEG.
Сегодня спрос на цифровые технологии сильнее, чем когда-либо. Существует множество подключенных устройств, а поскольку Интернет доступен повсюду, ясно, что нет недостатка в людях, желающих использовать наши продукты. Однако клиенты, которые терпят долгое время ожидания, встречаются гораздо реже, и в этом направлении еще предстоит проделать большую тяжелую работу.
Что такое DPI? Прочтите полное руководство по разрешению изображений, включая шпаргалку в формате PDF!
Пропускная способность неуклонно растет в развитых странах, но то же самое можно сказать об использовании Интернета в отдаленных районах, в общественном транспорте и при перегруженном бесплатном Wi-Fi. Как и внедрение браузера, доступ к наилучшим доступным технологиям доступен не для всех в любое время. Сегодня очень хорошо осознавать, насколько важно быть быстрым. Инструменты, мониторинг и ресурсы - лучшее, чем они когда-либо были, и финансовые последствия плохой работы хорошо известны. Тем не менее, месяц за месяцем вес веб-страниц продолжает расти.
Проблема во многих крупных организациях не в том, что команды разработчиков не знают, что нужно делать, а в том, что запросы на внесение в график улучшений веб-производительности уязвимы для снижения приоритета, когда заинтересованные стороны соревнуются за время разработки. Компании, которые они обслуживают, посвящают свое время другим занятиям, например, разработке новых функций.
Если вам нужно быстро повысить скорость работы вашего продукта, я рекомендую сделать оптимизацию изображений первым шагом по следующим причинам:
- Подавляющее большинство средней веб-страницы - это изображения (64 процента).
- Оптимизация изображений уменьшит размер файла больше, чем любой другой аспект средней страницы.
- Оптимизация изображений, возможно, самая простая задача веб-производительности, которую вы можете выполнить
- Оптимизация изображения без потерь оставляет изображение точно таким же, но уменьшает размер файла примерно на 20-40 процентов для PNG и на 5-20 процентов для JPEG.
- Его относительная простота означает, что вы можете быстрее отправить более быстрый продукт.
- Отправка улучшений, которые видят заинтересованные стороны и на которые вы можете ссылаться, поможет укрепить ваши аргументы в пользу приоритизации других оптимизаций.
Итак, теперь, надеюсь, вы убедились, я представляю вам некоторые методы, которые вы можете использовать, чтобы помочь оптимизировать использование изображений.
01. Оптимизация без потерь
Если вы не делаете ничего другого, что я предлагаю в этой статье, загрузите и используйте ImageOptim для OS X или FileOptimizer для Windows и Linux для пакетной оптимизации изображений. Эти приложения не требуют ничего, кроме того, что вы перетаскиваете папку с изображениями в приложение, прежде чем отправиться за чашкой кофе, пока они творят свое волшебство. Процесс не требует усилий, и то, насколько эти приложения уменьшают размер файла изображения - без каких-либо изменений в их внешнем виде - просто невероятно.
02. Правильные размеры
Использование неправильных размеров - это ошибка, которую сейчас совершают очень немногие, но о ней стоит упомянуть для полноты картины. В большинстве случаев это происходит при отображении эскиза большего изображения в другом месте.
img src = "threepwood-retina-2x-large.webp" width = "140" height = "84">
Использование изображения большего размера и установка его размеров с помощью кода быстро приведет к увеличению размера вашей страницы, особенно если учесть, сколько миниатюр на многих страницах есть на них.
Убедитесь, что фактическое изображение имеет те же размеры, что и область, в которой оно будет отображаться.
img src = "threepwood-140x84.webp" width = "140" height = "84">
Адаптивные изображения - это, конечно, другая история, но тот же принцип применяется, например, не к обслуживанию и масштабированию изображений Retina настольных компьютеров на мобильных устройствах. Для решения этой проблемы ReSRC.it - отличный сервис, который значительно упрощает этот процесс.
03. Сохранить для Интернета
Одна из самых важных вещей - найти золотую середину между размером файла и качеством при первом экспорте изображения. Каждые 10 баллов шкалы качества 0–100 при экспорте JPEG увеличивают размер файла на 30–50 процентов, поэтому, например, знание того, когда выбрать 70 вместо 80, даст вам больший выигрыш, чем может любой оптимизатор.
Переключайтесь между приближением и просмотром изображения в его естественном размере. Находясь близко, вы сможете оценить, насколько далеко вы можете увеличить значение, но области, которые вас могли беспокоить вблизи, могут быть не заметны при просмотре с естественным размером. Переключение между ними при настройке шкалы поможет вам найти оптимальную настройку.
04. Аудит и удаление изображений.
Хорошая идея - потратить некоторое время на использование продукта и анализ некоторых ранее принятых дизайнерских решений - действительно ли вам нужно каждое изображение?
05. GIF и PNG
PNG был создан как улучшенная, не запатентованная замена GIF. Пока вам не нужна анимация, PNG имеет те же практические цели, что и GIF, включая прозрачность, но с преимуществом меньшего размера файла (за заметным исключением таких вещей, как изображения размером 1 x 1 пиксель).
В зависимости от ваших предпочтений и количества имеющихся у вас изображений GIF вы можете либо повторно экспортировать их из графического приложения в формате PNG, либо использовать преобразование из ImageMagick для их пакетной обработки в командной строке. Как всегда, не забудьте после этого запускать новые изображения, которые вы создаете, с помощью оптимизатора без потерь.
06. Понижение разрешения PNG
Распространено заблуждение, что единственный формат изображения, обеспечивающий полупрозрачные пиксели, - это 24-битный PNG. Фактически, полупрозрачные пиксели могут быть достигнуты с использованием 8-битного PNG, и в качестве дополнительного бонуса они предлагают гораздо меньшие размеры файлов, чем 24-битные PNG. Вы можете субдискретизировать 24-битные PNG до 8-битных, используя ImageAlpha для OS X или PNGyu для Windows.
07. Правильный формат файла
Сегодня есть три основных формата растровых изображений на выбор: JPEG, PNG и GIF. Вот несколько указателей, которые помогут вам выбрать правильный формат:
- Если вам нужна анимация, выберите GIF с потерями.
- Если изображение является фотографией, выберите JPEG.
- Если вам нужна фотография с прозрачностью, выберите PNG с потерями.
- В противном случае попробуйте сначала 8-битный PNG, а затем вернитесь к JPEG, если вас не устраивает качество.
08. Cache-Control: без преобразования
Вы когда-нибудь замечали, что при доступе по мобильной сети ваши обычные изображения настолько сжаты, что качество ужасно? Это связано с тем, что некоторые операторы связи повторно сжимают ваши изображения, когда они проходят через их сеть, чтобы удовлетворить клиентов снижением затрат на пропускную способность и более быстрым просмотром.
Проблема в том, что это делается плохо и происходит независимо от того, было ли уже оптимизировано изображение. Отключить это и вернуть полный контроль над вашими изображениями - это простой вопрос, если ваш сервер включит заголовок ответа Cache-Control: no-transform при обслуживании изображений. Это можно сделать следующими способами:
Nginx
расположение ~ * . (png | jpg | jpeg | gif) $ {add_header "Cache-Control" "public, no-transform"; }
Apache
IfModule mod_headers.c> FilesMatch ". (Png | jpg | jpeg | gif) $"> Добавить заголовок Cache-Control "public, no-transform" / FilesMatch> / IfModule>
09. CSS и SVG
Если вы используете изображения для отображения относительно простых линий и форм, то замена их на CSS или SVG имеет множество преимуществ. Будучи форматами обычного текста, они могут иметь гораздо меньший размер, чем растровые изображения, и - в отличие от растровых изображений - при увеличении их размера не будет неровной или пиксельной графики. Их размер можно изменять, сохраняя при этом отличное изображение. SVG поддерживается всеми современными браузерами, поэтому не бойтесь попробовать.
10. Прогрессивные файлы JPEG.
Есть две основные стратегии загрузки JPEG. «Базовая линия» загружается от верхнего ряда пикселей вниз, а «прогрессивная» загружает полное изображение, которое сильно пикселизировано, а затем постепенно увеличивает его резкость. Компромисс здесь не столько в размере файла, сколько в воспринимаемой скорости. По этой причине я предпочитаю прогрессивный JPEG.
Вы можете использовать convert из ImageMagick для преобразования input.webp в прогрессивный JPEG с именем output.webp.
convert -strip -interlace Plane -quality 80 input.webp output.webp
Если вы хотите перезаписать input.webp вы можете просто установить это как выходной аргумент.
