Самый простой способ НЕ грузить картинку в display none?

есть ещё серверное решение, отдавать контент на основании юзерагента

То было на "Я не вижу плюсов picture". А так-то конечно есть и др решения :)

Если вы хотите, "вот хотьубей", делать через img

тогда делайте по принципу google pagespeed

шаг номер раз.

определяем тип устройства. (за вас это может сделать deviceJS https://github.com/matthewhudson/current-device )

далее, при помощи js или какой-либо библиотеки, вроде jQuery обегаете все img и смотрите соответствие картинок.

       	<div class="container"> 
       		<img class="modificated" src="/assets/images/null.gif" alt="hello world" data-desktop="/assets/images/logo.png" data-mobile="/assets/images/logo-mobile.png"  /> 
       	</div>
       
       	<script type="text/javascript">
	   		
			$(document).ready(function(){
				
				var type = 'desktop';
				
				if ( $('html').hasClass('mobile') ){
					type = 'mobile';
				}
				
				$('img.modificated').each(function(i,e){
					console.log(i,e);
					var image = $(e).data(type);
					if (image !== undefined)
					{
						$(e).attr( 'src', image );
					}
				})
			})
			
       	</script>

только имейте ввиду, это действие будет одноразовым

null.gif объемом 43 байта кэшируется при первом обращении, поэтому его влиянием на производительность обычно пренебрегают

Мне фиолетово как оно будет сделано - главное чтобы не было лишнего запроса в мобильной версии, поддерживалось всеми современными браузерами и решение было бы на мало строк кода.

Лучшего решения чем data:image/png;base64 пока не предложили.

Dram, Ну ок, ищите и да найдёте.

На этом наши полномочия всё

Т.е. что говорили что нет - как об стенку горохом..

И чем оно лучше-то? Приносить в жертву объёмы и затем скрывать их, "абы не было запроса" (который тоже можно избежать). Нда уж.. ну кому и кобыла невеста.

SeVlad, Я вообще слабо понимаю, зачем пытаться выпилить инициацию одного лишнего потока, если любой сайт, это десятки, если не сотни одновременно открытых потоков.

Мало того, Любой современный браузер способен качать медиаданные в 8-32 потока, независимо от того, мобильный он или десктопный.

Если заниматься оптимизацией, то лучше повыпиливать все @import из цсс, которые в принципе не могут быть многопоточными, что в разы затормаживает загрузку стилей, или, например решить проблему со скриптами, которые должны быть defer/async, иначе они тоже обладают таким приколом, как последовательная загрузка.

А заморачиваться из-за 43 байт, когда всё остальное по метру, а то и более... ну я не знаю.

Ну вот я и говорю, наши полномочия тут всё.

У меня нет импорт в ксс, да и вообще он один, сжат бротли и отдается пушем. Js отдается тоже пушем, асинхронно тоже сжат и тоже один. И вот попался мне на глаза это логотип и решил я упоротся, не судите строго ))

Перфекционизм напр. :)

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

Тема, как оказалось, не так легко решаема. Я-то, откровенно говоря был уверен, что в html5 такое появилось - просто не было задач и потому не вникал. Ведь те же версии для печати без картинок или для озвучки - там же не нужно тянуть всё, только текст. Причем может быть и текст разный.

Т.е. по идее (ну как я думал) должен же существовать простой механизм на уровне html (аля того же srcset), ан нет. Жабаскрипты и пр надо задействовать.