Файл: Решение за вами 10 Общий обзор современных графических форматов 12 Много ли можно выиграть, пользуясь альтернативными графическими форматами 13.doc

Волгоградский кооперативный институт (филиал) автономной некоммерческой образовательной организации высшего образования

Центросоюза Российской Федерации

«Российский университет кооперации»

Реферат

Графические форматы при оформлении Web-страниц

Выполнил: Лутков Сергей Алексеевич

Содержание

2

Введение 2

1. GIF — формат для дизайна 4

2. JPEG — формат для фотографий и видеокадров 5

3. PNG — универсальная растровая новинка 6

4. Векторное представление 7

4.1 Анимация, интерактивность и взаимодействие 9

4.2 Окончательное решение за вами 10

5. Общий обзор современных графических форматов 12

Много ли можно выиграть, пользуясь альтернативными графическими форматами? 13

5.1 Браузерная совместимость 13

5.2 Элемент picture спешит на помощь 14

5.3 Упрощённая альтернатива 15

5.4 Преобразование графических файлов в формат WebP 16

Использование современных графических форматов в React-приложениях. 16

Применение современных графических форматов со стилизованными компонентами. 16

5.5 Использование пакета gatsby-image 17

5.6 Минусы WebP 17

Заключение 18

Список литературы 19

Введение

Первый в мире сайт info.cern.ch появился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем. В данной работе мы постараемся изучить основные понятия компьютерной графики, дизайна web-страниц а также основы построения композиции и подбора цвета. Распишем достоинства и недостатки как растровой, так и векторной графики, так же узнаем с каким программным обеспечением лучше всего работать для создания графического оформления, рассмотрим цветовые модели, укажем плюсы и минусы каждой модели. Опишем форматы графических изображений, которые используются в web-дизайне.
Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.

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

В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.

Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком — голубым. Информация об изображении в файле стандарта GIF записывается построчно то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современном web-дизайне[10,c.25].

1. GIF — формат для дизайна

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

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

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

Важно не забывать еще и то, что если вы пытаетесь сохранять изображения с непрерывным тоном в формате GIF, то вам, вероятно, придется отбросить так много информации в процессе подготовки изображения (при преобразовании его к фиксированной палитре), а применяемый в GIF метод компрессии окажется настолько неэффективным, что вы проиграете еще и материально (и по трудозатратам, и по объему файла)[1,c.32].

Кроме всего прочего в формате GIF предусмотрено так называемое чересстрочное появление (Interlaced), которое помогает пользователям с медленными каналами в самом начале приема оценить содержание картинки (эффект похож на постепенную прорисовку нерезкой картинки) и время, необходимое на ее полную передачу, и в результате принять решение, стоит ли продолжать прием или лучше от него отказаться. Впрочем, в отличие от прогрессивного JPEG здесь эффект, скорее, психологический, нежели реальный[5,c.22].

2. JPEG — формат для фотографий и видеокадров

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

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

Коэффициенты сжатия изменяются для JPEG в широких пределах — в зависимости от используемой программы редактирования изображения, однако на Web-страницах обычно применяются соотношения 10:1 или 20:1 (выраженное в пропорции по объему по отношению к исходному изображению), что обычно обеспечивает приемлемое качество. Тем не менее сжимать изображение можно и до экстремальных значений 100:1 (естественно, со значительной потерей качества).

Итак, работая с фотографией в JPEG-формате, вы имеете возможность сохранить 24-разрядное изображение с 16,7 млн. цветовых оттенков, и, несмотря на потерю качества при сжатии, оно все же значительно больше соответствует оригиналу, нежели 256-цветное GIF-представление. При этом неизбежные потери качества сильно зависят от размера, качества и типа исходного изображения.

Эти средства вы можете использовать по желанию, и подобное поэтапное проявление может стать хорошим подспорьем в борьбе с загруженностью каналов. Единственная проблема с прогрессивным JPEG (в отличие от чересстрочного GIF) состоит в том, что старые версии браузеров могут его не поддерживать[3,c.47].

3. PNG — универсальная растровая новинка

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

Алгоритм сжатия для полноцветной картинки превосходит JPEG по качеству, а при поддержке ограниченной индексированной палитры (до 256 цветов) новый формат осуществляет компрессию без потерь на 10-30% лучше, чем та, которая реализована в GIF-формате, что делает его оптимальным для использования в любых случаях. К сожалению, новый формат не позволяет жертвовать качеством изображения в обмен на более высокую степень сжатия, как в формате JPEG.

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

Видимо, разработчики медлят, дожидаясь полного перехода пользователей к новым форматам. Что ж, здоровый консерватизм никогда не помешает, но все же мы настоятельно рекомендуем вам постепенно переходить к PNG, заменяя им, по крайней мере, все существующие применения GIF-формата[4,c.66].

4. Векторное представление

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

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

Другое немаловажное преимущество векторного представления — способность практически неограниченного масштабирования изображения (или детализации его частей) без каких-либо потерь в разрешающей способности или ясности изображения. Для адаптации векторного представления к той или другой палитре, платформе, оборудованию или особенностям дизайна не требуется никаких усилий; а согласование схемы сжатия и качества отображения проходит без каких-либо проблем[9,c.89].

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

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

Для обеспечения возможности органично встраивать векторную графику в традиционный HTML-формат без какого бы то ни было дополнительного программного обеспечения в настоящее время на рассмотрении комитета по стандартам W3C находятся два новых векторных стандарта: PGML (Precision Graphics Mark-up Language) и VML (Vector Mark-up Language). PGML поддерживается фирмами Adobe Systems, IBM, Netscape и Sun Microsystems, а VML — Microsoft, Hewlett-Packard, Autodesk, Macromedia и Visio. Оба стандарта основаны на расширениях языка разметки XML, пропагандируемого для применения в сети как преемника HTML и рекомендованного W3C к использованию в будущем.

Flare — хорошее решение, допускающее включение векторных изображений, которые позволяют практически неограниченно увеличивать уровень детализации страницы, при этом их размеры сравнимы с Shockwave Flash. Нельзя сказать, что применение дополнительных модулей для просмотра изображений так уж неудобно, но когда вы будете использовать подобные средства на ваших страницах, не забудьте предупредить об этом пользователя и дать ему возможность загрузить соответствующий модуль, прежде чем он перейдет к той странице, которая будет включать эти элементы. В ближайшей перспективе это, конечно, замедлит процесс просмотра для новых пользователей, но постепенно вы приобретете все больше приверженцев, пока соответствующие средства наконец не будут включены в очередную версию браузера и дополнительный модуль новичкам уже не понадобится[10,c.78].