Какой формат используют для хранения web страниц

Форматы файлов, в которых можно сохранять документы

В таблице ниже перечислены различные виды документов, которые можно сохранять в приложении Word.

Формат файла

Документ Word (DOCX).

Используемый по умолчанию XML-формат документов Word 2008 для Mac, Word для Mac 2011, Word 2016 для Windows, Word 2007 для Windows, Word 2010 для Windows, Word 2013 для Windows и Word 2016 для Windows.

Документ Word 97–2004 (DOC)

Формат документов, совместимый с версиями от Word 98 до Word 2004 для Mac и от Word 97 до Word 2003 для Windows.

Шаблон Word (DOTX).

Сохранение документа в виде XML-шаблона, на базе которого можно создавать новые документы. Сохранение содержимого документа и его параметров, в том числе стилей, разметки страниц, элементов автотекста, пользовательских сочетаний клавиш и меню.

Шаблон Word 97–2004 (DOT)

Сохранение документа в виде шаблона, на основе которого можно создавать новые документы. Сохранение содержимого документа и его параметров, в том числе стилей, разметки страниц, элементов автотекста, пользовательских сочетаний клавиш и меню. Совместим с версиями Word 97–2003 для Windows и Word 98–2004 для Mac.

Экспорт содержимого и форматирования документа в формате, распознаваемом и читаемом другими приложениями, включая совместимые программы Майкрософт.

Обычный текст (TXT)

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

Сохранение документа в формате, предназначенном для просмотра в Интернете. HTML — это стандартный веб-формат, который отображается в браузерах Macintosh и Windows.

Экспорт документа в PDF-файл, который выглядит одинаково на компьютерах Macintosh и Windows.

Документ Word с поддержкой макросов (DOCM)

Формат документов на основе XML, в котором сохраняется код макросов VBA. Макросы VBA выполняются в Word 2016 для Mac и Word для Mac 2011, но не в Word 2008.

Шаблон Word с поддержкой макросов (DOTM)

Сохранение документа в виде XML-шаблона с кодом макросов VBA. Макросы VBA выполняются в Word 2016 для Mac и Word для Mac 2011, но не в Word 2008.

XML-документ Word (XML)

Экспорт содержимого документа в XML-файл. Преобразование всех инструкций форматирования и текста в формат XML. Совместим с Word 2007 для Windows.

XML-документ Word 2003 (XML)

Экспорт содержимого документа в XML-файл. Преобразование всех инструкций форматирования и текста в формат XML. Совместим с Word 2003 для Windows.

Веб-страница в одном файле (MHT)

Сохранение документа в формате, предназначенном для просмотра в Интернете, с созданием единого файла со всеми элементами страницы, такими как графические объекты. Используется интернет-стандарт MIME HTML.

Шаблон документа Word (DOC)

Сохранение документа с пометкой «Шаблон» для системы поиска. При открытии такого файла будет открываться новый документ без названия.

Настраиваемый словарь (DIC)

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

Словарь исключений (DIC)

Сохранение содержимого документа в качестве файла словаря, предназначенного для хранения предпочтительных вариантов правильно написанных слов. Выбирайте этот вариант, если нужно сохранить в словаре исключений слово наподобие «нуль», чтобы приложение Word не помечало его как неправильно написанное.

Совместимый с Word 4.0–6.0/95 (RTF)

Этот формат RTF совместим с версиями от Word 4.0 до Word 6.0 для Mac, а также с Word 6.0 и Word 95 для Windows.

Тема Office (THMX)

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

Чтобы применить к документу тему из другого документа, на вкладке Главная в разделе Темы выберите команду Обзор тем. Чтобы сохранить измененную тему как новую, на вкладке Главная в разделе Темы выберите команду Сохранить тему.

Форматы изображений для веб-использования

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

Графические форматы файлов, которые поддерживаются большинством популярных веб-браузеров являются: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) и векторная графика. Некоторые свойства графических файлов:

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

GIF

GIF основан в 1980 году и принят веб-дизайнерами в начале 1990-х годов в качестве основного графического формата для веб-страниц. GIF файлы используют алгоритм сжатия, который делает размера файла маленьким для быстрой загрузки. GIF ограничен 256 цветами (8 бит), поддержкой прозрачности и черезстрочной графики. Также есть возможность создавать анимированную графику используя этот формат. Все браузеры могут отображать GIF файлы без проблем.

• Наиболее широко поддерживаемый графический формат
• Схемы выглядят лучше в этом формате
• Поддержка прозрачности
• JPEG

JPEG

