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

Как определить, когда нужно использовать JPG или PNG

JPG идеально подходит в следующих случаях:

• Сложные изображения. Небольшая потеря качества изображения в формате JPG будет практически не заметна на картинках с большим количеством объектов и сложными формами, например, на фотографиях. Поэтому можно получить меньший размер картинки без потери визуального эффекта.
• Фотоальбомы. Для демонстрации большого количества фотографий однозначно стоит использовать JPG формат. Быстрая загрузка и приемлемое качество помогут удержать вашего посетителя на страницах сайта.
• Непрозрачные изображения. Если в ваших картинках нет прозрачных областей, то стоит использовать JPG формат для получения меньшего размера файла.

PNG формат следует использовать:

• Изображения с четкими линиями и текстом. На таких картинках пикселизация будет особенно заметна. Поэтому для них нужно использовать формат, который позволит избежать неприятного эффекта и сохранить высокий уровень сжатия файла.
• Портфолио работ. Для демонстрации высокого уровня профессионализма нужно представлять свои работы в выгодном свете. Поэтому нужно сохранить качество изображения.
• Прозрачные области изображения. В таких случаях однозначно поможет PNG формат.

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

Растровая графика

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

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

Возможности использования растровой графики определяются его размерами и разрешением. Разрешение (разрешающая способность) задается параметром ppi (pixels-per-inch) — количеством пикселей на единицу длины – дюйм.

Общий размер изображения также выражается в пикселях (px), к примеру 5000 * 2000 px (ширина * высота). Чем больше значение ppi и размерность, тем выше качество. Печатные материалы требуют разрешения не меньше 300 ppi. Например, вы готовите брошюру и вам нужно сделать изображение для фона, которое будет печататься на бумаге формата А4 (переведя в дюймы получим размерность 8.5” x 11”). Ваша фоновая картинка, должна иметь размерность 2550 пикселей в ширину (8.5 дюймов) на 3300 пикселей в высоту (11 дюймов) при разрешении 300 ppi.

Если разрешение будет меньше, то есть риски деградации качества, так как растровые изображения имеют ограничения при масштабировании до больших размеров. При расширении качество теряется, и картинка становится размытой, так как каждый пиксель становится больше или программное обеспечение для редактирования графики пытается найти компромисс, подбритая промежуточные цветные пиксели. Растр плохо масштабируется, но хорошо сжимается. Типовой прием – при размещении картинки в интернете, разрешение и размерность уменьшают. Например, до показателя в 72 или 96 ppi.

Какой программой открыть png

Файл Png сам по себе открывается просто, стандартными средствами Windows. Для этого нажимаете по соответствующей картинке два раза левой кнопкой мыши (Скрин 1).

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

Также Вы можете нажать по файлу правой кнопкой мыши и выбрать из меню такие параметры – «Открыть с помощью», «Яндекс» (Скрин 2).

После этого, PNG файл откроется в этом браузере и Вы его сможете посмотреть.

Ещё его можно открыть специальными программами. Например, программой Paint. Чтобы это сделать, нажимаем по картинке правой кнопкой мыши. Далее, выбираете из меню мыши – кнопку «Изменить». Вместе с тем, Ваша картинка будет открыта в этой программе.

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

Способ 5: Paint

Если возможности использовать Paint 3D нет или вы считаете, что в этом нет необходимости, рассмотрите как альтернативу стандартный Paint. В нем есть функция обрезки, однако прозрачный фон сохраняется только в том случае, если вы копируете вырезанный объект и вставляете его на другую картинку, так же открытую в отдельном окне программы. Если же вы планируете сохранить изображение с прозрачным фоном, этого сделать не получится — он заменится на белый и понадобится дополнительное редактирование. С наложением же функциональность Paint поможет справиться без надобности обращения к другим программам. Заранее подготовьте два изображения для наложения и выполните такие действия:

