Что такое компьютерная графика набор файлов графических форматов дизайна веб-сайта

Обновлено: 21.11.2024

Компьютерные изображения состоят из тысяч крошечных цветных точек, называемых пикселями. Это маленькие точки, которые вы видите, если поднесете лицо слишком близко к экрану телевизора или компьютера. Каждое цифровое изображение состоит из тысяч или миллионов отдельных пикселей, каждый из которых имеет свой цвет. Когда эти группы пикселей рассматриваются как единое целое, мы видим все изображение. Размер экрана большинства компьютерных мониторов составляет 800 x 600 пикселей, 1 024 x 768 пикселей или 1 280 x 1024 пикселей.

Разрешение

Разрешение указывает количество пикселей, отображаемых на дюйм изображения (или пикселей на сантиметр). Большинство компьютерных мониторов имеют разрешение 72 пикселя на дюйм или 96 пикселов на дюйм. Если изображение имеет ширину 72 пикселя, то оно будет отображаться как 1 дюйм на мониторе с разрешением 72 пикселя на дюйм. Важно помнить, что для компьютерной графики более высокое разрешение (пиксели/дюйм) не означает более высокое качество изображения. Важен общий размер изображения в пикселях.

Графика для печати и графика для отображения на мониторах компьютеров используют разные разрешения. В то время как мониторы ограничены 72 или 96 пикселями на дюйм, стандартные настольные струйные принтеры в настоящее время печатают в диапазоне 4800x1200 dpi (точек на дюйм), а изображения в журналах обычно печатаются с разрешением 150 dpi. В отличие от компьютерной графики, с изображениями для печати более высокое разрешение дает изображение более высокого качества. Поэтому, если вы собираетесь распечатать изображение, вам нужно использовать более высокое разрешение, чем для веб-графики, чтобы добиться более высокого качества печати.

Итак, если вы сканируете изображение для использования на веб-странице, какое разрешение следует использовать? Для отображения на мониторе компьютера сканирование изображения с более высоким разрешением просто даст изображение, которое отображается на экране большего размера, поскольку захватывается больше пикселей. Например, изображение размером 3 дюйма на 3 дюйма, отсканированное с разрешением 72 пикселя на дюйм, будет иметь ширину 216 пикселей и высоту 216 пикселей и отображаться на мониторе компьютера как изображение размером 3 дюйма на 3 дюйма. Изображение размером 3 x 3 дюйма, отсканированное с разрешением 144 пикселя на дюйм, будет иметь ширину 432 пикселя и высоту 432 пикселя и будет отображаться как изображение размером 6 x 6 дюймов на большинстве компьютерных мониторов.

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

Графика и размер файла

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

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

Типы графических файлов

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

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

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

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

Исходные форматы файлов. Собственные форматы файлов — это форматы, которые программы редактирования графики используют для сохранения файлов графических проектов. Собственные форматы файлов имеют больший размер и содержат всю информацию, позволяет редактировать изображение. Примерами собственных форматов файлов являются .psd для Photoshop и .jpg для Fireworks.

Другие форматы файлов. Компьютерная графика также может быть представлена в ряде других форматов, таких как .bmp, .tiff и .eps. Эти форматы имеют свое особое применение, например, для печатной графики, но не подходят для отображения в Интернете. Чтобы использовать один из этих типов файлов в Интернете, откройте его в графической программе, а затем сохраните в формате jpeg, gif или png.

Основными форматами веб-файлов являются файлы gif (произносится как «джифф»), jpeg («джей-пег») и, в гораздо меньшей степени, файлы png («пинг»). Все три распространенных формата веб-графики представляют собой так называемую растровую графику, состоящую из шахматной сетки из тысяч крошечных цветных квадратных элементов изображения или пикселей. Растровые файлы — это знакомые типы файлов, создаваемые мобильными телефонами и цифровыми камерами, и их легко создавать, редактировать, изменять в размерах и оптимизировать для использования в Интернете с помощью таких широко доступных инструментов, как Adobe Photoshop или Elements, Corel Paint Shop Pro и Painter и других. программы для редактирования фотографий.

Для эффективной доставки через Интернет практически вся веб-графика сжимается, чтобы размер файлов был как можно меньше. Большинство веб-сайтов используют изображения как в формате gif, так и в формате jpeg. Выбор между этими типами файлов во многом зависит от оценки:

