В этой статье Мы собираемся перечислить типы изображений для веб-сайтов. Это проблема, на которую следует обратить внимание, поскольку она влияет на время загрузки страниц и дисковое пространство на сервере. Это пролог к другому, в котором мы упомянем инструменты Linux для подготовки образов.
Несколько дней назад я рассказал вам, что по просьбе старого друга я временно возобновил веб-разработку (деятельность, от которой я отказался, потому что терпеть не мог клиентов) и использую это, чтобы рассказать вам о различных решениях с открытым исходным кодом.
Типы изображений для сайтов
Сайт имеет два типа основного контента: текстовый и мультимедийный. Информация об этом контенте передается по сети в битовом формате, и браузер восстанавливает ее. отделение слов от изображений, видео или звука.
В случае с изображениями Используются разные форматы, содержащие информацию о расположении пикселей, цветах, размерах и алгоритме сжатия.
Наиболее часто используемые форматы изображений на веб-сайтах:
- АПНГ: Он был разработан Mozilla для предоставления возможностей анимации в формате PNG. Идеально подходит для анимации, которая не синхронизирована с другими ресурсами, например звуком. Он работает с гораздо более широкой цветовой палитрой, чем GIF.
- АВИФ: Его не следует путать с форматом видео AVI. Его название является аббревиатурой от формата изображения AV1, и он кодирует потоки битов AV1 в контейнер HEIF (высокоэффективный формат файла изображения). Он имеет лучшее сжатие с потерями, чем JPG и PNG, и лучшее сжатие без потерь, чем WebP. Поддерживает анимацию и прозрачность. В качестве отрицательного момента следует отметить то, что для просмотра изображение необходимо загрузить полностью, хотя это компенсируется более коротким временем загрузки.
- БМП: Я упоминаю классический формат образа Windows только для того, чтобы сказать вам, что вам никогда не следует его использовать. Хотя есть некоторые способы уменьшить их размер, они, как правило, получаются довольно тяжелыми.
- GIF: это формат, созданный для сжатия 8-битной графики без потерь. Он идеально подходит для простых анимаций и изображений на веб-сайтах, предназначенных для мест с медленным соединением, поскольку позволяет отображать полное изображение, но в более низком качестве, когда оно еще не завершило загрузку.
- JPEG: Это формат сжатия с потерями, широко используемый для фотографий, но не рекомендуется для графиков и диаграмм.
- PNG: Также широко используемый, он предлагает сжатие без потерь, отличную обработку прозрачности и более широкую цветовую палитру, чем GIF.
- свг: Вместо пикселей этот формат определяет изображения с помощью ряда команд, которые их создают. Он идеально подходит для графиков и диаграмм, требующих точного представления.
- ТИФФ: Это не широко используемый формат, поскольку он создает очень тяжелые изображения. Хотя это может быть полезно, если вы хотите встроить на сайт отсканированные изображения. Вы можете хранить несколько изображений в одном файле.
- Веб-сайт: Этот формат неподвижных изображений и анимации создает файлы меньшего размера со сжатием или без него, чем JPEG и PNF. Его также можно использовать для создания анимации. Хотя он поддерживается всеми современными браузерами, старые версии несовместимы.
Какое изображение использовать в каждом случае
- Фотография. Идеально использовать JPEG или WebP. В случае, если размер критичен, лучше использовать второй, если вы хотите обеспечить совместимость со старыми браузерами — первый.
- Значки: наилучшее соотношение совместимости и размера обеспечивает PNG. Также можно использовать WebP (учитывая, что его поддерживают только современные браузеры) ИЛИ SVG, если мы хотим использовать векторное изображение, которое мы покажем в увеличенном виде в другом месте сайта.
- Снимки экрана. Принимая во внимание, что в изображениях этого типа нам нужно, чтобы текст был виден, лучше всего использовать изображение со сжатием без потерь, например PNG или WebP. Вы можете проверить, как это выглядит, используя JPEG.
- Диаграммы и графики: Здесь, без сомнения, лучший вариант — SVG, хотя в качестве резервной копии можно поставить изображение в формате PNG.