файлы сжаты, но поддерживают “истинные цвета” (24 бит) и являются предпочтительным форматом для фотографий, где вопрос о качестве очень важен . JPEG поддерживает прогрессивный формат, который позволяет почти мгновенно видеть изображение, которое улучшиться в качество, когда закончится загрузка.

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

• Большое сжатия означает более быструю скорость загрузки.
• Производит отличное качество для фотографий и сложных рисунков.
• Поддержка 24-битного цвета.

PNG

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

• Преодолевает 8-битный цвет ограничений в GIF
• Позволяет текстовое описание изображений для поисковых систем
• Поддерживает прозрачность
• Схемы выглядят лучше, чем в JPEG

Векторная графика

Большинство веб-графики является растровым изображением или рисунком, который состоит из сетки цветных пикселей. Иллюстрации должны быть созданы в векторной графике, которая состоит из математического описания каждого элемента, который составляет формы линий и цвета изображения. Векторная графика создается путем привлечения таких программ, как Adobe Illustrator или CorelDRAW. Векторная графика должна быть преобразованы в любом формате GIF, JPEG или PNG для использования на веб-страницах.

Какой формат следует использовать?

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

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

4 основных формата графических файлов в веб-дизайне

Фотографии, графические рисунки, фоновые изображения – это визуальные элементы веб-дизайна, от которых зависит внешний вид сайта и скорость его загрузки.

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

JPEG

JPEG (Joint Photographic Experts Group), также известный как JPG, – 16-битный формат растровых графических изображений. Является популярным расширением для цифровых фотографий, которые имеют яркие цвета и мелкие детали. Многие цифровые камеры предпочитают работать именно с этим форматом.

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

Формат JPG не поддерживает прозрачность, что делает его практически бесполезным для логотипов и иконок. Также этот формат не подходит для графических текстовых файлов, так как при их сжатии увеличивается размытость и теряется четкость картинки.

Таким образом, JPEG является отличным расширением для веб-дизайна, но для хранения исходных изображений следует использовать форматы PSD, TIFF, RAW.

GIF

GIF (Graphic Interchange Format) — это тип растрового изображения, ограниченный 256 цветами. Алгоритм сжатия для файлов этого формата менее сложен, чем для файлов JPG. Сжатие не вызывает потерю данных. GIF расширение очень эффективно для логотипов, иконок, таблиц, но абсолютно не подходит для цифровых фотографий, которые имеют тысячи оттенков.

У GIF формата есть две отличительные особенности. Это поддержка прозрачности изображения и возможность анимации.

• Прозрачность носит относительный характер: пикселы могут быть либо 100% прозрачны, либо 100% непрозрачны. Промежуточных значений не бывает. Если сделать какой-либо цвет прозрачным, то он будет прозрачным на всем изображении. Например, можно разместить рисунок логотипа поверх другого рисунка. В течение многих лет GIF был единственным форматом, который поддерживал прозрачность. Теперь же с этой целью можно использовать расширения PNG и SVG.

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

PNG

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

Используя программы Adobe Illustrator, Adobe Photoshop дизайнеры создают, редактируют, изменяют размеры файлов PNG. При сохранении готовых изображений применяются два типа расширений: PNG-8 (8 бит) или PNG-24 (24 бита).

• PNG-8 отображает только 256 цветов. Имеет хорошие параметры прозрачности, характеризуется улучшенным форматом сжатия.

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

Расширение PNG чаще всего используют для публикации небольших картинок, логотипов, иконок, диаграмм, графических элементов с прозрачностью, фотографий без потерь качества.

SVG

SVG (Scalable Vector Graphics) – наиболее распространенный масштабируемый векторный формат. В отличие от растровых расширений (JPG, GIF и PNG), SVG файлы используют векторы для создания небольших файлов, которые могут быть увеличены до любого размера без потери качества.

Возможности файлов SVG неограниченны. Адаптивный дизайн в веб-разработке увеличил спрос на эти файлы. Геометрическая природа файлов SVG помогает легко адаптировать векторную графику до нужных параметров. Размер SVG-файла зависит от его сложности. Таким образом, для простых изображений SVG файл будет иметь меньший размер, чем любой растровый аналог (JPEG, PNG).

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

Запись опубликована 24.04.2018 автором ArtisMedia в рубрике Без рубрики.

Свежие записи

• Прогноз погоды с использованием искусственного интеллекта: Как это работает?
• САМЫЕ ПОПУЛЯРНЫЕ ИНСТРУМЕНТЫ ИИ 2023 ГОДА
• ПОЛЕЗНЫЕ СОВЕТЫ. КАК ОСТАНОВИТЬ НЕЖЕЛАТЕЛЬНОЕ ОТСЛЕЖИВАНИЕ НА ВАШЕМ ТЕЛЕФОНЕ
• ВАШ ТЕЛЕФОН ЗА ВАМИ ШПИОНИТ. ТАРГЕТИРОВАННАЯ РЕКЛАМА
• WI-FI ALLIANCE ПРЕДСТАВИЛА НОВЫЙ СТАНДАРТ WI-FI 7 – БОЛЕЕ БЫСТРЫЙ И ЭФФЕКТИВНЫЙ?