Характер изображения (является ли изображение «фотографическим» набором плавных тональных переходов или схематичным изображением с резкими краями и линиями?)
Влияние различных видов сжатия файлов на качество изображения.
Эффективность метода сжатия при создании файла наименьшего размера, который выглядит хорошо

Графика GIF

Сжатие файлов GIF

В формате GIF используется относительно простая форма сжатия файлов (Lempel Ziv Welch или lzw ), которая устраняет неэффективность хранения данных без потери данных или искажения изображения. Схема сжатия lzw лучше всего подходит для сжатия изображений с большими полями однородного цвета, таких как логотипы и диаграммы. Он гораздо менее эффективен при сжатии сложных «фотографических» изображений с большим количеством цветов и сложных текстур (рис. 11.4).

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

Дизеринг

Полноцветные фотографии могут содержать почти бесконечный диапазон цветовых значений; gif изображения могут содержать не более 256 цветов. Процесс уменьшения многих цветов до 256 или менее называется дизерингом. При дизеринге пиксели двух цветов накладываются друг на друга, чтобы создать иллюзию присутствия третьего цвета. Дизеринг фотографического изображения до 256 цветов дает неприятно зернистое изображение (рис. 11.5). В прошлом этот метод был необходим для создания изображений, которые выглядели бы приемлемо на 256-цветных экранах компьютеров, но с сегодняшними полноцветными дисплеями редко возникает необходимость в сглаживании изображения. Если вам нужен более широкий диапазон цветов, чем может обработать формат gif, попробуйте использовать редактор изображений, чтобы сохранить изображение в форматах jpeg и png (описано ниже), сравните получившиеся размеры файла и качество изображения и выберите наилучший баланс размер файла и качество изображения.

Рисунок 11.5. Дизеринг полноцветной фотографии (слева) в 256-цветное изображение (справа) приводит к получению изображения с большим количеством визуальных шумов и резкими переходами между пикселями разных цветов.К счастью, такие компромиссы с цветовым сглаживанием теперь в основном остались в прошлом, поскольку у большинства пользователей теперь есть мониторы «настоящего цвета», которые могут отображать тысячи или миллионы цветов.

Улучшение сжатия GIF

Вы можете воспользоваться преимуществами сжатия lzw, чтобы повысить его эффективность и тем самым уменьшить размер графики в формате GIF. Стратегия состоит в том, чтобы уменьшить количество цветов в вашем gif-изображении до минимально необходимого количества и удалить цвета, которые не требуются для представления изображения. В GIF-графике не может быть более 256 цветов, но может быть и меньше. Изображения с меньшим количеством цветов будут сжиматься более эффективно при сжатии lzw. Например, при создании GIF-графики в Photoshop не следует автоматически сохранять каждый файл с 256 цветами. Простое изображение в формате gif может хорошо выглядеть с 8, 16 или 32 цветами, а экономия размера файла может быть существенной. Для максимальной эффективности в GIF-графике используйте минимальное количество цветов, обеспечивающее хороший визуальный результат.

Чересстрочный GIF

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

Чересстрочная развертка лучше всего подходит для больших изображений GIF, таких как иллюстрации размером 200 × 100 пикселей или больше. Чересстрочная развертка — плохой выбор для небольших графических изображений GIF, таких как панели навигации, кнопки и значки. Эти небольшие изображения будут загружаться на экран намного быстрее, если вы сохраните их в обычном (не чересстрочном) формате gif. Как правило, чересстрочная развертка не оказывает существенного влияния на размер файла средней графики в формате GIF.

Прозрачный GIF

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

Добавление прозрачности к изображению в формате gif может привести к неутешительным результатам, если изображение содержит сглаживание. Если вы используете программу редактирования изображений, такую как Photoshop, для создания фигуры на фоне цвета фона, Photoshop сгладит фигуру, вставив пиксели промежуточных цветов вдоль граничных краев фигуры. Это сглаживание или сглаживание улучшает внешний вид изображений на экране, смягчая то, что в противном случае выглядело бы как зубчатые края. Проблема возникает, когда вы устанавливаете прозрачный цвет фона, а затем используете изображение на веб-странице на фоне другого цвета. Сглаженные пиксели изображения по-прежнему будут соответствовать исходному цвету фона. В приведенном ниже примере, когда мы меняем цвет фона с белого на прозрачный (позволяя просвечивать серый фон веб-страницы), вокруг изображения появляется уродливый белый ореол (рис. 11.6).

