Добавление миниатюр на веб-сайты

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

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

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

Так что это оставляет мне проблему выбора между двумя во время выполнения.

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

  1. Проверьте размер экрана из javascript, сгенерируйте html в браузере (клиенте) с помощью javascript (пока не знаете, как это сделать).

  2. Проверьте агент пользователя на строку «Мобильный» и выберите сервер.

Или есть какой-то другой способ? Итак, какой из этих двух методов лучше или имеет меньше недостатков?

Я бы предположил, что "2" лучше, так как он работает даже при отключенном javascript
Я использую Perl Dancer2, если это как-то помогает


javascript html perl dancer
person tejas    schedule 31.05.2016    source источник
comment
Является ли CSS вариантом? Если это так, я бы посоветовал вам взглянуть на медиа-запросы, так как вы можете определить класс, который представляет ширину вашего изображения равной 500 пикселей, если ширина браузера ‹ 800 пикселей, и ширину изображения 700 пикселей, если ширина браузера = 800 пикселей (эти ширина - это просто пример).   -  person Shoeless    schedule 31.05.2016
comment
В этой статье есть несколько полезных ресурсов: smashingmagazine.com/2013/ 07/   -  person Josh Rumbut    schedule 31.05.2016
comment
@Shoeless Я на самом деле использую это, чтобы изменить размер элементов, чтобы они соответствовали размеру экрана прямо сейчас. Но как это поможет решить, какую миниатюру выбрать? насколько я понимаю, если я укажу 500 пикселей в CSS, он все равно загрузит большой файл и масштабирует его до 500 пикселей на экране.   -  person tejas    schedule 31.05.2016
comment
Ах я вижу; Я думал, вы изменяете размер одного и того же изображения. Если вы хотите загружать разные изображения с помощью CSS, я бы посоветовал взглянуть на SRCSET.   -  person Shoeless    schedule 31.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что лучший вариант - использовать медиазапросы, как показано здесь

Вы всегда можете написать в html два размера, но с медиазапросами будет показан только один.

Другой способ - получить с помощью javascript высоту и ширину окна, вы будете знать, какое разрешение имеет клиент, использующий Интернет, поэтому вы можете добавить к изображениям _full или _low, чтобы различать эти случаи.

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

У вас есть несколько примеров медиазапросов здесь

person pianista    schedule 31.05.2016
comment
Медиа-запросы не будут соответствовать требованию, потому что OP не масштабирует одно и то же изображение для разной ширины — изображения представляют собой разные файлы для разной ширины. - person Shoeless; 31.05.2016

arrow_upward
0
arrow_downward

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

Вот пример из их статьи:

<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />
person Shoeless    schedule 31.05.2016