Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Картинки на сайте. Тег <img>

Для вставки в текст картинки используется одиночный тег <img> с обязательным атрибутом src, указывающим адрес графического файла. Адрес изображения задается так же, как и адрес ссылки. Например:

<img src="image.gif" alt="Картинка в формате gif">
<img src="jpeg/image.jpg" alt="Картинка в формате jpeg">
<img src="/image/image.png" alt="Картинка в формате png">

Вставка изображения разных форматов:

<picture>
    <source src="image.webp" type="image/webp">
    <source src="image.avif" type="image/avif">
    <img src="image.jpg" alt="description">
</picture>

Форматы изображений

GIF
Формат Graphical Interchange Format. Точное название – GIF89A. Был разработан для сети CompuServe. После ряда усовершенствований приобрел много важных свойств, включающих:
  • сжатие данных без потерь;
  • поддержка прозрачного фона, т. е. возможность создания изображений с прозрачными участками (любой пиксель может быть либо полностью прозрачным, либо абсолютно непрозрачным);
  • чересстрочный вывод на экран, что дает возможность рассмотреть изображение до конца загрузки.

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

JPEG
Был создан группой экспертов в области фотографии (Joint Photographic Experts Group) в результате разработки стандартного метода сжатия фотографических изображений "с потерями". Основные свойства формата:
  • сжатие "с потерями", поэтому изображение теряет некоторые (несущественные) детали;
  • размер файла сжатого изображения, как правило, меньше, чем в случае GIF, т.е. файл передается быстрее;
  • поддержка 16,7 миллионов цветов, что обеспечивает очень хорошее качество цветопередачи;
  • потеря деталей вокруг четких контуров (дрожание линий), что делает формат непригодным для передачи изображений с высокой четкостью и графического текста.
PNG
Формат Portable Network Graphics был разработан в 1995 году, чтобы прийти на смену формату GIF после действий Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были переработаны некоторые технические характеристики, в частности, улучшено сжатие и увеличено количество поддерживаемых цветов. Только в формате PNG можно сохранить полупрозрачные области картинок (например, тени). Основные достоинства формата:
  • сжатие без потерь;
  • поддержка 254 уровней частичной прозрачности, что позволяет сохранить полупрозрачные области картинок (например, тени);
  • двумерная чересстрочная развёртка.
WEBP
Новый формат, пришедший на смену gif и png. Формат разработан Google. WebP отличается значимо меньшим размером файла при аналогичном качестве изображения. Формат webp поддерживает сжатие как с потерями, так и без, а также полупрозрачность и анимацию.
AVIF
Новейший формат AVIF для изображений в интернете.
  • на 20% лучше, чем WEBP;
  • на 50% лучше, чем JPG. Но иногда JPG сжимает лучше.

Атрибуты тега <img>

src
Адрес графического файла.
alt
Альтернативный текст. Позволяет получить текстовую информацию об изображении при отключенной в браузере загрузке изображений. Является обязательным атрибутом для SEO-продвижения сайта.
title
Всплывающий текст, появляющийся при наведении курсора мышки на изображение.
width
Реальная ширина изображения в пикселях.
height
Реальная высота изображения в пикселях.

Атрибуты width и height при совместном использовании позволяют браузеру зарезервировать место на экране для изображения еще до того, как оно будет передано по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Атрибуты width и height должны задавать реальный размер изображения. Например:

<img src="venera.jpg" width="110" height="168" alt="Венера Милосская" title="Венера Милосская">

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

Проверить поддержку WebP в браузере можно через JavaScript код:

function check_webp_feature(feature, callback) {
    var kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
    var result = (img.width > 0) && (img.height > 0);
    callback(feature, result);
    };
    img.onerror = function () {
    callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Пример проверки поддержки браузера на PHP

/** возвращаент ссылку на картинку формата webp или png в зависимости от поддержки браузера
* @param $fil - относительный путь
* @return string
*/
function ImgPngWebP($fil)
{
    $fil = (strrchr(basename($fil), '.') !== false ? substr($fil, 0, strrpos($fil, '.')) : $fil) . '.';
    $f = $_SERVER['DOCUMENT_ROOT'] . $fil;
    if (empty($_SERVER['HTTP_ACCEPT']) || empty($_SERVER['HTTP_USER_AGENT']) ||
        strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false ||
            strpos($_SERVER['HTTP_USER_AGENT'], ' Chrome/') !== false){ // webp is supported!
        if (!file_exists($f . 'webp') && file_exists($f . 'png')){
            $srcImage = @imagecreatefrompng($f . 'png');
            imagepalettetotruecolor($srcImage); // иначе иногда будет вылетать при сохранении в webp
            imagealphablending($srcImage, true);
            imagesavealpha($srcImage, true);
            imagewebp($srcImage, $f . 'webp', 85);
            imagedestroy($srcImage);
            file_put_contents(fb_logdir . 'img.log', date('d.m.y') . 'создал ' . $fil . 'webp ' . @filesize($f . 'webp'));
        }
        return $fil . 'webp';
    } else {
        if (!file_exists($f . 'png') && file_exists($f . 'webp')){
            $srcImage = @imagecreatefromwebp($f . 'webp');
            imagepalettetotruecolor($srcImage); // иначе иногда будет вылетать при сохранении в webp
            imagealphablending($srcImage, true);
            imagesavealpha($srcImage, true);
            imagetruecolortopalette($srcImage, false, 256);
            imagepng($srcImage, $f . 'png', 6, PNG_ALL_FILTERS);
            imagedestroy($srcImage);
            file_put_contents(fb_logdir . 'img.log', date('d.m.y') . ' создал ' . $fil . 'png ' . @filesize($f . 'png'));
        }
        return $fil . 'png';
    }
}

Для конвертации изображений можно использовать бесплатный сервис гугл: Squoosh.

Читать дальше: Таблицы


.