Рисунок 11.6. Ужасный «белый ореол» в прозрачной графике GIF.

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

Графика в формате JPEG

Другим форматом графических файлов, обычно используемым в Интернете для минимизации размеров графических файлов, является схема сжатия Объединенной группы экспертов по фотографии ( jpeg ). В отличие от графики в формате GIF, изображения в формате JPEG представляют собой полноцветные изображения, в которых каждому пикселю выделяется не менее 24 битов памяти, в результате чего изображения могут включать 16,8 миллиона цветов.

Изображения в формате jpeg широко используются фотографами, художниками, графическими дизайнерами, специалистами по медицинской визуализации, искусствоведами и другими группами, для которых важны качество изображения и точность цветопередачи. Форма файла jpeg, называемая «прогрессивный jpeg», дает графике jpeg то же постепенно выстраиваемое отображение, что и в чересстрочных gif-файлах.Как и чересстрочные GIF-изображения, прогрессивные изображения JPEG часто загружаются на страницу дольше, чем стандартные JPEG-файлы, но они предлагают пользователю более быстрый предварительный просмотр.

Сжатие jpeg использует сложный математический метод, называемый дискретным косинусным преобразованием, для создания скользящей шкалы сжатия графики. Вы можете выбрать степень сжатия, которую хотите применить к изображению в формате jpeg, но при этом вы также определяете качество изображения. Чем больше вы сжимаете картинку сжатием jpeg, тем больше вы ухудшаете ее качество. JPEG может достигать невероятных степеней сжатия, сжимая графику до стократного размера по сравнению с исходным файлом. Это возможно, потому что алгоритм jpeg отбрасывает «ненужные» данные при сжатии изображения, и поэтому он называется методом сжатия с потерями. Обратите внимание на рис. 11.7, как увеличение степени сжатия jpeg постепенно ухудшает детализацию изображения. Клетчатый узор и темные «шумовые» пиксели на сжатом изображении — классические артефакты сжатия JPEG. Обратите внимание на обширный шум сжатия и искажения, присутствующие на изображении ниже, особенно вокруг передней кромки головы рыбы.

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

Сохраните исходные несжатые изображения!

После сжатия изображения с помощью сжатия JPEG данные теряются, и вы не можете восстановить их из этого файла изображения. Всегда сохраняйте несжатый исходный файл графики или фотографий в качестве резервной копии. Если ваша цифровая камера создает изображения в формате jpeg, отложите «оригинальные» файлы jpeg и работайте с копиями при редактировании файлов для использования в Интернете. Каждый раз, когда вы сохраняете или пересохраняете изображение в формате jpeg, оно сжимается еще больше, а артефакты и шум в изображении увеличиваются.

Графика PNG

Portable Network Graphics ( png ) – это формат изображений, разработанный консорциумом разработчиков графического программного обеспечения в качестве непатентованной альтернативы формату изображений gif. Как упоминалось выше, CompuServe разработала формат gif, а gif использует проприетарную схему сжатия lzw, которая была запатентована Unisys Corporation, а это означает, что любой разработчик графических инструментов, создающий программное обеспечение, сохраняющее в формате gif, должен был платить гонорары Unisys и CompuServe. Срок действия патента истек, и разработчики программного обеспечения могут свободно использовать формат gif.

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

png поддерживает полноцветные изображения и может использоваться для фотографических изображений. Однако, поскольку он использует сжатие без потерь, результирующий файл намного больше, чем при сжатии jpeg с потерями. Как и gif, png лучше всего работает с штриховыми рисунками, текстом и логотипами — изображениями, которые содержат большие области однородного цвета с резкими переходами между цветами. Изображения этого типа, сохраненные в формате png, выглядят хорошо и имеют такой же или даже меньший размер файла, чем при сохранении в формате gif. Однако широкое внедрение формата png было медленным. Частично это связано с непоследовательной поддержкой в веб-браузерах. В частности, Internet Explorer не полностью поддерживает все возможности графики png. В результате большинство изображений, подходящих для сжатия png, используют вместо этого формат gif, преимущество которого заключается в полной и согласованной поддержке браузеров.

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

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

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

Мы любим потреблять изображения!

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

