Валерий

минимум используют расширение webp, по большей степени стандартные png и jpg

Тут не в формате проблема... А в "обратной совместимости" движков, на которых сайты сделаны. Всем же нужно заявлять, как ВордПрессу: "системные требования - php 7.4, но наш движок прекрасно работает и на 5.6".

Возьмите, как пример, тот же ВордПресс. Самый популярный движок в мире! Чтобы добавить в него поддержку веппи, достаточно указать новый MIME тип webp. Вот только все изображения в нем обрабатываются через getimagesize. Поэтому, если сайт крутится на сервере, где php < чем 7.1, все webp каринки будут иметь ширину и высоту 0. То есть, отображаться не будут...
Вы думаете, ВордПрессовцы будут переписывать свой image.php, внедряя в него imagewebp (для php < 7.1), или придумывать костыли, как с поддержкой html5? Не будут! Во-первых, потому, что сколько там жизни осталось этим устаревающим php? А во-вторых, как мне поддержка ответила еще года полтора назад - "А зачем? Ведь есть множество плагинов". Заметьте, никто не говорит, что плагины эти - монстры. Они просто есть.
Вот и получается... ВордПресс, половина всех сайтов, если сам не напишешь (кода на страницу ноута размером, с созданием набора картинок по брейкпоинтам), то надо ставить плагин. Весом в половину всего ВордПресса. Который содержит в себе еще и инструменты для локального преобразования изображений из формата в формат. Ну кто таким заморачиваться будет?
Да... И это я ещё не говорил про кэширование и создание наборов (вдруг вы хотите своё творение со своего айФона видеть)...

Поэтому... Что-то мне подсказывает, что с остальными движками все примерно также. Если и есть где-нибудь веппи, то скорее всего ресурсы эти либо на голом html/php/&Co, либо владелец сам озадачился/внедрил...

P.S. Я сам считаю, что использовать webp надо (и использую). Поверьте, есть места в нашей необъятной родине, где мобильный интернет работает так, чтоб лучше бы его вообще не было. И это - в 300 км от Москвы. И я ещё, на пробу, эксперимент проводил: брал исходник nef и с одинаковой потерей качества преобразовывал в jpg и webp (80%). Разница в итоговом размере получаемых файлов просто потрясающая.

Две минуты поиска на wp.org:
https://wordpress.org/support/topic/5-3-throws-an-...
Объяснение причины + вариант "срочного разрешения" проблемы... Или можно подождать, пока разрабы пофиксят

Ещё вариант:
<div class="container"><a href="#">Text</a></div>

a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1.5rem;
  text-decoration: none;
  padding: 1.5rem 2.5rem;
  border: 1px solid white;
  border-radius: 4px;
  text-indent: 1.5rem;
  color: white;
  display: block;
  position: relative;
}
a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%);
  border-top: 1rem solid white;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}
a::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%);
  border-top: calc(1rem - 1px) solid #2aac65;
  border-left: calc(1rem - 1px) solid transparent;
  border-right: calc(1rem - 1px) solid transparent;
}

Codepen

Открываете в админке сайта
Настроить - Основное содержание - Хлебные крошки
и снимаете галочку у "Применить Breadcrumb"...

P.S. Простите, я уже применил o_O
Поиграйте с крыжиками в настройках хлебных крошек. Штука очень полезная и удобная; я бы её не отключал...

Попробуйте так:

// Include gulp
var gulp = require('gulp');

// Include Plugins
var sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps');

// Variables
var 
  source = 'source/',
  target = 'public/',
  styles = {
    'in': source + 'assets/scss/app.scss',
    'out': target + 'assets/css/'
  },

// SASS
gulp.task('sass', function() {
  return gulp.src(styles.in)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(styles.out));
});

Здесь в задаче sass стили берутся из assets/scss/app.scss, расставляются вендор префиксы, удаляются все пробелы/переносы строк и результат размещается в assets/css/
При этом создается карта (sourcemaps). Штука очень полезная при разработке: в инспекторе элементов будет показываться тот scss файл, из которого правило подтягивается. Если что-то не надо - просто удалите ненужную строку.

Отслеживание изменений:

// Watch tasks
gulp.task('watch', function() {
  gulp.watch(styles.in, gulp.series('sass'));
});

У вас, обратите внимание, в командной строке ругань о том, что задача отслеживания генерируется либо сериями, либо запуском задач параллельно. Можете просто свой массив включить в gulp.series. Саму задачу можно указать в кавычках, если ничего добавлять не будете, то можно убрать квадратные скобки