Фото: Гатанасс
Изображения являются родным языком нашего мозга. В то время как нам потребуются годы, чтобы научиться говорить, читать и писать, мы обрабатываем изображения со дня своего рождения.
Это позволяет изображениям передавать сложные идеи намного быстрее, чем слова, даже тысячи слов . Они могут оживить веб-страницу и даже привлечь людей к чтению темы, которую они не беспокоили.
Цены
Тем не менее, в Интернете, изображения не приходят бесплатно. Изображения поглощают большой процент пропускной способности в мире, и это влияет на пользовательский опыт. Мы знаем, что каждая лишняя секунда загрузки страницы увеличивает показатель отказов, а также негативно влияет на ваш PageRank.
В этой статье мы обсудим много важных советов, которые помогут вам сэкономить время и трафик.
Выбор подходящего формата изображения
Давайте начнем с того, что вернемся к основам и рассмотрим основные плюсы и минусы каждого формата веб-изображений (даже если вы думаете, что знаете все это).
GIF
GIF — это формат файлов без потерь с поддержкой прозрачности и анимации. Максимальная палитра — 256 цветов. Не рекомендуется сохранять фотографические изображения с высокой степенью градации, поскольку они состоят из более чем 256 цветов. Однако он отлично подходит для логотипов, плоской графики и иллюстраций с небольшим количеством градиентов.
Анимационные способности GIF позволяют использовать его вместо коротких поясняющих видео.
PNG
Как и GIF, PNG также без потерь и поддерживает прозрачность. Однако встроенная поддержка анимации отсутствует.
Этот формат также подходит для небольших изображений или изображений, которые необходимо сохранить без потери данных. Изображения PNG могут быть сохранены в формате PNG8 или PNG24. PNG8 основан на палитре и может использоваться в качестве замены GIF, если анимация не требуется. PNG8 может поддерживать до 256 цветов.
Следует иметь в виду, что графическому приложению все еще свойственно экспортировать PNG-8 с 2-битной прозрачностью (т. Е. Пиксели либо на 100% непрозрачны, либо на 100% прозрачны), что может привести к появлению неровных краев. Лучшие редакторы используют градуированную 8-битную прозрачность при экспорте в PNG.
PNG24, с другой стороны, может поддерживать до 16 миллионов цветов. Вы можете использовать последнее для сохранения фотографических изображений, но более сложные изображения будут означать больший размер файла.
JPG
Наконец, формат JPEG или JPG подходит для фотографических изображений, где цвет может меняться от пикселя к пикселю. Этот формат может уменьшить размер файла с огромным запасом, но есть несколько предостережений.
Во-первых, JPEG — это формат с потерями. Это означает, что он сжимает изображения, выборочно отбрасывая данные. Это причина того, что это может значительно уменьшить размер файла, вам нужно найти компромисс между качеством изображения и размером файла. JPG также не поддерживает прозрачность.
Изображения JPEG могут быть в базовом или прогрессивном формате. Прогрессивный формат визуализирует изображение с более низким разрешением, а затем постепенно повышает его качество по мере того, как становится доступным больше данных. Этот формат также резервирует пространство макета на странице для изображения, что уменьшает переформатирование элементов страницы во время загрузки страницы.
При работе с JPG вы всегда должны сохранять свои оригинальные несжатые изображения отдельно. Повторное сжатие изображений JPEG приводит к кумулятивной потере качества, поскольку при каждом сохранении изображений отбрасывается больше данных. Гораздо лучше начать с несжатого исходного изображения.
Давайте сравним
Вот несколько изображений, которые показывают разницу в размере файла на разных изображениях: Простое плоское изображение в формате .gif Размер файла: 4,4 КБ
Простое плоское изображение в формате .png Размер файла: 8,5 КБ
Простое плоское изображение в формате .jpg Размер файла: 26,2 КБ
Фотографическое изображение в формате .png Размер файла: 350 КБ
Фотографическое изображение в формате .jpg Размер файла: 85 КБ
Как вы можете видеть, между первыми тремя изображениями нет существенной разницы, но размер изображения значительно увеличивается в формате JPEG для изображений с небольшими или отсутствующими цветовыми вариациями. В этом случае GIF обеспечивает наибольшую экономию пропускной способности.
Тем не менее, последние два изображения отличаются. Здесь формат PNG имеет гораздо больший размер файла. Это связано с огромным изменением цвета, и PNG не отбрасывает данные выборочно. Если вы не внимательно изучите изображения, вы не увидите большой разницы в качестве.
Приведенный выше пример ясно иллюстрирует, как вы можете сэкономить большую пропускную способность, просто выбрав подходящий формат изображения.
Имеет ли «Save for Web» реальную разницу?
Опция « Сохранить как … » в Photoshop всегда позволяла нам создавать изображения в формате PNG, GIF и JPG, но в последние годы у нас была опция « Сохранить для Web… » (а еще более недавно — «Извлекать активы»). Есть ли реальная разница?
Короче да, есть очень стоящий вариант.
Доступ к нему осуществляется через « Файл> Сохранить для Web… ». Этот интерфейс предоставляет множество опций, таких как оптимизация количества цветов в форматах PNG-8 и GIF и настройка качества в формате JPEG. Вы также можете установить значение размытия, которое может сэкономить еще несколько килобайт.
Имейте в виду, что, сохранив изображения таким образом, вы больше не сможете изменять отдельные пиксели. По этой причине всегда полезно создать резервную копию исходного изображения. Вот два приведенных выше изображения, оптимизированных с помощью опции «Сохранить для Web…».
Простое изображение в оптимизированном формате .png Размер файла: 3 КБ
Фотографическое изображение в оптимизированном формате .jpg Размер файла: 40 КБ
Относительная экономия на обоих этих изображениях составляет 32% и 53% соответственно. Это выгодно как для пользователей, так и для владельцев сайтов.
Обслуживание измененных изображений
Предоставление изображений с одинаковым разрешением пользователям с различными размерами экрана не является оптимальным. Конечно, это экономит время, но может стоить много дополнительной пропускной способности. Пользователи должны дольше ждать загрузки веб-страницы, а изображения, измененные с помощью CSS, не всегда хорошо масштабируются.
Для обслуживания различных изображений в зависимости от размера экрана вы можете использовать различные решения, такие как Adaptive Images или плагин jQuery, например HiSRC .
Существует три варианта изменения размера изображений.
Первый — изменить размер каждого изображения на вашем сайте вручную. Это может быть утомительным процессом. Затем вы можете использовать изменение размера браузера, чтобы изначально масштабировать изображение, чтобы оно идеально подходило для устройств с более похожими разрешениями. Например, гораздо лучше использовать CSS для изменения размера изображения с 400x300350x262800x600350x262
Если у вас нет проблем с некоторыми библиотеками, есть несколько довольно хороших решений. Это ничего не стоило бы с точки зрения денег, но вам придется потратить время на изучение библиотеки.
Две такие библиотеки на основе PHP — это phpThumb и WideImage . Как только размер изображения был изменен, вы можете позже использовать его кэшированную версию для ускорения процесса.
Третье и, вероятно, самое простое решение — использовать сторонние сервисы. Вам придется выложить несколько долларов, но если деньги не представляют большой проблемы, это может быть идеальным решением для вас. Одним из таких сервисов является imgix . Вы можете попробовать их услуги в течение одного месяца бесплатно.
Как избежать изображений в целом
Иногда вы можете полностью избежать изображений. Браузерная поддержка множества свойств CSS значительно увеличилась за последние пять лет. Вам больше не нужно использовать изображения для закругленных углов и базовые эффекты тени. Вы можете сделать еще один шаг вперед, заменив простые шаблоны на своих сайтах тщательно созданными CSS-градиентами.
Вот демонстрация CodePen с простым шаблоном, созданным исключительно в CSS. Размер кода 189B без префиксов.
Вот более сложный шаблон, созданный с использованием только CSS. Без каких-либо префиксов он составляет около 625B.
Еще много примеров можно найти в галерее шаблонов CSS Леа Веру . Этот подход гораздо более гибкий и определенно экономит пропускную способность.
Вывод
В этой статье я попытался осветить несколько важных моментов, которые могут одновременно улучшить пользовательский опыт и сохранить пропускную способность.
-У вас есть другие советы по экономии пропускной способности за счет оптимизации изображений? -Пожалуйста, поделитесь своими любимыми инструментами и мнениями в комментариях.