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

Оптимизация изображения состоит из 3 основных частей:

  1. Использование правильного формата(ов) изображения
  2. Использование адаптивных изображений

В этой серии я рассмотрю каждую из этих тем, чтобы, надеюсь, к концу вы получили полное представление о том, как работают изображения в Интернете. В этой первой части рассказывается, какой формат вы должны использовать для своих изображений.

Есть 4 основных формата, которые вы должны знать:

JPG (или jpeg, это то же самое)

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

Есть также JPEG2000 и JPEG XR, которые были созданы после оригинальной спецификации jpg, чтобы улучшить ее, но поддержка браузеров настолько тонкая, что вам не следует использовать их в Интернете.

PNG

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

SVG

SVG расшифровывается как «масштабируемая векторная графика». SVG немного похожи на HTML, что делает их невероятно маленькими и универсальными. SVG можно редактировать с помощью CSS и анимировать разными способами. Их также можно масштабировать до любого размера, поскольку они не закодированы в пикселях (см. пример ниже). Если у вас есть возможность, обычно лучше использовать SVG для значков, логотипов и т. д., но часто (особенно при работе с иллюстрациями) вы застрянете с PNG и не сможете надежно преобразовать png в svg.

Вот как выглядит svg

ВЕБП

WEBP был создан Google в 2010 году как формат изображения для Интернета. Он поддерживает сжатие как без потерь, так и с потерями, поддерживает непрозрачность и обычно меньше, чем PNG и JPG. Это довольно удивительно и имеет достойную поддержку браузера (80% на момент написания статьи). WEBP всегда следует использовать с запасным вариантом, чтобы покрыть оставшиеся 20% (вы узнаете, как это сделать в следующей части). Это окажет огромное положительное влияние на ваш сайт, и ожидается, что поддержка будет только расти.

Как вы сжимаете

  • Если вы хотите сжать всего несколько статических изображений, используйте https://squoosh.app/. Это также позволяет вам экспериментировать с различными типами сжатия и видеть разницу в качестве и размере файла в режиме реального времени!
  • Если вам нужно сжать много изображений/динамических изображений, вы можете использовать что-то вроде sharp на вашем сервере, чтобы сжать ваше изображение до любого размера или формата, который вам нужен.
  • Кроме того, существуют такие сервисы, как Cloudinary, которые сжимают изображения для вас и распространяют их через CDN (который также обычно быстрее, чем ваш сервер).

Резюме

  • Используйте SVG для логотипов/иконок и т. д. или всего, что вы хотите анимировать.
  • Используйте WEBP для всего остального с JPG или PNG в качестве запасного варианта.
  • Используйте JPEG для фотографий (как запасной вариант для webp)
  • Используйте PNG для логотипов/иллюстраций и т. д., когда SVG недоступен (как запасной вариант для webp)

Первоначально опубликовано на https://dev.to 14 ноября 2019 г.