1. Откройте меню «Пуск», найдите там «Paint» и запустите данное приложение.
2. Разверните меню «Файл» и выберите вариант «Открыть».
3. Откройте ту картинку, которая должна наложиться на другую, разверните инструмент «Выделить» и используйте функцию «Выделить все». Вместо этого можно зажать горячую клавишу Ctrl + A.
4. Используйте комбинацию Ctrl + C для копирования выделенного.
5. Запустите Paint в новом окне, где откройте изображение для наложения подготовленной картинки с прозрачным фоном. Разверните блок с инструментами «Выделить» и активируйте галочку возле пункта «Прозрачное выделение».
6. Нажмите «Вставить» или примените стандартную горячую клавишу Ctrl + V.
7. Переместите вставленное изображение с прозрачным фоном в любое удобное место на изображении, после чего переходите к его сохранению.
8. Снова откройте меню «Файл», наведите курсор на «Сохранить как» и выберите вариант «Изображение в формате PNG».
9. Выберите название для файла и сохраните его в удобном месте на компьютере.

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

Подробнее: Создание прозрачного фона для картинки онлайн

Быстрая инструкция по экспорту файлов в Фигме

Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.

Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Изменение масштаба экспортируемых файлов

Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.

Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.

Конвертация между форматами

Конвертация векторного файла в растр выполняется путем экспорта изображения в любой растровый формат. Это функция встроена и в Adobe Illustrator, и в Corel DRAW. А вот конвертация растрового изображения в вектор куда сложнее. Есть такие варианты:

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

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

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

Коротко подведем итоги этого материала в сравнительной таблице:

Параметр	Растровая графика	Векторная графика
Элемент	Пиксели (точки), измерение – в точках на дюйм (dots per inch)	Объекты и контуры, описанные математическими формулами
Качество	Фотографическое, с высокой реалистичностью	Упрощенное, схематическое, с низкой реалистичностью
Размер файла	В целом большой, чем выше разрешение, тем файл тяжелее	В целом небольшой, чем сложнее изображение, тем файл тяжелее
Мастша-бирование	Нежелательно и уменьшение, и увеличение – страдает качество	Неограниченные увеличение и уменьшение без потери качества
Форматы	JPEG (.jpg, .jpeg, .jpe, .jfif), BMP (.bmp, .dib, .rle), TIFF (.tiff), GIF (.gif), PNG (.png)	AI (.ai) у Adobe Illustrator, CDR (.cdr) у Corel DRAW, SVG (.svg) – общий универсальный формат
Редакторы	Paint, Adobe Photoshop или программы семейства Corel: Photo-Paint, Paint Pro, Painter	Adobe Illustrator (более сложный и профессиональный), Corel DRAW (проще, для всех желающих)
Применение	Универсальное; фотографии, оцифровка живописи, книжные иллюстрации, разные рисунки – сложные естественные объекты	Схемы, чертежи, графики, планы; эмблемы, знаки, гербы, логотипы; географические карты, орнаменты; инфографика, простые рисунки
Преимущества	Высокая реалистичность и фотографическое качество, легкость получения, естественные цвета и переходы оттенков	Возможность существенных изменений, масштабирование без потери качества, небольшой объем файла, экспорт в растр
Недостатки	Большой объем файлов с разрешением высокой четкости, ограниченные изменения, потеря качества при масштабировании	Схематичность изображения, упрощенные цвета, непригодность для передачи реальных объектов, высокая сложность создания

Описание JPG

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

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

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

Преимущества и недостатки

JPG отличается рядом преимуществ:

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

Также этот тип расширения отличается и некоторыми минусами:

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

Где применяется

JPG применяется в обычных смартфонах. Его часто используют в следующих ситуациях:

