Верстка HTML страниц, какие расширения или форматы изображений выбрать - jpg, jpeg, png, gif, svg

16.08.18 ИТ / HTML 5243

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

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

Рассмотрим следующие расширения - jpg, jpeg, png, gif, svg:

• jpg и jpeg – это по сути одно и тоже, просто разные названия, но лучше всегда писать jpg. Это расширение наиболее оптимальный вариант - маленький размер файлов на выходе, многие сервисы оптимизации сайтов настойчиво рекомендуют использовать данный формат, так как снижается размер файлов, а значит повышается скорость загрузки сайта. Но качество может быть не очень приемлемым, тогда стоит понизить степень сжатия или использовать другой формат;
• png – отличный вариант, этот формат создавался как раз для веб. Качество изображений на приемлемом уровне, но может быть большой размер файлов. Если нужна поддержка прозрачности – это формат вне конкуренции;
• gif – следует использовать, когда необходимо сделать анимацию на сайте. В остальных случаях рекомендуется использовать другие форматы;
• svg – векторный формат, а это значит, что изображение описывается формулами, что позволяет получить максимальное качество даже при масштабировании. Используется при особой необходимости.

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