Простой подход к работе с отзывчивыми изображениями

[nckma]

Как раз сейчас занимаюсь этим вопросом в своем проекте.
Однако, пока не придумал как быть, когда человек получил маленькое изображение на мобильный согласно srcset, но все же хочет рассмотреть его получше?
Что обычно делают в таких случаях? Разворачивать popup окно с первоначальным большим изображением по клику на изображении в статье? Но клик такое ненадежное дело — может человек просто прокрутить статью хотел…

[Kasheftin]

Отличайте клик от драга. Хотя бы с помощью таймаута между mousedown(touchstart) и moseup(touchend).

[barkalov]

Зачем, если onсlick на тач-скринах и так интерпретируется как тап и не срабатывает при драге.

[nckma]

Я перечитал множество статей про srcset и все они примерно одинаковы, как близнецы братья, как вот эта статья. Но нигде не нашел простого доступного приемлемого решения конкретно вот этой проблемы — что делать, когда пользователь все же хочет рассмотреть картинку.
Сам я такое наверное долго буду писать, ибо не программист javascript ни разу.
Проект у меня крошечный, самопальный, при том на joomla, что сейчас уже считается наверное моветоном. Но проекту больше 10 лет и там сотни статей и тысячи картинок. Бросать жалко.
Для джумлы нашел плагин github.com/ttc-freebies/plugin-responsive-images который в статьи будет автоматически вставлять эти srcset. При этом сам плагин может создавать на лету из имеющихся статей по тегам масштабированные картинки в кеше по разным размерам. Но это может замедлить сайт.
Поэтому решил написать скрипт, который заранее создаст мне все нужные размеры:

#!/bin/bash
srcdir="/var/www/site/public_html/images"
dstdir="images"

function scandir
{
mkdir -p "${dstdir}/$1"
for i in $srcdir/$1/*
    do
	if [ -d "${i}" ] ; then
	    dir=$(basename "${i}")
	    echo "-------------------------"
	    echo "dir:  $srcdir/$1/$dir"
	    scandir "$1/$dir"
	else
	    filename_full=$(basename -- "${i}")
	    ext="${filename_full##*.}"
	    filename="${filename_full%.*}"
	    echo "file: ${filename}.${ext}"
	    if [ "$ext" = jpg ] || [ "$ext" = JPG ] || [ "$ext" = png ] || [ "$ext" = PNG ]; then
		width=$(identify -format "%w" ${i})
		if (($width > 1200))
		then
		    echo "1200"
		    convert "${i}" -quality 85 -resize 1200x1200 "${dstdir}/$1/${filename}_1200.${ext}"
		fi
		if (($width > 992))
		then
		    echo "992"
		    convert "${i}" -quality 85 -resize 992x992 "${dstdir}/$1/${filename}_992.${ext}"
		fi
		if (($width > 762))
		then
		    echo "762"
		    convert "${i}" -quality 85 -resize 762x762 "${dstdir}/$1/${filename}_762.${ext}"
		fi
		if (($width >640))
		then
		    echo "640"
		    convert "${i}" -quality 85 -resize 640x640 "${dstdir}/$1/${filename}_640.${ext}"
		fi
		if (($width >480))
		then
		    echo "480"
		    convert "${i}" -quality 85 -resize 480x480 "${dstdir}/$1/${filename}_480.${ext}"
		fi
		if (($width >320))
		then
		    echo "320"
		    convert "${i}" -quality 85 -resize 320x320 "${dstdir}/$1/${filename}_320.${ext}"
		fi
	    fi
	fi
    done
}

scandir "stories"

Примерно так (но еще не до конца потестировал скрипт)…
Не знаю что из этого получится, но буду пробовать…

[Alexufo]

Есть npm пакет для этого. Более того. Найдите крупные проекты где применяют srcset. Я только medium встречал.

[BlackStar1991]

Интересно б посмотреть на тот сайт, который может себе позволить так себе заморачиватся по поводу изображений. *Могу представить только сайт по продаже Феррари. А так всё конечно правильно написано, но что б такое поддерживать в реальном проекте на нормальном качестве надо отдельного сотрудника нанимать

[student_ivan]

Если сайт приносит прибыль, то это называется оптимизация сайта с целью повышения прибыли через лояльность клиентов. Возможно текст поста кажется сложным. Можете посмотреть моё обучающее видео на эту тему, где я показываю сочетание использования CDN imgix с IntersectionObserver. Выглядит довольно просто. Вот ссылка на момент про изображения youtu.be/EzO0hQxczjQ?t=1658

[jahwood]

Pimcore делает почти всё автоматом )

[alkonae]

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

[Kasheftin]

Когда же этот min-width закончится уже?
В нормальных браузерах поддерживается ResizeObserver (а для остальных есть iframe-хак). С его помощью легко написать свой вывод адаптивных картинок, который будет основываться на размерах доступного контейнера, а не window.
Есть и готовое из коробки, например, github.com/marcj/css-element-queries.

[Alexufo]

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

[noodles]

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

Когда-то ещё упоминали, что браузер может также учитывать качество интернет соединения. Не проверяли такие случаи?
Условно, даже если у клиента ретина дисплей, но медленный интернет — скачается картинка с меньшим разрешением, а не с 2x.

[Erinday]

Проверяли, увы, с медленным интернетом тянется тоже 2х, но ужимается в режиме Экономии трафика

[Erinday]

Ребят, ну вы чего? В 2020 без этого уже никак, стандарт
Шаг 1. Добавляем 2-6 точек под сетку
Шаг 2. Добавляем 1.5х-2х для устройств с большой плотностью пикселей
Шаг 3. Не забываем про .webp и loading="lazy"
Для любых сайтов, делает верстальщик, статику ручками, динамику отдает на бек

[Alexufo]

что это за 1 шаг такой с точками?

[Erinday]

Возмём 3 произвольные точки:

<picture>
    <source srcset="изображение_для_экранов_меньше_360" media="(max-width: 360px)">
    <source srcset="изображение_для_экранов_меньше_700" media="(max-width: 700px)">
    <source srcset="изображение_для_экранов_меньше_1240" media="(max-width: 1240px)">
    <img src="оригинальное_изображение">
</picture>

Сначала проверяется первый source, если экран устройства меньше либо равен 360px, то используется это изображение, если больше, переходит к следующему source.
Если ни один из source не подошел по условию, используется оригинальное изображение