Адаптивный дизайн

Основная задача - уменьшить ОБЪЁМ картинки. Для этого лучше всего сделать несколько типоразмеров (напр. 1200, 600, 300, 150px ). А вот "по мелочи" (скажем до 450) уже уменьшать как ты говоришь - html/css.

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

Интересная статья. Но проблема в том, что в данном конкретном случае все картинки у меня на сайте еще и увеличиваются. То есть малой кровью уже отделаться не удастся и это решение совсем другого уровня.

Насколько я понимаю, пока не существует адекватного решения этой проблемы.

Не проблема вообще :) :

ну или не на полное, то на ближайшее к побольше.

В моем случае, ширина миниатюры 650px.

Мне нужно:

- создавать вторую миниатюру, скажем, на 350px

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

- процентов 30 дополнительного места на диске

- дополнительные ресурсы сервера

Стоит ли вобще овчинка выделки?)

Это можно поручить не скрипту, а media. Мы ж говорим об адаптивной вёрстке :)

А можно и ява-скрипту (аяксу).

Это да. Мб даже больше.

Никаких доп. ресурсов (кроме места на винте). Даже наоборот - они уменьшатся за счет уменьшения передаваемых объемов.

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

А если вот так определять ширину экрана и высоту аналогично.

$width='<script>var ScreenWidth = screen.width; document.write(ScreenWidth);</script>';

При заливке фото режется на резличные варианты (какие нужны для медиа)

И дальше условие если ширина такая-то использовать такойто размер фото...

Ну это правда я думаю реально сделать, но помучиться придется)

Я делал 4 размера картинок и подставлял в src через скрипт буквы: f,l,m,s соотв. размеры картинок. И плюс к этому всему lazy load, если есть необходимость.

---------- Добавлено 04.03.2015 в 21:31 ----------

И как вы планируете на сервере определить разрешение экрана? Максимум девайс с которого зашли.

я выше написал, как определить ширину экрана, можно и определить ширину окна браузера. А дальше просто if else