Топ-100 Изображения на сайте - JPG, GIF, PNG, SVG - Разработка сайтов на WordPress
Изображения на сайте - JPG, GIF, PNG, SVG

Изображения в интернете – виды и использование

Есть в основном три типа изображений, используемых в Интернете: GIF, JPEG и PNG. Сейчас набирает популярность и другой тип – SVG, о котором мы еще поговорим. В этой статье мы рассмотрим специфику каждого типа изображения, а также случаи, когда его целесообразно использовать.

GIF: графика и анимация изображений

GIF (Graphics Interchange Format) – это графический формат, который сжимает растровые изображения с максимума до 256 цветов. Если исходное изображение содержит менее 256 цветов, то сохранение его в формате GIF будет без потерь. Это означает, что оригинал и GIF будут выглядеть точно так же.

Один из разрешенных 256 цветов может быть помечен и использован как прозрачный: при этом часть изображения может просвечивать, и можно будет увидеть часть изображения, например, цвет фона или другое изображение, помещенное под изображение GIF и т. д. Формат GIF позволяет использовать несколько изображений, которые должны быть сохранены вместе в одном файле анимации. Такие файлы называются анимированными гифками, и вы, возможно, видели много таких (например, анимированные смайлики).

Как заработать на своем сайте

пример gif анимации

Когда графический файл большой и медленно загружается, можно использовать небольшую хитрость, чтобы создать иллюзию того, что изображение загружается быстрее. Для этого GIF записываются как чересстрочные (interlace). Вместо того, чтобы загружать изображение построчно сверху вниз, сначала загружается более грубое, более размытое изображение, которое постепенно приобретает четкий контур. Когда общий вид изображения становится понятным с самого начала, у пользователя создается впечатление, что изображение загружается быстрее.

Недостатком формата GIF является плохое сжатие плавных цветовых переходов. Такие изображения обычно представляют собой изображения, для которых более подходит один из следующих двух типов изображений: JPEG или PNG.

JPEG (Joint Photographic Experts Group): формат фотографий

JPEG является наиболее часто используемым форматом сжатия изображений. Механизм, используемый JPEG для сжатия, очень хорош для изображений с множеством плавных цветов – подходит для градиентов. С другой стороны, JPEG не особенно хорошо подходит для изображений с резким изменением цвета. Графика является примером таких изображений.

JPEG обеспечивает очень хорошую степень сжатия, но за определенную цену: потеря информации. Сжатое изображение JPEG будет более или менее отличаться от исходного и не сможет полностью его восстановить. Однако, во многих случаях, различия настолько малы и неуловимы, что такая потеря оправдана. Стандарт JPEG позволяет вам контролировать степень сжатия, чтобы получить максимальное сжатие без существенного влияния на качество изображения.

С JPEG вы можете получить эффект чересстрочного GIF (иллюзия более быстрой загрузки изображения): просто сохраните файл, как прогрессивный JPEG.

PNG (Portable Network Graphics): формат, подходящий как для графики, так и для фотографий

Формат PNG создан по одной прозаической причине: создатели широко распространенного формата GIF решают потребовать лицензионную плату от пользователей GIF. В ответ, небольшая группа разработчиков разрабатывает бесплатную альтернативу GIF (неофициально PNG интерпретируется как «PNG – это не GIF»), которая сочетает в себе некоторые качества GIF и JPEG, и есть некоторые дополнительные преимущества:

  • поддержка миллионов цветов: как и JPEG, PNG может обрабатывать изображения с полным 24-битным цветовым диапазоном.
  • в отличие от JPEG, PNG сжимает изображения без потерь;
  • PNG поддерживает прозрачность изображения в формате GIF, но не только для одного цвета – каждый цвет может иметь различную степень прозрачности. Это называется альфа-каналом и дает большую свободу в дизайне изображений.

Поддержка PNG

Все основные браузеры, такие как Firefox, Chrome, Opera, Safari, очень хорошо поддерживают файлы PNG. Тем не менее, Internet Explorer имеет много проблем с PNG – особенно с прозрачными частями изображений. Новые версии Internet Explorer работают лучше, но некоторые проблемы все еще не решены.

SVG (Scalable Vector Graphics): сохранение качества при изменении размера

Обсуждаемые три типа изображений GIF, JPEG и PNG работают с растровыми изображениями независимо от алгоритмов, которые они используют для сжатия. Растровые файлы содержат информацию об отдельных точках (пикселях), из которых было создано изображение. Если вы увеличите растровое изображение, количество пикселей не увеличится – вместо этого увеличится размер каждой точки. Другими словами, чем больше вы увеличиваете изображение, тем более зернистым и тем хуже качество.

В отличие от растрового формата, SVG использует векторы для описания изображений. При увеличении изображения векторы будут описывать больше точек пропорционально, и изображение сохранит свое качество. Поскольку качество изображений SVG не зависит от их размера, формат SVG часто используется для сохранения изображений логотипа – они будут одинаково хорошо смотреться как на визитных карточках, так и на плакатах.

Еще одним преимуществом формата SVG является то, что, основываясь на стандарте XML, его содержание по сути является текстовым. Этот текст доступен для различных типов обработки, например, для индексации поисковыми системами, которые обычно не распознают текст, включенный в изображения.

Формат SVG поддерживается всеми основными браузерами, кроме Internet Explorer. Чтобы увидеть файл SVG в Internet Explorer, вам необходимо установить дополнительный плагин. Для вас, веб-дизайнеров, это означает, что вам нужно предоставить альтернативное изображение для пользователей Internet Explorer.

Выбор типа изображения

Вот быстрый взгляд на то, какое изображение рекомендуется:

  • Для изображений с большими областями одного цвета или с резкими границами (графика, эскизы): GIF
  • Для фотографий: JPEG
  • Для анимации: анимированные GIF
  • Для изображений, сочетающих много цветов и резкие переходы от одного цвета к другому: PNG
  • Для изображений с прозрачной областью: GIF или PNG

Читайте далее: Flash анимация на сайте

Акция! Сайт + логотип + продвижение всего за 29000!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получить предложение

Pin It on Pinterest