Html изображения

Для чего вставляют картинки в hml на сайт

Доброго времени суток, гости и читатели блога! Иногда, возникает необходимость вставлять картинки на сайт в html. Это делают в некоторых случаях: когда нужно установить код картинки для страниц одностраничного сайта или отдельных страниц блога.

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

Установить html картинку в блокнот и вставить ее на сайт очень просто. Далее это сделаем с помощью html кода. Вам лишь нужно его переписать без ошибок в блокнот и добавить свой адрес изображения.

Параметры, применяемые к изображениям в HTML

Для того чтобы проводить небольшие манипуляции с изображениями, в HTML используются определенные параметры для картинок. Например:

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

<img src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» width=»30%» height=»30%» />

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

<img src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» width=»200px» height=»60px» />

Для решения этой проблемы (например если лень высчитывать пропорции и смотреть оригинальное разрешение), можно указать один параметр по которому браузер и будет высчитывать пропорции. Кстати, не обязательно писать «20px», можно просто написать «20». Идем дальше, на очереди параметр alt.

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

Пример HTML-кода:

<img src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»Логотип сайта blogwork.ru» />

Результат:

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

Пример HTML-кода:

<img title=»Вставляем заголовок для картинки» src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

Результат:

Следующие атрибуты это vspace, hspace и border.

Пример HTML-кода:

<img src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» border=»10″ hspace=»20″ vspace=»5″ />

Результат:

Код:

<img src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» align=»right» />

Результат:

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

<img style=»padding: 20px; opacity: 0.5;» src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

Вот что получится:

Сайты иногда присваивают картинкам классы в эстетических целях, чтобы все картинки имели одинаковый стиль обрамления (например, какие-нибудь красивые border). В .css файле задается общий параметр для одного класса, например, pic. Затем он указывается в HTML:

<img class=»pic» src=»https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

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

Как вставить картинку в HTML: ВЫБОР ИЗОБРАЖЕНИИ ДЛЯ САЙТА

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

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

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

ИЗОБРАЖЕНИЯ ДОЛЖНЫ:

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

HTML-тег

Тег <img> является основным элементом для вставки изображения в HTML-страницу. Минимальный синтаксис выглядит следующим образом:

<img src="https://gospodaretsva.com/Image.png" alt="изображение">

Сначала отметим, что тег — это тег без содержимого, поэтому у него нет закрывающего элемента </ img> . Давайте рассмотрим значение ключевых слов и основных атрибутов:

ключевое слово	описание
IMG	Имя тега, сокращение от image (image)
src	Это означает источник , это адрес (URL) файла, который мы хотим показать
alt	Это альтернативный текст , который появляется, если по какой-то причине клиент не показывает изображение. Мы также можем опустить этот атрибут, но он полезен для доступности и для поисковых систем

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

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

<p>Привет.</p> <img src="logo_html.png"> <p>это логотип</p> 

Есть много других способов настроить отображение изображений с помощью CSS, как мы увидим позже.

Как добавить код картинки html на сайт

Если у вас есть сайт или блог, зайдите в админ панель вашего ресурса. Нажмите, например, кнопку «Страницы», далее «Добавить новую». Пишем, например, название страницы «Черновик», чтобы показать для примера, как вставляется код изображения.

Далее выделяете написанный вами ранее код в Нотепад и копируете его. Затем вставляете в пустое поле страницы на Вордпресс.

Далее нажимаете кнопку «Сохранить» или «Опубликовать», чтобы добавить изображение на сайт. Когда код будет добавлен и сохранен, нажмите «Выйти из редактора кода». Чтобы посмотреть страницу с изображением в браузере, нажимаете «Просмотреть», далее «Предпросмотр в новой вкладке».

При необходимости вы можете изменить размеры картинки. Для этого пропишите, например, в коде атрибут width=600PX и укажите после него нужные размеры. После изменений, сохраните код в блокноте, нажав на кнопку сохранения.

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

Кроме того, можно установить изображение по центру, по левому или правому краю, также по ширине.

Альтернативные способы

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:

<div class="main-content">
  <p>
<img src="images/headshot-picture.jpg" alt="Снимок лица" class="left" />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
  </p>
</div>

Задать стили для изображения можно с помощью следующего кода CSS:

.main-content img {
   float: left;
   padding: 0 20px 20px 0;
}

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

Также можно добавить стили непосредственно в HTML-разметку, например:

<p>
  <img src="images/headshot-picture.jpg" alt="Headshot photo" style="float:left;margin:0 20px 20px 0;"   />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
  </p>

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Вадим Дворниковавтор-переводчик статьи «How To Float an Image to the Left of Text on a Webpage»

Список атрибутов тега img

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

Полный список атрибутов:

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

Возможные форматы: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG и Base64.

Пример:

<img src="https://example.com/photo/low.jpg"> или <img src="photo/low.jpg">

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

Пример:

<img src="photo/low.jpg" alt=”яхта на море”>

align — определяет выравнивание картинки относительно рядом находящегося текста.

Возможные значения: top, bottom, middle, left и right.

Пример:

<img src="photo/low.jpg" align=”middle”>