Рубрики

Архивы

• Январь 2024 (12)
• Декабрь 2023 (15)
• Ноябрь 2023 (2)
• Октябрь 2023 (8)
• Сентябрь 2023 (2)
• Август 2023 (2)
• Июль 2023 (1)
• Июнь 2023 (2)
• Май 2023 (1)
• Апрель 2023 (2)
• Март 2023 (3)
• Январь 2023 (2)
• Декабрь 2022 (1)
• Ноябрь 2022 (2)
• Октябрь 2022 (2)
• Сентябрь 2022 (2)
• Август 2022 (2)
• Июнь 2022 (1)
• Май 2022 (1)
• Апрель 2022 (1)
• Март 2022 (7)
• Январь 2022 (10)
• Декабрь 2021 (3)
• Ноябрь 2021 (5)
• Октябрь 2021 (2)
• Сентябрь 2021 (2)
• Июль 2021 (1)
• Июнь 2021 (1)
• Май 2021 (3)
• Февраль 2021 (3)
• Январь 2021 (1)
• Декабрь 2020 (1)
• Ноябрь 2020 (3)
• Октябрь 2020 (1)
• Сентябрь 2020 (5)
• Август 2020 (1)
• Июль 2020 (3)
• Июнь 2020 (1)
• Май 2020 (3)
• Апрель 2020 (1)
• Март 2020 (2)
• Февраль 2020 (1)
• Декабрь 2019 (1)
• Ноябрь 2019 (1)
• Октябрь 2019 (3)
• Сентябрь 2019 (3)
• Июль 2019 (1)
• Май 2019 (3)
• Апрель 2019 (8)
• Март 2019 (8)
• Февраль 2019 (7)
• Январь 2019 (9)
• Декабрь 2018 (7)
• Ноябрь 2018 (8)
• Октябрь 2018 (8)
• Сентябрь 2018 (8)
• Август 2018 (7)
• Июль 2018 (4)
• Июнь 2018 (8)
• Май 2018 (8)
• Апрель 2018 (6)
• Март 2018 (3)
• Февраль 2018 (1)
• Ноябрь 2017 (1)
• Октябрь 2017 (2)
• Август 2017 (4)
• Июль 2017 (6)
• Июнь 2017 (5)
• Май 2017 (1)
• Апрель 2017 (6)
• Март 2017 (10)
• Февраль 2017 (12)
• Январь 2017 (8)
• Декабрь 2016 (10)
• Ноябрь 2016 (12)
• Октябрь 2016 (11)
• Сентябрь 2016 (11)
• Август 2016 (13)
• Июль 2016 (11)
• Июнь 2016 (13)
• Май 2016 (6)
• Апрель 2016 (7)
• Март 2016 (5)
• Февраль 2016 (5)
• Январь 2016 (5)
• Декабрь 2015 (2)
• Ноябрь 2015 (8)
• Октябрь 2015 (1)
• Сентябрь 2015 (4)
• Август 2015 (7)
• Июль 2015 (5)
• Июнь 2015 (4)
• Май 2015 (14)
• Апрель 2015 (1)
• Март 2015 (4)
• Февраль 2015 (6)
• Январь 2015 (1)
• Декабрь 2014 (1)
• Ноябрь 2014 (5)
• Октябрь 2014 (9)
• Сентябрь 2014 (9)
• Февраль 2014 (1)
• Ноябрь 2013 (2)
• Сентябрь 2013 (4)
• Август 2013 (7)
• Июль 2013 (4)
• Май 2013 (7)

Форматы изображений для веба

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP.

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

GIF (Graphics Interchange Format)

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

Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.

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

Таким образом, формат GIF подходит если:

• изображение не многоцветное;
• нужна простейшая прозрачность;
• нужна анимация.

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Итак, формат PNG подходит для:

• изображений с прозрачностью и полупрозрачностью;
• когда необходима повышенная точность полноцветных изображений;
• изображений с резкими переходами цветов.

WebP

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

• сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
• сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
• поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

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

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок, например, таких:

Таким образом, формат SVG подходит если:

• нужно анимировать части изображения;
• изменять цвет элементов изображения;
• необходимо масштабировать изображение без потерь.

Форматы в зависимости от цели использования

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.