С момента перевода всех на новый дизайн, многие так и не смогли разобраться, какие же размеры для картинок при оформлении сообщества наиболее оптимальны. Так что сегодня мы будем разбираться и делать для Вас своеобразный гайд, который будет полезен как для администраторов сообществ, так и для тех, кто арбитражит в ВК. Итак, поехали.

Размер аватара
200х500px -- это тот размер, который рекомендует техподдержка ВК. Его можно масштабировать и под 400х1000, и под 300х750. Главное, чтобы сохранялась пропорция 2:5.
Размер миниатюры аватара - 200х200px. На этапе отрисовки необходимо сразу учитывать этот момент, чтобы лого или другой важный элемент вашей авы не был обрезан и не пришлось всё переделывать.

Размер фото в каталог товаров
Оптимальный размер 1000х1000px. Очень важно сохранять картинку для web свключённым sRGB. О правильном сохранении фото будет чуть ниже.

Размер картинки в закрепе
На самом деле, проштудировав достаточное количество доступной инфы я в очередной раз убедился, что если надо что-то сделать хорошо, надо сделать это самому. Я это к тому, что вариантов в сети описано много, но всё как-то не так: то нижняя граница закрепа не совпадает с нижней границей аватара, то слишком маленькая высота баннера, то вовсе не предусмотрена совместимость с ретиной и просто большими экранами. В общем, я решил методом проб и ошибок найти наилучший размер. В итоге я приплыл к тому, что 510х353px - это тот размер, при котором все границы будут совпадать без использования каких-либо костылей:


Казалось бы, всё отлично смотрится, можно использовать. Однако появилосьжирное "НО": при клике на закреплённую картинку на моём 22х дюймовом экране она выглядела вообще крохотулей:


При клике на аватар с размером 200х500px всё тоже было как-то грустно:


"Надо масштабировать!", -- подумал я и просто увеличил картинки вдвое. В этот раз получилось очень даже прилично:


Аватар 400х1000px уже смотрелся совершенно по-другому:


Где-то проскакивала инфа, что ВК рекомендует ширину картинки 1280px, поэтому я решил попробовать максимально приблизиться к этому значению. Умножив исходный размер на 2.5 я получил ширину 1275px и не прогадал, т.к. картинка стала открываться на максимум. Это именно то, что я пытался найти!


Аватар 500х1250px ничем не отличался от прошлого варианта. Однако именно такой размер надо использовать, если мы работаем по сетке и делаем слитные закреп и аватар.

Вывод:
Юзайте картинки 1275х883px и будет Вам счастье
Кстати, специально для подписчиков нашего паблика я сделал шаблон сетки, с помощью которой Вы без всяких проблем сможете запилить своё оформление по принципу, как на картинке ниже:


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

Как пользоваться шаблоном?
1. Скачиваем прилепленный к посту архив, распаковываем и открываем в фотошопе;


2. Закидываем в самый верх слой с готовым дизайном, либо пилим дизайн внутри шаблона;
3. Когда всё готово, удаляем слой "основа" и жмём ctrl+shift+e (склеиваем все слои)
4. Жмём букву М (включает инструмент "прямоугольное выделение") и выделяем нужный нам участок по сетке:


5. Жмём ctrl+c (скопировать выделенный участок), ctrl+n (создать новое изображение (там уже сразу будет предложен размер скопированного участка, поэтому не запариваемся и жмём enter)), ctrl+v (вставляем скопированный фрагмент), ctrl+alt+shift+s (сохранить для Web) и выставляем значения из принтскрина (в дальнейшем это делать не придется, т.к. эти параметры будут предлагаться "по умолчанию"):


6. Теперь проделываем те же самые махинации с аватаром:


Готово! Вы превосходны

Как правильно сохранять и загружать картинки
Теперь, как и обещал, немного о правильном сохранении и загрузке картинок (чтобы не терять сильно в качестве).
Во-первых, картинки должны быть в хорошем качестве изначально.
Во-вторых, сохранять надо для веба (в фотошопе сочетание клавиш ctrl+alt+shift+s) и ОБЯЗАТЕЛЬНО с преобразованием в sRGB:


В-третьих, жмём "добавить фото" и НЕ загружаем его, а просто перетаскиваем в это окошко:


С загрузкой аватара делаем тоже самое:


Я не знаю, какого ёжика нужно делать именно так, но этот способ рекомендует техподдержка вконтакте.

P.S. Шаблон встанет ровно в том случае, если в паблике есть какой-то статус. Без него съедет вёрстка.
Юзайте горячие клавиши, которые я использую в статье. Всего за день можно это дело довести до автоматизма, а время экономят и облегчают жизнь эти штуки очень даже заметно.

Как бы не было грустно, но на сегодня всё.