border — добавляет вокруг картинки рамку с выбранным размером.

Возможные значения: px, % и другие.

Пример:

<img src="photo/low.jpg" border=”25px”>

height – позволяет изменять высоту изображения, пропорционально которому изменяется ширина.

Возможные значения: px, % и другие.

Пример:

<img src="photo/low.jpg" height=”125px”>

width — позволяет изменять ширину изображения, пропорционально которой изменяется высота.

Возможные значения: px, % и другие.

Пример:

<img src="photo/low.jpg" width=”100px”>

hspace — добавляет отступ слева и справа от изображения.

Возможные значения: px, % и другие.

Пример:

<img src="photo/low.jpg" hspace=”50px”>

vspace — добавляет отступ сверху и снизу от изображения.

Возможные значения: px, % и другие.

Пример:

<img src="photo/low.jpg" vspace=”150px”>

longdesc — позволяет добавить адрес с расширенным описанием выбранной фотографии.

Возможный формат: txt.

Пример:

<img src="photo/low.jpg" longdesc="img/low.txt">

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

Возможные значения: anonymous – анонимный запрос без передачи учетных данных, use-credentials – запрос с передачей учетных данных.

Пример:

<img src="https://switch.com/img/low.jpg" crossorigin="anonymous">

srcset – добавляет список изображений, которые будут отображаться в зависимости от ширины или плотности экрана. Не поддерживается в браузерах Android и Internet Explorer.

Допустимые значения: Nw, где N – любое целое положительное число, и Kx, где K – положительное десятичное число.

Пример:

<img src="img/low.jpg" srcset="img/low.jpg 320w, img/low-mid.jpg 480w, img/low-full.jpg 768w">

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

Возможные значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число.

Пример:

<img src="img/low.jpg" srcset="img/low.jpg 320w, img/low-mid.jpg 480w, img/low-full.jpg 768w" sizes="(max-width: 800px) 500px, (min-width: 800px) 800px">

Работает следующим образом: при разрешении экрана меньше 800px задается ширина картинки в 500px. Если экран больше 800px, то изображение фиксируется в положении 800px.

usemap — позволяет совместить картинку с картой, которая была указана в теге .

Возможные значения: #name, где name – значение атрибута name карты, и #id, где id – значение атрибута id карты.

Пример:

<img src="img/low.jpg" usemap="#my_point">

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

Пример:

<a href="map/ismap.php">

           <img src="img/low.jpg" ismap>

</a>

Как вставить картинку в HTML. Урок — 7 (для начинающих).

Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.

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

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

Приступим.

Как вставить картинку в html?Так, как я говорил — здесь сложного ничего нет, добавьте этот html код.

<img src=»kartinka.jpg»>

kartinka — это название картинкиjpg — это расширение картинки. Расширение может быть gif, png, bmp.

Если картинка размещена в папке images, тогда путь к картинке будет таким:

<img src=» images/kartinka.jpg»>

images — название папки, где лежит картинка «kartinka.jpg».

Если картинка лежит на другом сайте, тогда код будет таким:

<img src=»https://www.bloggood.ru/images/kartinka.jpg»>

https://www.bloggood.ru — это адрес сайта.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить картинку в html</title>
</head>
<body>
<img src="kartinka.jpg">
</body>
</html>

Как сделать в html картинку ссылкой?

Для этого просто заключите картинку между ссылочным элементом:

<a href=»адрес ссылки»><img src=»kartinka.jpg»></a>

Атрибуты для картинок

ALIGN — этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.left — выравнивание по левому краю, текст будет обтекать справа.right — выравнивание по правому краю, текст обтекает слева.

<img src=»kartinka.png» align=»right»>

Результат:

выравнивание по правому краю

HSPACE — отступы от картинки по горизонтали (в пикселях).VSPACE — отступы от картинки по вертикали (в пикселях).

<img src=»kartinka.png» align=»right» hspace=»15″ vspace=»15″>

Результат:

отступы от картинки

HEIGHT — высота изображения (пикселях).WIDTH — ширина изображения  (пикселях).

<img src=»kartinka.png» align=»right» hspace=»15″ vspace=»15″>

Результат:

высота и ширена изображения

TITLE — это заголовок картинки. Заголовок будет отображаться, если навести на картинку курсор мышки.

<img src=»kartinka.png» align=»right» hspace=»15″ vspace=»15″ width=»100″  title=»Всем привет — bloggood_ru!!! «>

Результат:

заголовок картинки

BORDER — этот атрибут отвечает за размер рамки вокруг картинки. Рамки появляются в таких случаях, когда вы картинку сделаете ссылкой. Если установить нулевое значение атрибута BORDER , рамка отображаться не будет.

<a href=»адрес ссылки»><img src=»kartinka.png» border=»0″></a>

Результат:

А если поменять значение border на 5:

<a href=»адрес ссылки»><img src=»kartinka.png» border=»5″></a>

Результат:

Как сделать картинку фоном?

Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background.

<body background=»ваш_фон.jpg»>

На картиночном фоне может отображаться текст.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body background="kartinka.jpg">

