Что если пользователь запретил показ изображений на страницах?
 

Как правильно верстать в таких случаях? Располагать текст за картинками?
Если да, то как правильно это сделать?
Есть ли кроссбраузерный вариант решения?

Значит он увидит то, что он увидит... :D

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

чтобы не сплющивался блок с картинкой, можно задать картинкам ширину и высоту самому, можно будет задать цвет, таким образом показав, что "тут была картинка"

можно в div и не обрамлять, зачем лишний элемент, просто в стилях img все прописать

<img src="xxx" alt="Картинка" style="width:200px; height:100px; background:gray; color:white; display:block;">

а зачем 'display:block'. IMG ведь инлайновый элемент

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

Если изображение исключительно для декорации (элемент дизайна) — альтернативный текст не требуется, достаточно сохранить структуру и разметку документа (форматирование, габариты, отступы).

поставьте display:inline-block, если это нужно
без display:... бывает FF размеры, даже если они указаны не держит когда не может загрузить изображение

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

хороший вопрос... НЕТ (там канвас, я отключил показ картинок в хроме.. и шиш)

Так. То есть, отключение показа изображений так же "отключает" канвас на странице? Вообще никакие средства графического отображения использовать не получится?

Зачем извращаться. Если юзер отключает картинки знач ему это надо. Пусть мучается.))

Вообще я последнее время отрубаю сss нафиг. Стократ удобнее читать.)

векторная графика работает http://raphaeljs.com/tiger.html

Диоген детектед.

А вообще, по теме - мне просто интересно, как они (браузеры) поступают.

не работает. Opera 11.52

Вот это точно сработает)
http://www.romancortes.com/blog/homer-css/

trikadin,
CSS получится :)
Некоторые на нём рисуют.
Как вариант: делать таблицы с размером ячейки в один пиксель и задавать каждой бэкграунд (через JS, например) - тормозить будет жутко! Но зато можно втюхать наглому юзеру изображения.

Nanto, я знаю, спасибо) В своё время писал рисовалку на дивах)

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

Ну, гипотетически, посылать можно в пожатом виде и парсить js'ом.))

Хм. Типа, применять алгоритмы сжатия? А вот это интересно, кстати.

https://github.com/dankogai/js-deflate
Валяй.) Но с автоматическим gzip пожатием это не будет иметь особого смысла.) Если бы оный вообще имел место в данном вопросе.))

trikadin,
Aetae,
Сколько бы это ни было, кто нибудь задумался что такое картинка 300х400 пикселов? 120000 дивов? я правильно посчитал?

poorking, всем понятно что это глупости.)

Я тестировал в своё время.)
ФФ медленно но верно отрисовывает 512*512, остальные примерно на 512*256 дохнут.))
Мож сейчас что и поменялась, но это представят исключительно научный интерес)

poorking, задумались, по-моему, уже даже писал выше. В любом случае, обсуждение just for lulz.

Можно не применять к каждому диву стили, связанные с absolute position. Например, вывернуться с position: relative, заставив браузер самому располагать "пиксели" друг за другом. Дальше, вторая оптимизация (ну, вроде как оптимизация) - это создавать классы, которые отвечают за определённый цвет. Тогда браузеру не придётся просматривать отдельный стиль каждого элемента, а применять сразу по группам, что незаменимо, скажем, при простой графике (не фото).

А системные параметры какие? Оперативка, проц, видюха?

а что с канвой? неужто при отключении отображения картинок в браузере, канва перестает работать?

Да, перестаёт. Там где-то выше ссылка была - у меня в ff при отключённых изображениях не заработала.

Иначе бы мы тут не обсуждали ЭТО)

мда... предел дебилизма.

Не совсем. Если бы не отключали, все бы грузили картинки ajax'ом и показывали бы через канву или векторную.

Я ради смеха отрендерил 300*400 span-ов 1х1px это заняло ~30секунд, конечно от тачки зависит. Большие картинки можно пикселизовать. Например написать такой движок, который картинку будет бегать по картинке, но не по каждому пикселу, а по мнимым так сказать квадратикам снимать средний цвет, а в ответом будет массив-матрица этих цветов и размер "пиксела".

UPD прошу прощения про время кажется наврал. за ~30 секунд просто создавалось 1920х1080 span-ов, отрисовать за раз их не осилил, можно попробовать вставлять их частями. а 300х400 гораздо быстрее, но не помню сколько, эксперимент проводил когда только заговорили об этом

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

devote,
ну решение всегда есть, просто какой смысл развивать технологию? Как бы не удалось ее оптимизировать она все равно будет очень ресурсоемкой и кому она нужна? Как уже сказано было выше, если юзор отключил картинки, значит этого хотел очень, и впаривать ему нехорошо

Я конечно не в теме, но вот давно что сделал: ссылка.

Жестоко. На чём переводил? PHP?

Да.

<!DOCTYPE HTML>
<html>
<body>   
<style>
#hell{width:765px}
#hell div{float:left;width:1px;height:1px}
</style>
<input type="button" value="stop">
<div id="hell"></div>
  <script>
(function(){

var d = document.getElementById('hell') ,
    blocks = 0, timer;
    
document.getElementsByTagName('input')[0].onclick = function(){
  clearTimeout(timer);
  alert(blocks+' blocks')
};

(function(){
  var i=765, r=0, g=0, b=0;
  blocks += i;
  while(i--){
    d.appendChild( document.createElement('div') ).style.backgroundColor = 'rgb(' + (i%3?r:++r) + ',' + (i%3-1?g:++g) + ',' + (i%3-2?b:++b) + ')';
  }
  timer = setTimeout( arguments.callee , 100 )
})()

})()
</script>
  
</body>
</html>

Протестируй свою тачку.))

На 27540 мне надоело)

Да опера прорисовала 90% рисунка и тупо остановила процесс... Совсем немного не дотянула :)

А что она должна была дотянуть? Там цикл же бесконечный.

....

Ну! А таймер-то каждый раз ставится!

а ну да... ну значит до квадратной картинки у меня отрисовал он 90% тоесть еще 10% и был бы квадрат