События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Что такое психологические границы?


Dendy и Nintendo. История первой игровой приставки в россии.


Почему курсор (стрелка мыши) наклонена?


Если вы любите давать советы...


правильно или неправильно вы живёте?


Зрительные искажения. Обман зрения.


Как вывести данные из базы данных на php?


подборка смешных картинок с надписями


Что означает герб. Двуглавый орел. Расшифровка герба и история появления.


Что посмотреть в михайловском замке(инженерном)?


GTA 3 на андроид - обзор, рецензии, рекомендации,



“ Только тот, кто недоволен собой, имеет права на прочие недовольства.”

дед Мазай

Следующая цитата »

Это факт!


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

Следующий факт »

Ра оставил тебе послание!... (0о0)

Как вставить картинку на сайт и какое расширение лучше использовать?



Теги: #статьи портала #Создание сайта (html,css,php,js)


html,css, img, images, png, svg, jpg, jpeg, gif, web, дизайн, картинки, изображения, картинку, как вставить, встроить, сайт, веб, вебмастер, фотографию, качество, отличия, основные, главные, таблица, между форматами, расширение, расширениями, формат, сохранить, в каком, формате, лучше, сохраняется, с сохранением, качества,

Картинку на сайт можно вставить одним простым способом <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.





ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)