Какие есть решения для вывода картинки записи таким образом?

Question

[Pavel Designer]

Добрый день.
Попробовал показать на картинке ниже. Сайт на Вордпресс (меняется дизайн), у записи есть главное изображение (красный прямоугольник 1), отображаемое на самой странице записи. Также есть уменьшенные превью этого же изображения, но с разным соотношением сторон (примеры желтого и синего прямоугольников), используемые в списке статей и сайдбаре. В превью изображение просто располагается по центру видимой области.

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

1. Есть ли скрипты или плагины для подобного отображения?
2. Разумно ли так уменьшать лишь одно главное изображение (при этом оно заранее оптимизировано для наименьшего веса) или всё равно лучше сделать уменьшенную копию для этих превью? По идее, одна картинка на все случаи это удобнее, чем несколько разных размеров.
3. Стоит ли вообще делать так или проще по-старинке привести все варианты отображения к единому соотношению сторон (и учесть это в дизайне темы оформления)? Сейчас разные соотношения сторон сделаны для того, чтобы сайдбар занимал меньше места по высоте, а в списке записей (плиткой) превью были более заметные.

Answer 1

[vintage]

1. Есть htmlbook.ru/css/background-size
2. Полезно всё же иметь несколько изображений разных размеров: маленькое (для превью), среднее (для просмотра) и оригинальное (на всякий случай).
3. Лучше иметь везде одно соотношение сторон, чтобы не было неприятных сюрпризов, когда в некоторых случаях будет обрезаться лишнее.

Comments

[Pavel Designer]

Содержимое видимой области будет результатом центровки исходого изображения и совершенно не страшно как там оно обрежется. Я на примере постарался показать варианты обрезки — края слева и справа или по высоте сверху и снизу.
Точно скажу, что оригинальное и среднее это будет одно изображение. Наверное, следует оставить два размера т.к. уменьшенное превью в одном варианте аналогично соотношению сторон оригинала (например 16:9), а в другом обрезано по краям (4:3). Спасибо за ответ и ссылку.

Answer 2

[ThunderCat]

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

Comments

[Pavel Designer]

Потому и хочется учесть всё на этапе дизайна. В данное время уменьшенное превью в сайдбаре аналогично соотношению сторон оригинала (например 16:9), а в плитке просто обрезано по краям (до 4:3). Причина указана в третьем вопросе.
Решил спросить мнения прежде чем делать дальше.