Графические Web-форматы

Ответы на вопросы

1. Что входит в “объём гипертекстовой страницы”?

   Ответ. Под объёмом гипертекстовой страницы понимают килобайтный размер файлов, необходимых для показа страницы в окне браузера. Сюда входит размер самого HTML-файла, размер картинок, размер файлов со скриптами (программами) и стилевыми таблицами.

2. Почему разработчики стараются уменьшить объём страниц своего сайта?

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

3. Почему килобайтный размер картинок, предназначенных для Web стараются уменьшить?

   Ответ. Разработчики стремятся уменьшить все файлы, которые нужны для отображения страницы в окне браузера, но особое внимание уделяют картинкам, на долю которых приходится основной объём сетевого трафика.

4. Каким образом можно уменьшить килобайтный размер картинок?

   Ответ. Прежде всего, нужно прикинуть, нельзя ли сократить геометрические размеры картинки без ущерба для восприятия документа. Уменьшать картинки нужно в графическом редакторе (реально), а не размерными атрибутами тега IMG, который отвечает за показ картинок в окне браузера. В IMG можно задать любую ширину и высоту картинки, но размер графического файла (а, значит, сетевой трафик) при этом остаётся прежним.

   Когда геометрия определена, нужно подобрать наиболее компактный для данной картинки формат графического файла и указать для него правильные параметры (число цветов в палитре GIF или PNG, уровень качества JPEG).

5. Какие графические форматы популярны в Web?

   Ответ. Это форматы: GIF, JPEG, PNG.

6. Как устроен файл с рисунком в формате GIF?

   Ответ. Файл с рисунком в формате GIF имеет следующую структуру:

   

   Заголовок начинается с текста “GIF89a” — признака GIF-формата, затем указывается ширина, высота картинки и другая информация.

   За заголовком следует палитра — 24-битные коды цветов, которые используются в рисунке.

   Код самого изображения записывается по строкам в сжатом виде, вместо цвета пиксела указывается номер этого цвета в построенной палитре.

7. Сжимается ли графическая информация при сохранении рисунка в формате GIF?

   Ответ. Да, сжатие выполняется.

8. Какое максимальное количество цветов рисунка можно сохранить в формате GIF?

   Ответ. Формат GIF сохраняет изображение, используя не более 256 цветов. Любую картинку можно записать в формате GIF, но “лишние” цвета риунка будут преобразованы графическим редактором к цветам автоматически построенной палитры.

9. Происходит ли потеря качества рисунка при его сохранении в формате GIF?

   Ответ. Сжатие выполняется без потерь при условии, что количество цветов в исходном изображении не превышает количество цветов, которое пользователь указывает для GIF-палитры при сохранении картинки в файл.

10. Каким образом можно уменьшить размер графического файла, сохраняя изображение в формате GIF?

    Ответ. Размер графического файла сокращается, если для GIF-палитры указать меньшее количество цветов. Но если число цветов рисунка окажется больше количества цветов в GIF-палитре, качество сохранённого рисунка ухудшается.

11. Как устроен и работает анимированный GIF?

    Ответ. Такой GIF содержит не одну, а несколько картинок — кадры мультипликации. Кроме графики, анимированный GIF содержит настроечную информацию (время задержки между кадрами, режим показа — циклический или однократный).

12. Почему не рекомендуется помещать на страницах информационного сайта непрерывно работающую анимацию?

    Ответ. При построении анимации для Web следует отдавать предпочтение однократному показу, так как бесконечная мультипликация отвлекает пользователя от работы с другими элементами страницы.

13. Что такое прозрачный GIF, и для каких целей он используется?

    Ответ. При записи иллюстрации в GIF-формате можно объявлять один или несколько цветов прозрачными. Такой GIF называется прозрачным. Прозрачный GIF используется для более тесной интеграции картинки с фоном.

14. Как работает чересстрочный GIF?

    Ответ. Изображение разделяется на четыре части размером с оригинальную картинку. Первая часть содержит 1-ю, 5-ю, 9-ю, … строки исходного изображения. Вторая — 2-ю, 6-ю, 10-ю, … Третья — 3-ю, 7-ю, 11-ю,… Четвёртая — 4-ю, 8-ю, 12-ю, …

    Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и четвёртую. Получается эффект постепенного проявления изображения. На медленных линиях Интернета этот метод позволяет пользователю ещё до загрузки всех частей картинки получить представление об изображении — ведь части строятся браузером по мере их поступления на компьютер.

15. Для каких иллюстраций формат GIF подходит наилучшим образом?

    Ответ. Формат GIF лучше всего подходит для логотипов, надписей, заголовков, рисунков с чёткими цветовыми границами и однотонными заливками (без цветовых растяжек).

16. Сколько цветов способен сохранить формат JPEG?

    Ответ. Формат JPEG поддерживает более 16 миллионов цветов: 16 777 216 = 2²⁴.

17. Как устроен файл с рисунком в формате JPEG?

    Ответ. Файл в формате JPEG начинается с заголовка, содержащего информацию о рисунке и параметры JPEG-сжатия. За заголовком располагается код самого рисунка:

    

18. Чем отличается JPEG-сжатие от GIF-сжатия?

    Ответ. JPEG-сжатие всегда выполняется с потерей графической информации, а GIF-сжатие производится без потерь, если число цветов в исходной картинке не превышает количества цветов в палитре GIF.

19. Что такое прогрессивный JPEG?

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

20. Можно ли при сохранении графики в формате JPEG указывать прозрачные цвета?

    Ответ. Нет.

21. Можно ли в формате JPEG записывать множественные картинки, образующие кадры мультипликации?

    Ответ. Нет.

22. Для каких иллюстраций формат JPEG подходит наилучшим образом?

    Ответ. Формат JPEG хорошо подходит для фотографий и сложных по цветовой гамме рисунков с плавными цветовыми переходами.

23. Сколько цветов способен сохранить формат PNG?

    Ответ. Теоретически формат PNG поддерживает 2⁴⁸ = 281 474 976 710 656 цветов, то есть больше, чем в традиционной 24-битной системе RGB. Реально графические редакторы работают с двумя вариантами формата PNG:

    • PNG-24 — 2²⁴ (16 777 216) цветов;
    • PNG-8 — 2⁸ (256) цветов.

    В варианте PNG-8, можно указывать (как для формата GIF) размер фиксированной палитры на 2, 4, 8, 16, 32, 64, 128 или 256 цветов.

24. В чем сходство PNG-сжатие и GIF-сжатия?

    Ответ. PNG-сжатие, как и GIF-сжатие выполняется без потерь, если число цветов в исходной иллюстрации не превышает число цветов, задаваемых пользователем в параметрах формата при записи картинки в файл.

25. В чем различие PNG-сжатие от JPEG-сжатия?

    Ответ. PNG-сжатие в отличие от JPEG-сжатия работает без потерь графической информации.

26. Когда PNG-формат работает лучше GIF-формата?

    Ответ. Если число цветов картинки близко к 256, формат PNG позволяет получить файлы меньшего объема (на 5-25%).

27. Когда PNG-формат работает хуже GIF-формата?

    Ответ. Если число цветов картинки небольшое, формат GIF позволяет получить файлы меньшего объема.

28. Когда формат PNG предпочтительнее формата JPEG?

    Ответ. Формат PNG предпочтительнее формата JPEG, если требуется сохранить изображение без потери качества, а объём файла значение не имеет. Такая ситуация возникает, например, при хранении промежуточных результатов редактирования.

29. Когда формат JPEG предпочтительнее формата PNG?

    Ответ. Фотографии (и другие иллюстрации с большим числом цветов и плавных переходов) для Web лучше сохранять в формате JPEG, так как объём файла получается меньше при приемлемом качестве изображения.

30. Поддерживает ли PNG чересстрочную развёртку?

    Ответ. Да.

31. Можно ли при сохранении графики в формате PNG указывать прозрачные цвета?

    Ответ. Да.

32. Для каких Web-иллюстраций формат PNG подходит наилучшим образом?

    Ответ. Формат PNG в Web лучше всего подходит для иллюстраций, число цветов в которых близко к 256 (без плавных цветовых переходов). Для картинок с меньшим количеством цветов лучше использовать GIF, с большим — JPEG. Однако, это довольно приблизительная рекомендация, пригодная для общей оценки. Окончательный выбор формата лучше делать опытным путем в специальной программе-оптимизаторе или редакторе со специальным инструментарием (например, Photoshop).

Возврат
На начало урока 12