НО многие владельцы веб-сайтов до сих пор не знают, какой формат файла изображения выбрать или как его оптимизировать. Конечный результат? Вы случайно экспортируете некачественную графику и замедляете скорость страницы, потому что это не лучший формат, доступный или оптимизированный для Интернета. Ура!

Ваш выбор форматов изображений имеет жизненно важное значение.

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

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

Почему важны форматы файлов изображений

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

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

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

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

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

Файлы на вашем веб-сайте должны иметь небольшой размер, быструю загрузку изображения (производительность) без потери качества (внешний вид/масштабируемость).

Какие существуют форматы файлов изображений?

Форматы изображений делятся на две основные категории: растровые файлы и векторные файлы. Каждая категория имеет свое предназначение.

Векторный и растровый формат файла изображения

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

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

Форматы векторных файлов:

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

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

Форматы растровых файлов:

Цветовые режимы изображения: CMYK и RGB

Изображения можно сохранять в одном из двух основных цветовых режимов: CMKY и RGB.

В чем разница? Один режим всегда лучше другого — это зависит от того, где и как отображается изображение.

CMYK (голубой, пурпурный, желтый и основной/черный) – это цветовое пространство для печати. Эти цвета представляют собой четыре краски, которые будут сочетаться в процессе печати. Файлы изображений, сохраненные в этом режиме, оптимизированы для печати.

RGB (красный, зеленый и синий) – это цветовое пространство, идеально подходящее для Интернета. Эти цвета света объединяются, чтобы произвести другие цвета. Файлы изображений, сохраненные в этом режиме, оптимизированы для Интернета.

При необходимости вы можете конвертировать между RGB и CMYK. Знайте свои цветовые режимы, чтобы лучше контролировать цвет конечных изображений на вашем веб-сайте.

Разрешение и размеры изображения

Разрешение — это количество деталей, которые содержит изображение. Разрешение изображения выражается в PPI (пикселях на дюйм) для разрешения экрана и DPI (точек на дюйм) для разрешения принтера.

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

На самом деле экранные изображения работают иначе, чем печатные. Почему? Потому что мы должны думать о размерах мониторов в пикселях, а не о размере печатаемого объекта.

Каждый монитор имеет разное разрешение экрана, а качество изображения постоянно улучшается благодаря новым технологиям (дисплею Retina от Apple), что может затруднить разработку веб-сайта с изображениями, которые идеально отображаются на всех устройствах.

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

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

Под физическим размером изображения понимаются размеры, которые оно будет печатать (например, 5 x 7 дюймов), или размеры в пикселях, отображаемые в Интернете (например, 500 x 700 пикселей).

Разрешение и размеры в пикселях влияют на объем памяти: сколько места файл изображения занимает на жестком диске или в веб-браузере.

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

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

У Squarespace есть руководство по форматированию изображений для Интернета, и я рекомендую прочитать его (и другие их справочные руководства), если вы используете эту платформу CMS для своего веб-сайта.

С потерями и без потерь

Все растровые файлы либо с потерями, либо без потерь.

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

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

Данные EXIF или метаданные изображения

Каждое изображение хранит информацию о себе в файле, такую как тип файла, размер, размеры, модель устройства, настройки камеры, координаты GPS, дату и время, миниатюру изображения, описания и информацию об авторских правах.

Это формат EXIF (формат файла изображения с возможностью обмена).

Просмотр данных EXIF в вашей операционной системе:

Для Mac: выделите свое изображение в Finder, затем нажмите команду I ИЛИ нажмите Control и щелкните, затем выберите Quick Look

Для ПК: выделите изображение, щелкните правой кнопкой мыши, выберите свойства, затем выберите сведения

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

Приблизительное время чтения: 8 минут

Размер файла

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

Установите разрешение изображения на 72 dpi. Убедитесь, что ваша графика имеет соответствующее разрешение для веб-браузеров — 72 пикселя на дюйм (ppi). Единицей измерения чаще называют количество точек на дюйм (dpi). Стандартное разрешение монитора составляет 72 или 96 пикселей на дюйм, поэтому увеличивать разрешение изображения — пустая трата времени.
Ограничьте количество цветов. Как вы могли догадаться, размер файла напрямую связан с глубиной цвета. (Дополнительную информацию о глубине цвета см. в статье Пиксели и онлайн-обучение.) Файлы изображений с большим количеством цветов, градиентов и тонких переходов имеют больший размер по сравнению с файлами со сплошными цветами и небольшим количеством цветов. Если вы хотите, чтобы изображение загружалось быстро и незначительные цветовые вариации не имели значения, вы можете ограничить размер файла с помощью индексированной цветовой модели (описанной в разделе Цветовые модели), в которой количество вариантов цвета ограничено 256.
Уменьшите размеры изображения. Еще одна вещь, которую вы можете сделать, это уменьшить размеры ваших графических изображений. Вы можете сначала загрузить небольшую версию диаграммы и предоставить ссылку для открытия более крупной версии, когда пользователь захочет увидеть более подробную информацию.

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