1. Ограниченное редактирование. При использовании этого расширения удастся изменить контрастность и насыщенность фото. На этом возможности формата заканчиваются.
2. Потребность в экономии места. Такое расширение применяют в случае съемок множества фото в день. При этом пространство на девайсе ограничено.
3. Простые фото. Их обычно снимают на улице при качественном освещении. Это значит, что изображение не требует дополнительного редактирования шума. Такие картинки используются в соцсетях или на сайтах.

Особенности графического формата gif

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

Упорядоченное изображение в формате gifоднопиксельная шахматная доска из черных и белых пикселей — 1,78Кб

Неупорядоченое изображение gifтак же состоящее только из черных и белых пикселей — 12,4Кб

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

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

3 основных формата изображений, используемых в Интернете: JPEG, PNG и GIF.

1. JPEG

Термин JPEG означает Joint Photographic Experts Group, и он был введен в обращение в 1986 году. Основные преимущества этого формата заключаются в том, что он может отображать миллионы цветов и особенно хорошо подходит для картинок с высоким уровнем сжатия.

В целом, JPEG — отличный вариант для отображения сложных фотографий, содержащих много цветов. Вот небольшой пример:

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

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

2. PNG

Portable Network Graphics (PNGs) так же популярен на веб-сайтах, как и JPEG. Этот формат также поддерживает миллионы цветов, но наибольший выигрыш по сравнению с JPEG присутствует на фотографиях, где меньше данных о цвете. Если же вы будете использовать формат PNG, для высококачественных фотографий, то этот формат будет заметно проигрывать в объеме картинок, по сравнению с форматом JPEG.

Вот пример изображения PNG:

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

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

Сохранение изображения в формате JPEG может привести к размытым краям и общему искажению изображения.

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

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

3. GIF

В отличие от первых двух форматов, о которых я рассказывал до сих пор, формат GIF (Graphics Interchange Format) имеет гораздо более конкретные варианты использования. Хотя в этом формате можно сохранить и статичное изображение, но большинство веб-мастеров используют этот формат для показа анимированных картинок, например, такой:

JPEG и PNG обычно не поддерживают анимацию (хотя существует формат, называемый Animated Portable Network Graphics – APNGs). Это делает гифки очень полезными. Однако, как вы понимаете, эти типы изображений имеют большой вес из-за большого количества кадров, которые они содержат.

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

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

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

А Вы знаете – Какой формат лучше: PNG или JPG? Отвечаем!

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Важный вопрос: Какой из форматов картинок выбрать для сайта – PNG или JPG? Форматы изображений, наиболее популярные на веб-сайтах: JPG, PNG и GIF. В чем различия между этими форматами, которые сохраняются без потерь, какие поддерживают прозрачность и какие анимации? Сегодня мы будем склоняться над ними, анализировать и пытаться ответить на вопрос – какой из них стоит выбрать как лучший для графики на сайте.

Что такое формат PNG?

Формат изображения PNG (Portable Network Graphic) обеспечивает сжатие без потерь при сохранении. Это означает, что он будет более тяжелым по сравнению с идентичным JPG, но также будет выглядеть лучше, чем JPG. Так как он имеет 48-битную глубину цвета и альфа-канал – то есть человеческим языком – поддерживает прозрачность.

ПОДСКАЗКА: Если мы хотим сохранить логотип peengie без фона – мы используем этот формат и сохраняем его без потерь в большом / оригинальном размере. Для готового проекта – независимо от того, работаем ли мы в Photoshop, Corel, Canva или Gimp – мы вставляем этот файл с логотипом и только потом подгоняем его размер под проект. Вставленный таким образом файл PNG прекрасно сочетается с дизайном благодаря прозрачности.

JPG – что это за формат?

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

ПОДСКАЗКА: Когда мы хотим разместить большое фоновое изображение на веб-странице – мы проверяем нужные размеры в пикселях в шаблоне страницы и масштабируем или обрезаем изображение до них. Затем мы используем сжатие JPG – для достижения оптимального эффекта мы можем сравнить сжатие на 80% и 70% – затем ищем такое значение сжатия, при котором такое большое изображение весит достаточно низко, чтобы загружаться быстро, и при этом выглядит хорошо.

