Base64 в WebP

Как конвертировать Base64 в WebP

1. Вставьте Base64 или полный URI data:image/webp;base64,.... Подойдёт и код, в котором он есть, например CSS url() или тег <img>.
2. Убедитесь, что в строке статуса написано Определено WebP, затем посмотрите превью и размеры над ним. Анимированный WebP в превью проигрывается.
3. Нажмите Скачать файл. Расширение уже выставлено в webp.

Три вида WebP

WebP – это контейнер RIFF, в котором сразу после метки WEBP идёт чанк одного из трёх типов. Метка стоит на фиксированном смещении, поэтому и тип оказывается на фиксированном месте в Base64:

Шесть символов между UklGR и XRUJQ кодируют размер файла и меняются от файла к файлу. XRUJQ (из WEBP) всегда стоит на позициях 12–16, а VlA4 (из VP8) – на 17–20. Тип выдаёт 21-й символ: I, T или W.

Тип стоит проверить, прежде чем передавать файл дальше. WebP без потерь вполне заменяет PNG. WebP с потерями уже лишился деталей, так что конвертация в PNG даст большой файл, а качество не вернёт. Расширенный файл может содержать несколько кадров; при конвертации в статичный формат останется только первый.

Проверить тип WebP в коде

Та же проверка на Python читает метку чанка, а для расширенных файлов – байт флагов:

import base64

def webp_kind(b64: str) -> str:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:4] != b"RIFF" or data[8:12] != b"WEBP":
        return "not WebP"
    chunk = data[12:16]
    if chunk == b"VP8 ":
        return "lossy"
    if chunk == b"VP8L":
        return "lossless"
    flags = data[20]
    parts = ["extended"]
    if flags & 0x10:
        parts.append("alpha")
    if flags & 0x02:
        parts.append("animated")
    return ", ".join(parts)

Для файлов WebP, записанных Pillow, функция возвращает lossy, lossless, extended, alpha для изображения с потерями и прозрачностью и extended, animated для анимации. См. также статью Base64 в Python.

RIFF не всегда означает WebP

UklGR означает только «RIFF». Аудио WAV и видео AVI начинаются так же и отличаются меткой в байтах 8–11. Декодер проверяет эту метку, поэтому для вставленного сюда WAV он сообщит «Похоже на WAV, а не на WebP» и предложит кнопку для сохранения в .wav. Воспроизвести его можно на странице Base64 в аудио.

Где встречается WebP в Base64

• Экспорт из canvas через toDataURL("image/webp", quality). Проверяйте результат: браузеры без кодировщика WebP молча возвращают PNG.
• API изображений и CDN, которые отдают WebP, если клиент его принимает. В поле с именем thumbnail_jpg может лежать WebP, если картинку запрашивал браузер.
• Встроенные заглушки и иконки в HTML и CSS, где WebP даёт строку короче, чем PNG или JPEG.
• Стикеры в мессенджерах: часто это WebP, иногда анимированный.

Если старая программа не принимает сохранённый файл, сравните SHA-256, показанный здесь, с хешем файла, который она получила. Если они совпадают, программа просто не читает WebP, и выход – копия в PNG или JPEG.

Вопросы и ответы