скорость отрисовки img

[cyklop77]

где то читал, что для увеличения скорости отрисовки картинки стоит прописать width/height в тэге при помощи атрибутов. якобы выгода в том, что браузер сразу знает размеры картинки. выглядит примерно так

<img class="logo" src="images/logo.png" alt="Progress" width="291" height="96" />

скажите пожалуйста есть ли основания у такого приёма?

[Radiocity]

Да, если у тебя первый пентиум

[cyklop77]

понятно. то есть экономия на спичках)

[lexxcode]

Вообще это правда, но если учитывать современные процессоры, то это незначительно.

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

Примерно так.

[cyklop77]

правильно ли я понимаю?

если width/height прописать не атрибутами, а через css-файл, то браузер сначала загрузит html-файл(и соответственно элементы) в одном виде(как вы описали), а потом когда очередь дойдёт до загрузки css-файла браузер будет перерисовывать страницу. и кроме того оторисовка самой картинки(img) будет незначительно подтормаживать из-за того, что парсеру её width/height приходится искать по всему css-файлу

Edited May 5, 2012 by cyklop77

[Viper]

скажите пожалуйста есть ли основания у такого приёма?

То есть, вас интересует конкретные цифры/процент на сколько будет выиграш в скорости?

На сколько я осведомлен, размеры имеет смысл указывать только для изображений, которые загружаються с не родными размерами. Для того, что бы браузер сразу отрисовывал изображение нужного размера(1 действие), иначе он будет проводить 2 действия. Но, возможно, меня поправят...

П.С. Могу только еще добавить, что этот "приём" рекомендует Гугл, Яндекс и Яху.

[Svatov]

Коротко резюмирую Alexriz,

Если пользователь отключит картинки, верстка скорей всего поломается.

Edited May 5, 2012 by Svatov

[cyklop77]

цифры не интересуют. спасибо

[Svatov]

И используется это именно для этого, а не для скорости Хотя есть разница в поведении браузеров. И писать размеры нужно именно через атрибуты, а не свойства css, можете ответить почему?

[Viper]

Если пользователь отключит картинки, верстка скорей всего поломается.

Не понял связи... Можете обьснить?

а не для скорости

Этот метот использует Яндекс и Яху именно для повышения "скорости". А точнее, для ускорения рендеринга страницы(Reflow, repaint). Лучше всего не изменять размеры изображений. По иследованиям Яндекса, если изображения растягивать(изменять размеры, особенно, увеличивать), то скорость рендеринга(этих изображений) может увеличиться в ~2 раза.

Edited May 5, 2012 by Viper

[lexxcode]

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

По иследованиям Яндекса, если изображения растягивать(изменять размеры, особенно, увеличивать), то скорость рендеринга(этих изображений) может увеличиться в ~2 раза.

То, есть ты хочешь сказать если картинка 100x100, а я через атрибуты или css сделаю ее 300x300, то она от рисуется в 2 раза медленней?

[Svatov]

Если пользователь отключит картинки, верстка скорей всего поломается.

Не понял связи... Можете обьснить?

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

а не для скорости

Этот метот использует Яндекс и Яху именно для повышения "скорости". А точнее, для ускорения рендеринга страницы(Reflow, repaint). Лучше всего не изменять размеры изображений. По иследованиям Яндекса, если изображения растягивать(изменять размеры, особенно, увеличивать), то скорость рендеринга(этих изображений) может увеличиться в ~2 раза.

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

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

Разница есть, а все дело в трактовке спецификации, посмотрите результаты в Chrome и FF (я не про скорость, а про отображение при отключенных картинках)

Edited May 5, 2012 by Svatov

[Viper]

То, есть ты хочешь сказать если картинка 100x100, а я через атрибуты или css сделаю ее 300x300, то она от рисуется в 2 раза медленней?

Приблизительно, Да.

Во-первых пруф хотя бы какой-то

с Я.Суботника начиная с 17:05, Yahoo, Google

но так как обычно современные CMS делают это обычно за разработчика по причине указанной мною, вопрос о скорости отпадает сам собой.

Это не значит, что об этом не стоит знать/задумываться.

Edited May 5, 2012 by Viper

[Svatov]

Это не значит, что об этом не стоит знать/задумываться.

Знает тот, кто проверяет свою верстку правильно.

П.с За пруф спасибо

Edited May 5, 2012 by Svatov

[Viper]

Знает тот, кто проверяет свою верстку правильно.

Уточню, что мы находимся в разделе "Для начинающих". Вы думаете много начинающих знают подобные нюансы и как правильно проверять верстку?

[Svatov]

Ну то, что cyklop77 начинающий я бы поспорил Но это уже оффтоп)

Edited May 5, 2012 by Svatov

[wildhind]

ну и ещё один почти оффтоп: реальный смысл указывать атрибуты width/height есть, когда со страницей будет работать скрипт, которому надо заранее знать размеры картинок.

Если эти атрибуты указаны, то скрипт можно запускать по $(document).ready(), а не по $(window).load().

Впрочем, это тоже влияет на общую скорость