GIF – что это значит?

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

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

Когда PNG, а когда JPG?

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

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

Имеет ли значение формат файла изображения для SEO?

Мнения экспертов разделились, но подавляющее большинство объясняют, что сам формат изображения … не имеет значения для SEO. Наиболее важным является правильная оптимизация: фотография должна отображаться правильно, иметь хорошее (оптимальное) качество и быть хорошо встроенной в формате html / css, то есть она должна отображаться правильно при любом разрешении на ПК и на мобильных устройствах.

Намного больше внимания, чем к самому формату, мы должны сосредоточить на: правильном имени файла – что оно представляет и ключевой фразе, дополняющей данные ALT, а также на осознанном выборе между качеством и легкостью файла. Хотя Google по формату изображений предлагает еще один формат, но каким будет его будущее – время покажет.

ПОЛЕЗНАЯ ИНФОРМАЦИЯ: Вы продвинутый пользователь в Интернет? Используете представителя из семейства ноутбуков от Apple – MacBook? Тогда для Вас данная информация будет точно полезной и нужной: запчасти макбук. Покупайте и пользуйтесь!

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

В каких случаях JPG оказывается лучше WEBP или ложка дёгтя

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

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

Первым идёт Микки Рурк с его фактурным лицом

Обратите внимание, сколько деталей теряет WEBP

{$alt}

{$alt}

При равном размере изображения, JPG выигрывает у WEBP

Обратите внимание на детальность прорисовки пор кожи и правый зрачок

Скачать Mickey Rourke.jpg 40.4 КБ

Скачать Mickey Rourke.webp 41.8 КБ. Светящийся логотип нашего блога на фоне темной бумаги

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

Светящийся логотип нашего блога на фоне темной бумаги. На втором изображении наблюдается потеря цвета ореола свечения и огромного количества мелких деталей. Тем не менее саму перчинку оба формата передают хорошо.

{$alt}

{$alt}

Однозначный победа JPG над WEBP

Обратите внимание, как ухудшается качество свечения и темного фона изображения. Перчинка остаётся без видимых изменений.

Скачать black pepper.jpg 55.7 КБ

Скачать black pepper.webp 55.1 КБ

Логотип блога на фоне обычного листа бумаги. Мелкие детали на белый фоне в WEBP тоже страдают.

{$alt}

{$alt}

При равном размере изображения, JPG одерживает победу над WEBP

Обратите внимание на количество деталей мягкого белого фона

Скачать white pepper.jpg 57.9 КБ

Скачать white pepper.webp 57.5 КБ

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

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

Существует два типа форматов изображений: файлы векторной графики и файлы растровой графики.

1.1. Векторная и растровая графика

Не вдаваясь в подробности, растровые файлы состоят из отдельных пикселей, каждый из которых содержит данные о цвете. Все изображение представляет собой невероятно сложную комбинацию разноцветных точек. По этой причине такие файлы имеют большой размер. Фотографии — это растровые изображения. Качество зависит от количества пикселей на дюйм (PPI, pixels per inch) и размеров изображения. Растровые изображения нельзя увеличить без потери четкости и качества.

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

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

1.2. Размер файла в форматах изображения 

Ещё один важный аспект — размер (вес) файла. Размер файла — это объем места, который файл занимает в вашем хранилище (например на жестком диске компьютера). Файлы изображений, особенно растровые, содержат огромное количество информации

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

Это также важно для скорости браузера.

Здесь важно отметить, что существует два типа сжатия: «с потерями» и «без потерь». У обоих есть преимущества и недостатки:

Сжатие без потерь: фактически никакая информация не удаляется

Это часто очень важно, когда нужно поддерживать качество.

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

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

1.3. Поддержка форматов изображения браузерами

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