А теперь сам вопрос: как я понимаю браузеру пользователя придеться загружать сначала картинку полностью, а потом только уменьшать ее в размере, что скажется сильно на скорости или там алгоритм какой-то другой и все уменьшается на сервере при отдаче и пользователь скачивает уменьшенную версию?
P.S. Про метод уменьшения с помощью PHP тоже в курсе, но меня интересует ответ на мой вопрос.
Картинка скачивается оригинальная, указанная в SRC, а отображается уже согласно WIDTH и HEIGHT. Поэтому скачиватся будут 24Kb каждый раз и для большой и для маленькой (у одного и того же пользователя в большинстве случаев только один раз, так как картинки, если не отключенно кэширование, попадают в кэш браузера).
Если рассматривать два варианта: использовать большую картинку и для большой, и для маленькой против варианта маленькая + большая, подготовленные в фотошопе - однозначно второй вариант. Не жалейте 4 килобайта на мелкую картинку в пользу быстрой загрузки и экономии трафика пользователя.
Вариант уменьшения картинки в PHP имеет свои + и -.
плюс - со стороны контент-менеджера сайта. Человеку меньше геморроя при загрузке новой картинки. Так как он избавляется от необходимости обрабатывать их каждый раз в графическом редакторе, генеря уменьшенная копию. И загружать приходится только одну. Вторая (третья, десятая уменьшенная копия) создаются автоматом скриптом на PHP.
минус такого подхода - если вы будете делать уменьшение "на лету". При высокой посещаемости у вас будет высокая нагрузка на сервер.
Картинки нужно ресайзить в момент закачки на сайт и выгружать уже статические изображения (не важно скриптом, через мод рерайт подмену или с помощью прямой ссылки на файл). В этом случае они будут и кэшироваться у пользователя, и не будет дикой нагрузки на сервак.
Добавлено через 5 минут
Дак вот какой способ выбрать всвязи с моей ситуацыей что браузер обработает быстрее и мой размер CSS это нормально или я перебрал и стоит част перенести в HTML
CSS в 5 килобайт - это даже мало