- Как перейти на формат WebP с минимальными изменениями сайта
- htaccess: показывать изображение webp вместо jpg или png, если webp существует, приводит к 404
- 1 ответ
- Webp htaccess не работает
- Новости интернет-рекламы за сентябрь 2021 года
- Почте Mail.ru исполнилось 23 года
- Отдаем .webp вместо jpg/png при помощи .htaccess
- Внедряем webp без боли
- Решение:
- Вариант для изображений minishop2:
Как перейти на формат WebP с минимальными изменениями сайта
Некоторое время назад появился новый формат для графических изображений — WebP. Этот формат обладает рядом преимуществ по сравнению с JPEG: поддерживает как сжатие с потерями, так и сжатие без потерь, а также прозрачность изображений (альфа-канал), и во многих случаях сжимает изображения эффективнее (на моих сайтах — изображения в WebP получаются 30-35% меньше). Но к сожалению, полностью перейти на этот формат пока не так просто. Во-первых, сейчас его полноценно поддерживают только Web-броузеры, работающие на основе WebKit, а Firefox и IE/Edge — нет. Во-вторых, исправить на уже существующем сайте расширения всех файлов с .jpg на .webp может быть весьма трудоемкой задачей. Но недавно я нашел интересное решение, которое предложил Vincent Orback на Github: использовать подмену JPEG на WebP с помощью mod_rewrite. Для этого добавим в .htaccess такие строки:
Работает это так: если броузер в заголовке Accept указал, что он принимает формат image/webp, то проверяем, есть ли на сервере файл с тем же именем, но расширением .webp, и, если да, отдаем его вместо запрошенного. Если нет — отдаем файл как обычно. Строка Header Append Vary Accept означает, что содержимое ответа может меняться в зависимости от заголовка Accept (это нужно для корректного кеширования на proxy-серверах).
Таким образом получаем, что в HTML-коде сайта менять ничего не требуется, а достаточно конвертировать файлы графики из JPEG в WebP. Если на сервере установлен пакет ImageMagic, то можно сделать это с помощью утилиты mogrify:
Из недостатков этого решения можно назвать разве что некоторое увеличение нагрузки на дисковую систему сервера из-за необходимости проверять существование двух файлов, а не одного.
Источник
htaccess: показывать изображение webp вместо jpg или png, если webp существует, приводит к 404
Я создал файлы * .webp, названные так же, как их исходный файл в формате png или jpg. Затем я добавил это в свой .htaccess:
Все файлы jpg загружаются нормально, например, /test/marc.jpg Если существует webp с таким же именем, подайте файл webp через url /test/marc.jpg
Это работает из файла webp. Но если я удалю файл webp, я получаю 404 на URL-адресе jpg или png. Даже старые URL-адреса в формате jpg или png выдают 404. Пример:
Http: //domain/marc.jpg обслуживает webp. Я тестирую это в Chrome с отключенным кешем. Когда я удаляю marc.webp, я получаю 404 на http: //domain/marc.jpg Почему? RewriteCond%
1 ответ
Эти две строки не ищут файлы, которые вы описываете:
В обоих случаях $1 относится к первому зафиксированному совпадению в RewriteRule, которым в данном случае является (.+\.(?:jpe?g|png)) . Если вы запросите «marc.jpg», вся эта строка будет соответствовать и будет помещена в $1 . Таким образом, две строки оцениваются как:
Если файл «marc.jpg.webp» существует, ответьте «marc.jpg.webp».
Поскольку это не так, правило запускаться не будет.
Вы хотели следующее условие:
Если файл «marc.webp» существует, ответьте «marc.webp»
Итак, вы хотите, чтобы $1 содержал только «marc» часть запрошенного файла; это просто вопрос перемещения закрывающей круглой скобки:
Это не объясняет, почему ваше правило работало и перестало работать, когда вы удалили файл. Я подозреваю, что у вас есть другое правило, которое запутывает ситуацию.
Источник
Webp htaccess не работает
- Поисковые системы
- Яндекс
- Каталоги сайтов
- Прочие поисковики
- Агрегаторы и доски объявлений
- Практика оптимизации
- Общие вопросы оптимизации
- Частные вопросы — ранжирование, индексация, бан
- Сервисы и программы для работы с SE
- Любые вопросы от новичков по оптимизации
- Ссылочные и пользовательские факторы
- Поисковые технологии
- Doorways & Cloaking
- Трафик для сайтов
- Поисковая и контекстная реклама
- Google Adwords
- Яндекс.Директ
- Тизерная и баннерная реклама
- Общие вопросы рекламы
- Монетизация сайтов
- Партнерские программы в Интернете
- Контекстная реклама
- Google AdSense
- Рекламная Сеть Яндекса
- Размещение тизерной и баннерной рекламы
- Общие вопросы
- Сайтостроение
- Веб-строительство
- Статистика и аналитика
- Доменные имена
- Администрирование серверов
- Хостинг
- Безопасность
- Usability и удержание посетителей
- Копирайтинг
- Социальный Маркетинг
- Вконтакте
- YouTube
- Facebook & Instagram
- TikTok
- Telegram
- Общие вопросы
- Общение профессионалов
- Семинары и конференции
- eCommerce, интернет-магазины и электронная коммерция
- Телефония и коммуникации для бизнеса
- Деловые вопросы
- Финансы
- Cчет в Яндекс.Деньгах
- Криптовалюты
- Инвестиции
- Экономика
- Правовые вопросы
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты — покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки — обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
- О сайте и форуме
- Самое разное
- Курилка
- Встречи и сходки
- Железо и софт
Новости интернет-рекламы за сентябрь 2021 года
Почте Mail.ru исполнилось 23 года
Когда создавал сайт решил картинки хранить в двух форматах 100х100 и 400х400, но после многочисленных переделок сайта пришёл к другим размерам 50х50, 180х180 и 400х400 Руки не как не доходили сделать ресайз картинок и вот наконец написал скриптик который сконвертил все картинки в нужный формат и до кучи решил попробовать webp.
Помогите составить правильный реврайт для .htaccess по замене картинки с webp на jpg если браузер клиента не поддерживает формат webp. Файл .htaccess будет лежать в папке с картинками jpg и webp. В интернете много примеров, но везде реврайтят с jpg на webp, вот например:
Мне надо наоборот с webp реврайт на jpg.
Источник
Отдаем .webp вместо jpg/png при помощи .htaccess
Формат .webp уже поддерживается основными браузерами: файрфоксом, эджем, хромом и аналогами, их совокупная доля на рынке превышает 75%, а значит есть смысл его использовать, чтобы изображения быстрее загружались.
Как это сделать? Существуют решения с
или определением поддержки webp при помощи джаваскрипта, добавлением класса .webp в и загрузки нужных форматов через css. Эти варианты требуют изменения разметки. Вместо этого можно обойтись всего лишь изменением конфига сервера.
Работает так:
- Сервер проверяет, поддерживает ли браузер пользователя webp (браузер указывает в это заголовках запроса).
- Если пользователь запрашивает изображение, то сервер проверяет, есть ли такая же картинка с расширением webp.
- Если есть, то отдает ее пользователю. Иначе отдает обычную.
Решение для .htaccess:
В диспетчере запросов будет виден только один запрос с изначальной картинкой, вместо которой будет отдан webp файл. В столбце Type будет указано «webp».
Существуют аналогичные решения: webp-detect (заодно есть конфиг для nginx и др.), WebP-images-with-htaccess.
Их особенность в том, что они не работают. В них для проверки существования файла с расширением webp используется
Источник
Внедряем webp без боли
Недавно начал работу над очередным проектом, и захотелось сразу добавить поддержку webp (раз такая поддержка уже есть в MODX из коробки). Задача несложная, но хотелось сделать все красиво, да так чтобы менеджеру не нужно было дополнительно эти изображения конвертировать.
По началу была выбрана тактика согласно ГОСТу, то есть просто использовать тег picture. Но уже на этом этапе уже начались проблемы:
- Верстка — в css были правила такого рода
- Этот тег не поможет, если используется background-image и другие варианты использования изображений в css
- Отображение больших изображений в лайтбоксах (fotorama, fancybox . )
Понимая что на этом проблемы не закончатся, решил поискать такое решение, которое позволит к примеру добавить ту же поддержку webp на уже существующих проектах, не боясь что поедет верстка.
Решение:
В качестве решения были использованы стандартные возможности веб-сервера (nginx или apache) для подмены изображений если у клиентского браузера есть такая поддержка.
Вариант для «контентных» изображений:
Пример конфига apache:
создаем файл .htaccess в папке со статикой (у меня это папка /static/ в корне)
Пример конфига nginx:
аналогично с предыдущим примером (вся статика лежит в папке /static/ в корне)
Вариант для изображений minishop2:
Для начала нам нужно в источнике файлов minishop2 добавить генерацию изображений в этом формате таким образом.
Нужно определится с размерами которые нам нужны. В качестве примера у меня используется только 1 размер превью с таким конфигом
я его дублирую, при этом к названию добавляю «webp» и указываю нужный тип файла для генерации, остальные параметры оставляю как есть, и у нас получается вот такой конфиг
Если нужны изображения нескольких размерах, тогда для всех проделываем аналогичную процедуру.
Ну и теперь при загрузки фото у нас автоматически будут сгенерированы изображения в двух форматах.
Существующие изображения нужно будет перегенерировать, инструкции для этого можно прямо в сообществе найти. Просто воспользуйтесь поиском.
Конфиг для apache:
создаем файл .htaccess в папке /assets/images/ с таким содержимым:
Источник