<p>текст</p>
<p>текст</p>

</body>
</html>

Результат:

Картинка как фон

На этой ноте можно было бы и закончить тему «Как вставить картинку в HTML», но знаю, что многих интересует вопрос, а как поставить картинку по центру.Чтобы поставить картинку по центру, вам достаточно применить такой фокус:

<center><img src=»kartinka.jpg»></center>

Вот теперь точно все. Переходим к следующему уроку.

Как вставить в html картинку

Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

Этот код преобразуется на странице в следующее:

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=»/img/kartinka.jpg», т.е. указывается относительный адрес.

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

Пример 2.2. Вывод нескольких картинок в html друг за другом

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

Как разместить текст в изображении

Шаг 1) добавить HTML:

Пример

<div class=»container»>  <img src=»img_snow_wide.jpg» alt=»Snow»
style=»width:100%;»>  <div class=»bottom-left»>Bottom Left</div> 
<div class=»top-left»>Top Left</div>  <div class=»top-right»>Top
Right</div>  <div class=»bottom-right»>Bottom Right</div> 
<div class=»centered»>Centered</div></div>

Шаг 2) добавить CSS:

Пример

/* Container holding the image and the text */.container {    position: relative;   
text-align: center;    color: white;}/* Bottom
left text */
.bottom-left {    position: absolute;   
bottom: 8px;    left: 16px;}/* Top left text */.top-left {    position:
absolute;    top: 8px;    left: 16px;}/* Top right text */.top-right {   
position: absolute;    top: 8px;   
right: 16px;}/* Bottom right text */
.bottom-right {    position: absolute;   
bottom: 8px;    right: 16px;}/* Centered text
*/.centered {    position:
absolute;    top: 50%;    left: 50%;   
transform: translate(-50%, -50%);}

Чтобы узнать больше о том, как стиль изображения, прочитайте наши CSS Images учебник.

Чтобы узнать больше о CSS поситонинг, прочитайте наше руководство по позиционированию CSS.

❮ Назад
Дальше ❯

Изображения в таблице

При добавлении изображения в ячейку таблицы также проявляется разница между режимами браузера. Для понимания разберем следующий код (пример 1.5). Чтобы стала заметна граница вокруг таблицы, в стилях добавлено свойство border для селектора TABLE .

Пример 1.5. Изображение в таблице

HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.3а. Для стандартного режима вывод изображения несколько отличается (рис. 1.3б).

а	б

Рис. 1.3. Изображение в таблице. а — почти стандартный режим, б — стандартный режим

Заметно, что в стандартном режиме появляется небольшой отступ внизу картинки. Откуда он берется? Если добавить в ячейку текст и увеличить масштаб (рис. 1.4), то хорошо заметно, что изображение как строчный элемент выравнивается по базовой линии текста, а не по его нижнему краю. Соответственно, разница между базовой линией и нижним краем текста и есть значение промежутка под картинкой.

Рис. 1.4. Базовая линия текста

Опять же, существует несколько способов изменить поведение изображений в таблице. Первый способ уже упоминался, это преобразование тега в блочный элемент с помощью свойства display со значением block (см. пример 1.3). Стиль в таком случае будет следующий:

Если наряду с изображениями внутри ячейки находится текст, этот стиль может привести к нежелательным последствиям. Вместо того чтобы картинка располагалась рядом с текстом, она, как блочный элемент, появится на новой строке. В этом случае рекомендуется задать выравнивание изображений по нижнему краю через свойство vertical-align со значением bottom (пример 1.6).

Пример 1.6. Выравнивание изображений

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Хотя во всех браузерах в данном примере наблюдается выравнивание изображения по нижнему краю, несколько различается выравнивание самого текста. Браузеры Firefox, Safari, IE7 выравнивают текст по нижнему краю рисунка, а Opera, IE8, IE9 — по верхнему.

Как добавить форму к изображению

Шаг 1) добавить HTML:

Шаг 2) добавить CSS:

body, html {  height: 100%;}* {  box-sizing: border-box;}.bg-img { 
/* The image used */  background-image: url(«img_nature.jpg»);  /* Control the height of the image */  min-height: 380px;  /* Center and scale the image nicely */ 
background-position: center;  background-repeat: no-repeat; 
background-size: cover;}/* Add styles to the form container */
.container {  position: absolute;  right: 0; 
margin: 20px;  max-width: 300px;  padding: 16px; 
background-color: white;}/*
Full-width input fields */  input, input { 
width: 100%;  padding: 15px;  margin: 5px 0 22px 0; 
border: none;  background: #f1f1f1;}input:focus,
input:focus {  background-color: #ddd; 
outline: none;}/* Set a style for the submit button */.btn { 
background-color: #4CAF50;  color: white;  padding: 16px
20px;  border: none;  cursor: pointer;  width:
100%;  opacity: 0.9;}.btn:hover { 
opacity: 1;}

❮ Назад
Дальше ❯

Форматы графических изображений.

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

1. Формат JPEG (Joint Photographic Experts Group). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными.  Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.

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

3. Формат PNG (Portable Network Graphics). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.

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

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