Размеры обложки - 1188х537, 1584х716

Очень часто авторы сталкиваются с проблемой выбора обложки для своего поста. На самом Scorum я не нашел информации, какого размера должны быть фото в статье. Поэтому решил разобраться в этом вопросе сам и поделиться с вами своими "исследованиями".

Для тех, кому лень читать, как я определял оптимальные размеры, скопировал вывод сюда:

Оптимальная обложка поста должна иметь соотношение ширины к высоте 2,21 (792х358) и по ширине быть не менее 1000 px (к примеру, 1188х537 или 1584х716). При этом, если вы хотите, чтобы квадратная миниатюра выглядела корректно, учитывайте, что она обрежет примерно половину картинки (равными частями по краям).

Размеры изображений

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

Размер миниатюры в ТОП-1 - 792х358

Как видим, размер такой миниатюры - 791,31х358 (практически 792х358). Однако, если зайти в сам пост, то картинка с такими размерами будет маленькой, а поэтому смотреться некрасиво. Лучше вставлять изображения размером хотя бы больше 1000 px.

Таким образом, сохраняя пропорции 792х358, оптимальный размер изображений 1188х537 либо 1584х716, исходя из соотношения сторон 792/358=2,21.

Однако, не все так просто. Есть же еще и уменьшенные миниатюры, пропорции которых не совпадает с пропорциями большой миниатюры. Их размеры следующие:

Размер обычной миниатюры - 385х176

Как видно на фото, размер обычной миниатюры составляет 384,66х176 (примерно 385х176). Соотношение сторон в таком случае 385/176=2,18. То есть, большая миниатюра немного длиннее, чем маленькая.

Стоит также учесть размеры квадратной миниатюры, которая отображается в первой записи любой рубрики, если нажать "Посмотреть все":

Размер квадратной миниатюры - 385х360

Размер такой миниатюры составляет 384,66х360 (примерно 385х360). Соотношение сторон 385/360=1,07, поэтому изображение кажется практически квадратным.

Центрирование изображений

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

То есть, к примеру, если обложка поста имеет размеры 800х720, то в квадратной миниатюре оно обрежется слева и справа примерно на 15 px (исходя из соотношения 1,07):

720*1,07=770,4 - такой должна быть ширина картинки при высоте 720;
800-770,4=29,6 - столько px обрежется суммарно по краям картинки;
29,6/2=14,8 - столько px обрежется с каждой стороны картинки.

Таким образом, НЕТ изображения, которое полностью бы отобразилось на всех миниатюрах (главной, маленькой и квадратной). Более того, ширина большой миниатюры будет примерно в 2 раза больше, чем у квадратной (2,21/1,07=2,06).

Какие изображения использовать?

Вывод простой:

Оптимальная обложка поста должна иметь соотношение ширины к высоте 2,21 (792х358) и по ширине быть не менее 1000 px (к примеру, 1188х537 или 1584х716). При этом, если вы хотите, чтобы квадратная миниатюра выглядела корректно, учитывайте, что она обрежет примерно половину картинки (равными частями по краям).