<img src="адрес_картинки">
или посредством css.Один из главных вопросов, которые волнуют вебмастеров - какого формата предпочтительнее вставлять картинку.
В интернете есть множество разных форматов изображений. Основные из которых png, gif, jpeg, jpg, webm, cvg и прочие. Обычно на сайтах используются именно эти изображения.
В чем же их отличие можно увидеть в таблице ниже, где я сравнил самые используемые форматы.
| формат | вес файла (в битах) | качество изображения | отличия и преимущества | минусы |
| jpg (jpeg) | большой | отличное | может сохранять отличное качество фотографии | нет возможности создания прозрачного фона, долго грузится из-за размера и качества изображения |
| png | средний | среднее | можно создавать прозрачный фон у картинки!!! этот формат изображения очень часто используются для создания сайта | среднее качество изображения. |
| gif | маленький | очень плохое | можно создать анимированные изображения, возможность создания прозрачного фона, очень маленький вес | очень плохое качество изображения из-за простого отсутствия или автоматической замены цветов форматом. сам формат gif - очень древний и был придуман чуть ли не самым первым с момента изобретения компьютеров |
| svg | средний | отличное (только для простых рисунков и фигур) | можно создать огромную картинку и она будет быстро загружаться на сайте т.к. формат сделан и оптимизирован под сайты в первую очередь. изображение можно нарисовать (написать) html кодом, поэтому не обязательно пользоваться редактором. можно встроить в html код и сделать рисунок интерактивным | не предназначено для фотографий, можно создавать лишь рисунки, фигуры, отсутствие многих переходных цветов, отсюда и мало возможностей рисования. |
* разницы между jpeg и jpg незначительная. Грубо говоря, она видна лишь на микроскопах. Отличие лишь в том, что один формат изобрели чуть раньше, а другой просто новая версия старого формата с чуть лучшим качеством изображения.
**Не стал отдельно создавать строку в таблице для формат .webm , т.к. он не сильно отличается от png или jpg. Он просто лучше оптимизирован для сайтов и быстрее загружается. Из минусов то, что это относительно новый формат и его хорошо открывают новые браузеры, но например, если вы скачаете такую картинку на ПК windows 7, то он просто не сможет его открыть и придется скачивать стороннюю программу для открытия такой картинки.
Итог:
- Из таблицы можно выяснить, что если вы хотите разместить картинки отличного качества и большого разрешения или создать фотосайт, то лучше использовать формат jpg (jpeg).
- Если вы создаете блог или портал или сайт, где изображения играют второстепенную роль, то лучше использовать png.
Лично я стараюсь чаще использовать png т.к. это наиболее оптимальный и используемый формат при создании сайтов. Он легок, быстр и качество не сильно портится.
- Формат gif лучше вообще не использовать или использовать только для украшения вашего сайта мелкими картинками или для создания мелких иконок. Это древний формат, который сильно сжимает и портит цветовую палитру изображений. Если вы сделаете фотографии или панораму какого либо дома, то сохранив его в формате gif, фотография просто испортится.
Другой момент, если вы хотите создать небольшую мелкую анимацию, размером 150x150 пикселей, то gif будет очень УДОБЕН т.к. он сожмет всю анимацию и подпортит изображение, но человеческий глаз просто не заметит разницы и порчи на столь маленькой картинке.
- формат svg используют в основном для рисования каких-либо фигур, карт, для создания интерактивных простых картинок. Он оптимизирован для сайтов, поэтому даже огромная карта мира будет, на удивление, очень быстро грузиться. Открыть такой формат можно зачастую только браузером. Палитра достаточно яркая и четкая, но опять же только для простейших фигур и линий.
Код, которым рисуют изображения такого формата называется canvas. Очень прост и подобен css и html. В целом это и есть разветвление html.
.jpg)
