С картинками в Дзене всё непросто, особенно с обложкой для статьи.
Размер изображения для сайта определяется шаблоном (дизайном). Размеры всех элементов дизайна сайта заранее просчитаны и сверстаны программистом, поэтому размещаемые картинки должны иметь тот размер, который был определен при создании шаблона/дизайна сайта.
При загрузке картинки большего или меньшего размера шаблон может адаптировать ее под необходимый размер (в случае, если такой функционал запрограммирован), либо показать в реальном размере.
Какой размер изображения должен быть для сайта?
В обложке важен не размер, а само изображение.
подходящий формат:
JPEG — отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии,
PNG — когда вам нужно высококачественное изображение с прозрачностью.
Если в дизайне есть графика из векторных фигур или иконки, их лучше выгружать в векторном формате SVG (Scalable Vector Graphics). Данный векторный формат изображения можно отображать на больших разрешениях без потери качества и весить он будет значительно меньше, чем png картинка.
Чем больше вес картинки, тем дольше будет грузиться страница сайта. Плюс поисковые системы дают низкую оценку тяжёлым страницам.
Итог: забудьте про фото менее 1000пкс, а лучше не менее 1200.
Кратко: Берем размеры изображений в макете и следуем 4-м принципам уточнения размера изображения
А вот несколько советов, которые помогут определиться с точным размером и не потерять в качестве и скорости загрузки страницы:
- Оптимизируйте изображения под Retina экраны. Изображение на сайт надо загружать в двукратном размере, то есть увеличенное вдвое. Это связано с оптимизацией сайтов под Retina экраны – дисплеи с увеличенной плотностью пикселей. Сейчас Retina дисплеи это не только Apple девайсы, но и их аналоги других производителей. Чтобы картинка с телефона или макбука оставалась такой же четкой как и задумано в дизайне, нужно не забывать про этот принцип.
- Оптимизируйте размер файла изображения для сайта не теряя качества картинки, есть много сервисов, которые помогут уменьшить вес изображения. Такие картинки будут быстрее загружаться на странице пкогда вы только открыли страницу сайта.
- Конвертируйте изображения в подходящий формат. Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла. JPEG — отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии. PNG — ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
- Сохраняйте иконки или векторную графику в формате SVG. Если в дизайне есть графика из векторных фигур или иконки, их лучше выгружать в векторном формате SVG (Scalable Vector Graphics). Данный векторный формат изображения можно отображать на больших разрешениях без потери качества и весить он будет значительно меньше, чем png картинка.
Рекомендуемый формат — 16:9. Вертикальные картинки мешают читать статью до конца, потому что занимают много места. Мало дочитываний — мало показов в ленте. Минимальная ширина изображения — 300px, а максимальный размер — 30 МБ
Размеры картинок для статьи в Дзене
Размеры иллюстраций не имеют значения.
- Естественно, слишком маленькая картинка займёт не всю ширину экрана и будет смотреться не вполне эстетично, но, в принципе, ничего страшного не произойдёт.
- Чрезмерно тяжёлое изображение долго загружается, а если их несколько, страница может и зависнуть.
- Обычно создается файл от 1200 до 3000 пикселей ширины.
- Картинки для статей лучше горизонтальные 1024х600 (не выше). Они прекрасно вписываются в тело статьи, и мало "весят".
Изображение лучше сделать квадратным или горизонтальным. Вертикальные долго пролистываются, поэтому читатель может уйти со статьи. Это чревато малым процентом дочитываний и временем менее 40 секунд.
Дзен постоянно пробует разные форматы публикаций и отключает старые. Напрмер, в декабре 2021 года убрали галереи, а уще раньше отказались от нарративов.