Форматы изображений: сравнение WebP, PNG, JPG и SVG
Выбор неподходящего формата изображения может замедлить загрузку страницы или ухудшить четкость графики. Вот как современные веб-форматы соотносятся по степени сжатия, поддержке прозрачности и четкости.
Файлы обрабатываются локально в Вашем браузере с помощью WebAssembly и HTML5 API. Они никогда не покидают Ваше устройство, что исключает загрузку на серверы или хранение сторонними сервисами.
Начинайте конвертацию мгновенно на собственном устройстве - без ожидания загрузки, очередей на скачивание и замедления со стороны удаленного сервера.
Пользуйтесь всеми доступными инструментами без создания учетной записи, оплаты тарифа и искусственных ограничений на размер файлов. Конвертируйте файлы так часто, как позволяют Ваш браузер и устройство.
Сравнение форматов и технические характеристики
| Выходной формат | MIME-тип | Характеристика | Тип |
|---|---|---|---|
| PNG Изображение | image/png | W3C-PNG | Растровый формат графики с поддержкой сжатия без потерь |
| JPG Изображение JPEG | image/jpeg | ITU-T-T81-JPEG | Формат хранения растровых изображений с потерями |
| WebP Анимированное изображение | image/webp | RFC-6386-VP8 | Высокоэффективный формат анимации |
| SVG Экспорт CAD-чертежа в | image/svg+xml | W3C-SVG | Векторное представление CAD-модели |
| HEIC Фотография | image/heic | ISO-IEC-23008-12-HEIF | Контейнер высокоэффективных изображений |
| AVIF Изображение | image/avif | AOMEDIA-AV1-AVIF | Формат файла изображений AV1 |
| PSD Документ Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Документ Adobe Photoshop |
| PSB Большой документ Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Документ большого формата Adobe Photoshop |
| WMF Метафайл Windows | image/x-wmf | MS-WMF-SPEC | Векторный формат метафайла Windows |
| EMF Расширенный метафайл | image/x-emf | MS-EMF-SPEC | Векторный формат расширенного метафайла |
| JFIF Изображение | image/jpeg | ITU-T-T81-JPEG | Формат обмена файлами JPEG |
| TGA Изображение | image/x-tga | TGA-SPEC | Растровое изображение Truevision Targa |
| PCX ZSoft | image/x-pcx | PCX-SPEC | Растровое изображение ZSoft Paintbrush PCX |
| PDF Документ | application/pdf | ISO-32000-2 | Портативный формат документов |
Технические спецификации и разбор кодеков
Быстрое правило выбора формата
Используйте WebP или AVIF для современных веб-сайтов (они на 30% меньше по размеру, чем JPEG, и поддерживают прозрачность). Используйте JPG для фотографий, где небольшие незаметные артефакты сжатия не имеют значения. Используйте PNG для скриншотов, элементов интерфейса и иллюстраций, требующих четкого попиксельного текста. Используйте SVG для логотипов и иконок, которым требуется бесконечное масштабирование.
Растровые и векторные изображения: почему SVG не размываются
Растровые изображения (JPG, PNG, WebP) состоят из сетки пикселей фиксированного цвета: при сильном увеличении они размываются или становятся пиксельными. SVG описывает линии, кривые и цвета математически, поэтому иконки и иллюстрации остаются четкими на любых экранах: от мобильных до 8K: даже при небольшом размере файла.
Миф: «Чем выше DPI, тем лучше качество изображения в интернете»
DPI (точек на дюйм): это параметр печати, который веб-браузеры полностью игнорируют. На телефонах и компьютерных мониторах резкость изображения определяется размерами в пикселях (например, 1920x1080) и плотностью экрана, а не встроенными метаданными DPI.
Альфа-прозрачность: PNG против WebP
Традиционный JPG совсем не поддерживает прозрачность: прозрачный фон становится сплошным белым или черным. PNG первым обеспечил корректную 8-битную альфа-прозрачность, но WebP теперь сохраняет такое же качество прозрачности при размере файла до 40% меньше.
0 байт загружено на внешние серверы. Вся обработка выполнялась локально в песочнице Вашего браузера.