Какие фото загружать на карточку товара в пиктограмки: полные или маленькие?

R1
На сайте с 29.03.2009
Offline
107
1299

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

Вопрос как лучше делать пиктограмки - загружать маленькие изображения или полные (отображаются они все равно маленькими). В первом случае страница быстрее загружается, во-втором - быстрее идет смена картинок. Размер большой картинки примерно 500х750px, вес около 100 кб.

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

Maxim-KL
На сайте с 26.01.2011
Offline
350
#1

rdm123, Делайте как вам удобней и так что бы много времени на єто не тратить.

Мои услуги по прогонам: ✅Качественный ручной статейный прогон по базе сайтов с ИКС10+ (maximgroups.net/progon-statejnyj) ✅Прогон Максимум - Все включено, 300+ качественных ссылок (maximgroups.net/progon-maksimum)
vandamme
На сайте с 30.11.2008
Offline
675
#2

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

K
На сайте с 03.06.2015
Offline
45
#3

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

В идеале тумба должна быть в actual size, тогда все будет показано без преобразований пикселов. Но как правило и особенно с учетом мобильной адаптации такое счастье не светит.

Тем не менее я бы посоветовал грузить маленькие, а большие запрашивать с сервера как таковые. Чтобы вьюпорт не дрыгался, вам надо лишь завести его обновление в событие onload затребованной картинки и для большего счастья сделать мягкую смену - через crossfade между фотками иди через белый.

Адрес больших картинок обычно пишут в дата- атрибут маленькой и все под рукой.

MYSQL PHP JS HTML CSS SEO TXT США СССР
R1
На сайте с 29.03.2009
Offline
107
#4
vandamme:
делайте как в других популярных магазинах, да вот даже яндекс-маркет пример, среднее фото, по клику - большое.

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

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

---------- Добавлено 20.08.2015 в 16:00 ----------

kostyanet:
Адрес больших картинок обычно пишут в дата- атрибут маленькой и все под рукой.

Технически программист все сделает как нужно, он только спрашивает сейчас нужно ли картинки резать для пиктограмок или нет. Но ваш совет я понял, спасибо.
K
На сайте с 03.06.2015
Offline
45
#5
rdm123:
человек с медленным интернетом

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

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

---------- Добавлено 20.08.2015 в 16:06 ----------

То есть можно использовать время idle для загрузки доп-контента.

Top for the good
На сайте с 16.02.2008
Offline
322
#6
rdm123:
А что вы посоветуете?

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

Чем вам помочь в SEO продвижении или юзабилити сайтов?
(https://topuser.pro/) Увеличить доход от РСЯ и AdSense (https://topuser.pro/uvelichit-dohod-adsense/)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий