Адаптивный дизайн и размер картинок в контенте, что делать?

[danneo]

Как сделать, чтобы для смартфонов были маленькие фотки, для других другого размера?
Мысли такие:
1. на js подменять другой размер картинок. Но делается после загрузки страницы, а значит большие фотки уже загрузятся.
2. загружать сначала контент, а затем, после загрузки страницы на js загружать нужный размер фоток к каждой статье

Если менять содержимое страницы, можно получить фильтр за клоакинг...
Как быть, что можно сделать?

 

[Onibaka]

Выставить ширину картинок 100% (ну или другое значение в процентах) и при сжатии блока(который должен быть адапривным), картинки соответственно будут уменьшаться.
Или можно сделать два блока, один с большими, другой с маленькими картинками. Ну и блоки скрываются или появляются в зависимости от ширины экрана
Первый вариант проще и логичнее в большенстве случаев. С бутстрапом такое по крайней мере делается просто.

 

[ykpon]

Выставить ширину картинок 100% (ну или другое значение в процентах) и при сжатии блока(который должен быть адапривным), картинки соответственно будут уменьшаться.
Или можно сделать два блока, один с большими, другой с маленькими картинками. Ну и блоки скрываются или появляются в зависимости от ширины экрана
Первый вариант проще и логичнее в большенстве случаев. С бутстрапом такое по крайней мере делается просто.

В обоих случаях картинки будут качаться большими, для ПК, а уменьшаться уже средствами браузера и благодаря адаптивности.
А как я понял, автор хочет сэкономить трафик для пользователей с телефонами.
Я придерживаюсь всегда варианта создания мобильной версии на отдельном поддомене, где будут уменьшенные копии изображений отдаваться.

 

[Onibaka]

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

 

[funnywheel]

Вписывайте картинку в {адаптивный/отзывчивый} блок, выставляйте ей width: 100% (или height если нужно), как уже сказали.
Сами картинки оптимизировать (ручками при экспорте из ФШ или, если используется среда для сборки, вроде prepros - там есть функционал по оптимизации изображений. Картинка на сайте, как правило, не сильно превышает размер 600*400px (за исключением фоновых изображений и некоторых неординарных дизайнерских решений). Картинка 600*400 , будет весить килобайт эдак 60 - даже для мобильного интернета это не много. Сохраняйте картинки с прогрессивной разверткой, на мобильном даст более приемлемый вид при медленной загрузке. А основное, что действительно стоит экономить - это количество запросов к серверу - используйте спрайты и иконочные шрифты. Когда каждая картинка, которую можно поместить в спрайт, грузится отдельным запросом - на gprs'е - это очень сильно снижает скорость загрузки.

 

[danneo]

Вписывайте картинку в {адаптивный/отзывчивый} блок, выставляйте ей width: 100% (или height если нужно), как уже сказали.
Сами картинки оптимизировать (ручками при экспорте из ФШ или, если используется среда для сборки, вроде prepros - там есть функционал по оптимизации изображений. Картинка на сайте, как правило, не сильно превышает размер 600*400px (за исключением фоновых изображений и некоторых неординарных дизайнерских решений). Картинка 600*400 , будет весить килобайт эдак 60 - даже для мобильного интернета это не много. Сохраняйте картинки с прогрессивной разверткой, на мобильном даст более приемлемый вид при медленной загрузке. А основное, что действительно стоит экономить - это количество запросов к серверу - используйте спрайты и иконочные шрифты. Когда каждая картинка, которую можно поместить в спрайт, грузится отдельным запросом - на gprs'е - это очень сильно снижает скорость загрузки.

имеется в виду не дизайн, не его элементы, как таковой, а фотки в статьях

 

[funnywheel]

имеется в виду не дизайн, не его элементы, как таковой, а фотки в статьях

просто грузите большую версию фотки, точнее «thumbnail», который у Вас выводится в шаблоне. пусть они 600*400. Под брейкпоинт для мобильных, допустим, они будут во всю ширину девайса, а значит минимум - 300*200. Разница по трафику при загрузке картинки 600*400 и 300*200 будет маленькой:
- 600*400 - 37кб - Для просмотра ссылки Войди или Зарегистрируйся
- 300*200 - 12кб - Для просмотра ссылки Войди или Зарегистрируйся
(это я взял картинку поярче, чтобы были цвета, не радуга конечно, но мы то знаем, что чем больше цветов - тем больше объем изображения)
Разница - 25кб. Даже по меркам gprs, как я и говорил - экономия на спичках.

Если, конечно, есть необходимость грузить картинки по 3мб - тогда стоит подумать, зачем такие картинки грузить вообще и как этого можно избежать.

Я так понимаю Вы, в основном, работаете с DLE. Не помню уже, как обстоят дела с миниатюрами в DLE, но в WP я создаю себе правило кропа/ресайза изображения (добавляю новый размер для thumbnail'ов) и конечный пользователь может не особо заморачиваться с загрузкой картинок, движок их отресайзит/скадрирует как мне нужно.

 

[ice99]

Как сделать, чтобы для смартфонов были маленькие фотки, для других другого размера?
Мысли такие:
1. на js подменять другой размер картинок. Но делается после загрузки страницы, а значит большие фотки уже загрузятся.
2. загружать сначала контент, а затем, после загрузки страницы на js загружать нужный размер фоток к каждой статье

Если менять содержимое страницы, можно получить фильтр за клоакинг...
Как быть, что можно сделать?

Я делаю 1000px по бОльшей стороне ,но оптимизирую их по цветам. А поисковики любят большие картинки.

 

[Onibaka]

имеется в виду не дизайн, не его элементы, как таковой, а фотки в статьях

Я может что-то не правильно понял, но что опять же мешает через css выставить стиль для этих изображений вроде
.article_div img {max-width:500px; width: 100%;} опять же для декстопа размер будет фиксирован, для мобильных будет ужиматься.

 

[danneo]

Я может что-то не правильно понял, но что опять же мешает через css выставить стиль для этих изображений вроде
.article_div img {max-width:500px; width: 100%;} опять же для декстопа размер будет фиксирован, для мобильных будет ужиматься.

лишний рафик и долгая загрузка, особенной в местах с бесплатным wi-fi