Формат файла

Когда вы создаете или редактируете изображения в графическом приложении, у вас есть возможность сохранить файл в собственном формате приложения. При сохранении файла в собственном формате сохраняются все данные.В случае графических файлов сохранение в собственном формате сохраняет слои — важный функциональный аспект файла. Когда вы будете готовы разместить файл на веб-странице, вам нужно сохранить его в формате, который может распознать веб-браузер. Например, если вы хотите поместить файл Adobe® Photoshop на веб-страницу, вам необходимо сохранить файл Photoshop в формате, отличном от исходного .psd для Photoshop. Графические файлы можно сохранять в различных кросс-платформенных форматах.

Буквенный код после точки (.) в имени файла предоставляет компьютеру информацию о формате файла.

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

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

JPG (произносится как «джей-пег») – это подходящий формат файла для изображений с градиентами, тонкими переходами или большим количеством цветов (например, фотографий). Когда вы сохраняете изображение в формате JPG, графическое приложение сжимает собственный файл, выборочно отбрасывая данные. Это известно как сжатие с потерями, которое приводит к некоторой потере качества изображения. Снижение качества изображения не очень заметно, если вы не увеличите изображение.

Когда вы сохраняете изображение в формате JPG, приложение дает вам возможность вносить изменения.

«Параметры изображения» определяют качество изображения, которое, в свою очередь, определяет размер изображения.

Параметры формата определяют способ сохранения файла и его загрузку в браузере. Базовый уровень («Стандартный») — это вариант по умолчанию. Baseline Optimized создает файл с оптимизированным цветом и меньшим размером файла. Progressive указывает веб-браузеру загружать изображение постепенно.

Это изображение в формате JPG показано в масштабе 200 %. Сжатие JPG имеет высокое качество — 12. Размер файла – 187,2 КБ.

У этого сжатия JPG более низкое качество — 4.

Размер файла – 64,2 КБ.

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

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

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

Многие GIF-файлы (например, логотип слева) создаются в векторном приложении, таком как Adobe® Illustrator.
Когда Illustrator файл сохраняется в формате GIF, таблица цветов отображает цвета в вашем файле. Вы можете выбрать один цвет, чтобы сделать его прозрачным.

Серые и белые флажки на заднем плане обозначают прозрачные области.

Когда GIF с прозрачностью размещается поверх фона (например, желтого градиента), вы видите фон в прозрачных областях.

Ограниченная цветовая палитра GIF делает этот формат неподходящим для фотографий.

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

Файлы PNG допускают прозрачность, но, в отличие от GIF, PNG имеют различные параметры прозрачности и допускают до 256 уровней прозрачности.

Еще одним преимуществом файлов PNG является встроенная возможность гамма-коррекции. Гамма-коррекция позволяет учитывать яркость изображения на мониторе и настраивать изображение PNG на мониторе для отображения предполагаемой яркости изображения.

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

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

Формат файла PNG не поддерживается в старых браузерах. В частности, версии Internet Explorer ниже 9.0 в системах Windows имеют множество проблем, которые не позволяют браузерам правильно отображать изображения PNG.

Подведение итогов

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

В этой статье представлен краткий обзор подготовки графики для Интернета.

Для получения дополнительной информации посетите Руководство по веб-стилю Патрика Дж. Линча и Сары Хортон или прочитайте Веб-книгу для недизайнеров Робина Уильямса и Джона Толлетта.< /p>

Похожие сообщения:

Ищете дополнительную информацию об онлайн-обучении? Линда разработала серию статей о преобразовании обучения под руководством инструктора в онлайн-обучение под названием «Великие путешествия». Наборы слайдов из всех пяти презентаций доступны для скачивания.

Читайте также: