Превьюшки бывают четырёх типов:

1. фиксированные по длине и % по высоте от оригинала
2. фиксированные по высоте и % по длине от того же оригинала
3. фиксированные по длине и высоте (с обрезанием части после масштабирования, которая не вписана, например 300х150)
4. процентный масштаб (25% от оригинала, к примеру)

И каждый, кто создает галерею задается вопросом: «сколько вешат граммов?» «сколько превью разместить по дефолту в галерее?»

Если у вас изображения c разным соотношением сторон и «свободный контейнер» и вы используете 1, 2 или 4й (если такой тип с его дизайнерами еще не вымерли в вебе), то эта заметка вам погоды не сделает. Но если вы используете 3й тип, или используете 1 или 2 и все изображения имеют у вас одинаковое соотношения сторон, то вам сюда.

Когда у вас резиновый дизайн, то превьюшки плавно растекаются по свободному пространству. Это выглядит очень круто до того момента, пока юзер не долистал до самого низа. Далее он видит переход на следующую страницу и… «лесенку» или «зуб», это последние несколько превьюшек, которые выпирают из общей сетки. Вот в этот момент люди начитают использовать трюки с CSS, центрировать их, в общем окунаются по полной для достижения идеального дизайна. Или используют на masonry вот такой жестокий трюк с котятами, все равно подчищая хвосты… Компьютерныйбоже им судья.

Мои же личные фломастеры со сгрызенными колпачками и выпитыми чернилами предпочитают фиксированные галереи где есть отступ между картинками и с краев. Вот такие вот:



Я использую masonry и magnific popup, а дефолтное количество изображений в моих галереях — 60.

Шестьдесят (60), это число, которое делится без остатка на 2, 3, 4, 5 и 6 и, конечно же, на 1.

Сея магия чисел позволяет вам охватить аудиторию от «мобильников» до широкоформатников без искажения и прочей безконтрольной езды дизайна вашей галереи.



Конечно, на вкус и цвет есть гугл и яндекс, есть лебедев и есть «каждый третий гуру», но в плане создания простой галереи без ломания головы сей трюк (60!) вам непременно сослужит добрую службу.

Превьюшки на примерах имеют размер 160 на 300 пикселей. Мое личное наблюдения как очкарика, 300 пикселей по длине и % масштаб по высоте очень удобное и компактное решение. Таким образом 60 превьюшек в 80м качестве imagemagick займут у вас около 600кб траффика (от 8 до 12кб на каждую), которые можно ловко обернуть в lazyload как на этом примере (я не автор примера!).

З.Ы, без прав рекламы — лучшие фломастеры это детские. Их можно грызть, перемазать язык и зубы без шанса отравится. Данный метод дает +2 к алгоритмам, ибо мозг работает лучше. Ух лучше их, чем чипсы орешки.

Про магию числа 69 и его её практическое применение я расскажу в следующих статьях.

upd: с картинками какая-то ерунда. Я их вставляю, далее хабр пытается что-то сделать и выдает

<img src="1449681149734756164123" alt="image"/>

теперь с hsto