>Zina: /* Image placeholders */

2024-11-27T09:05:03Z

Image placeholders

Нова сторінка

* Размеры для [[Retina]]
* '''[https://responsivebreakpoints.com/ Responsive Image Breakpoints Generator] — !!!'''
* [https://dev.to/manu4543/responsive-images-a-reference-guide-from-a-to-z-30aa Responsive Images - A Reference Guide from A to Z]

== Image placeholders ==

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

* http://dummyimage.com/600x16:9 — автоматическое вычисление размера картинки по одной стороне (600 px) и заданной пропорции (16:9)
* https://fakeimg.pl/1300x730
* http://fpoimg.com/600x400?text=Текст+картинки — с размером и текстом
* http://fpoimg.com/600x400 — только с размером
* http://dummyimage.com/600x400&text=Текст+картинки — только с текстом
* https://placekitten.com/ — с котятами

== Максимальные размеры картинок ==

Согласно статистике [[Размеры разрешений экранов]] (см. также в виде [https://docs.google.com/spreadsheets/d/1kZ877-GMR-EWVzd97ITfL9tjniziy9IdQt2AUGZOzmk/edit#gid=462480101&fvid=1426812764 таблицы]), самые большие из востребованных размеров:

* горизонтальный — '''1920x935 px''' (ViewPort, разрешение 1920x1080 px) — Full HD — 1-е место по распространенности и перспективности: большинство современных мониторов и ноутбуков. Мониторы от 21,5″ до 27″ и ноутбуки от 13″ до 17″;
* вертикальный — 1024x1366 px (и ViewPort и разрешение) — iPad Pro 12.9″

На вертикальном размере iPad Pro картинка хорошо смотрится не на весь экран, а с полями. Поэтому ориентируемся на десктопный горизонтальный размер 1920x935 px, который одновременно является и самым популярным среди всех — 18%.

В качестве стандартного соотношения сторон изображения используем 4:3 (1,33) — это наиболее популярная пропорция у цифровых фотоаппаратов. Ближайшие подходящие размеры:

=== 4:3 (1,33) ===

Горизонтальные:

* '''1280x960''' — оптимальный максимальный размер изображения (целое, также это стандарт SXGA−)
* 1152x864

Вертикальные:

* '''960x720'''
* 935x701
* 950x714
* 960x722
* 900x677

=== 16:9 (1,77) ===

Горизонтальные:

* '''1707x960'''
* 1664x936 (целое)
* 1655x935

Вертикальные:

* '''540x960''' (целое)
* 531x944
* 527x936

=== А4 — 210x297 мм (1,41) ===

Горизонтальные:

* '''1360x960''' (1358x960)
* 1344x950
* 1322x935
* 1315x930
* 1273x900

Вертикальные:

* '''680x960''' (679x960)
* 672x950
* 661x935
* 658x930
* 636x900

<div class="note">
'''Устарело'''

По статистике имеющихся в продаже мониторов видно, что сейчас (2017 год) популярны мониторы с разрешениями 1920x1080 (415 моделей) и 2560x1440 (58 моделей). Из этого делаем выводы:

* максимальная ширина бэкграундов — '''2560 px'''
* максимальный размер картинок на странице — диктуется шириной контейнера, т.е. для Bootstrap 4 это 1140 px, для Bootstrap 3 — 1170 px.

Наблюдения за портфолио Лебедева подтверждают: 820-1200 px.
</div>

== Пропорции картинок ==

При выборе размера большой горизонтальной картинки имеет смысл ориентироваться на соотношение сторон широкоэкранного формата телевидения высокой четности '''1,78:1''' (16:9), как наиболее распространённого в современных компьютерных мониторах (960×540, 1280×720, 1366×768, 1600×900, 1920×1080). https://ru.wikipedia.org/wiki/Соотношение_сторон_экрана

Также соотношение 16:9 используется в [https://support.google.com/business/answer/6335804 Google Мой Бизнес].

Второй подход — придерживаться пропорции '''1,91:1''', как [https://developers.facebook.com/docs/sharing/best-practices#images рекомендует] Facebook. Это соотношение связано с пропорциями на десктопе и на мобильных устройствах.

== Адаптивные картинки ==

* [https://html5book.ru/css3-mediazaprosy/#part3 CSS3-медиазапросы]
* [https://webdesign.tutsplus.com/ru/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015 Заметка: как использовать HTML "picture" для адаптивных изображений]
* [https://jakearchibald.com/2015/anatomy-of-responsive-images/ The anatomy of responsive images - JakeArchibald.com]
* [https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=ru Изображения | Web | Google Developers]
* [http://responsiveimages.org/ ResponsiveImages.org]
* [https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images Responsive images - Изучение веб-разработки | MDN]

Два направления — mobile first и desktop first:

(max-width: 767px) 200vw, (max-width: 1023px) 150vw, 100vw
(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw

== Размеры PDF для презентаций студии ==

Размер должен быть таким, чтобы хорошо смотреться и при просмотре PDF в браузере, и при печати на принтер.

Пока есть два варианта размеров, которые кажутся разумными.

=== 800x450 (16:9) ===

Оптимальное соотношение сторон — '''16:9'''.

В Illustrator при создании документа выбирать профиль "Для Интернета", размер '''800x450''' пкс.

Если вставить прямоугольник этого размера на горизонтальный лист формата А4, он нормально помещается, т.е. будет корректно распечатываться.

В Photoshop использовать этот же размер, но с масштабированием под 96 dpi — т.е. '''1067x600''' пкс.

=== 800x550 ===

Этот размер ближе к формату А4, т.е. лучше распечатывается.

В Photoshop этот размер с масштабированием 96 dpi равен <code>1066x733</code> пкс.

== Размеры для социальных сетей ==

=== Картинки профиля ===

==== Facebook ====

* Cover photo: 851x315 px, < 100 kb, jpg, sRGB (см. [https://www.facebook.com/help/266520536764594 офсайт]). Шаблон PSD можно взять здесь https://blog.bufferapp.com/facebook-cover-photo
* Profile: 340x340 px (будет уменьшена до 170x170 px), png. Нужно еще проверить вариант 1290x1290 px, png, 8 bit — такой вариант предлагает сам Фейсбук.

==== Twitter ====

* Cover photo: 3000x842 px
* Profile: 400x400 px

==== Google My Businness ====

* Cover: 2048x1191 px

==== 2GIS ====

* Cover: 1461x850 px

=== Картинка поста ===

Итого: оптимальный размер картинки для расшаривания одновременно в Twitter, Facebook и Google+:

* под Ретину: <big>'''1200 x 630'''</big> пкс
* минимальный: '''544 x 285''' пкс

==== Facebook ====

* Shared Link: 1,200 x 627
* Highlighted Image: 1,200 x 717 (Recommended)

<div class="hint">
Ширина 544 пкс — это ширина viewport <code>sm</code> в Bootstrap 4, и этот размер наиболее близок к настоящим размерам изображений в лентах соцсетей:

* [https://www.facebook.com/zinasocial/posts/1230365190417636 Facebook] — 474x247, 487x255
* [https://twitter.com/ZinaSocial/status/838793397100036097 Twitter] — 573x300, 506x254, 558x280, 560x281
* [https://plus.google.com/u/0/117715662870189960508/posts/1MnwtthzWYL Google+] — 530x278

Высота 285 пкс (и 630 пкс для картинки под Ретину) вычисляется с учетом пропорции 1,91:1 — эта пропорция [https://developers.facebook.com/docs/sharing/best-practices#images используется] в Facebook и корректно отображается в Google+.

Размер 1200 x 630 для ретины (устройств с высоким разрешением) — это рекомендация Facebook.

[https://docs.google.com/spreadsheets/d/11LmTT89rk2DvsF71t47a-MdkKVn_7sgzcEFS4JMdVoQ/ Тестирование размеров картинок]

{| cellpadding="5" border="1" style="border-collapse:collapse"
|-
! !! Квадрат !! Прямоугольник !! Максимум !! Главное
|-
| '''Facebook''' || 154×154 || 470×246 (1,91:1) || 1200×627 || Не менее 600 x 315 пикселей, однако рекомендуется использовать размер 1200 x 630 пикселей или более. Размер файла изображения не должен превышать 5 МБ. Если не хотите, чтобы изображение было обрезано, выбирайте соотношение сторон 1,91:1 или близкое к нему.
|-
| '''Twitter''' || 120×120 || 420×220 (1,91:1)<br>min 280×150 || 1024×512 || Пропорция изображения в ленте 1,91:1, реальный размер в ленте 420×220. Для вручную загружаемых файлов ограничения: max вес файла — 5 мб для фото, 3 мб для GIF. Для загружаемых через [https://dev.twitter.com/cards/types/summary-large-image Twitter Cards] — 1 мб.
|-
| '''Google+''' || 150×150 || 497×373 (1,33:1)<br>426×213 (2:1) || || Если ширина изображения меньше 400 px, то Google+ сделает превьюшку Thumbnail. [https://developers.google.com/+/web/snippet/article-rendering Описание с примером].
|}
</div>

=== Размеры элементов оформления профиля ===

* [https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/ 2017 Social Media Image Sizes Cheat Sheet]
* [http://sproutsocial.com/insights/social-media-image-sizes-guide/ Always Up-To-Date Guide to Social Media Image Sizes]
* [https://blog.bufferapp.com/ideal-image-sizes-social-media-posts Your Free Guide to Every Ideal Image Size on Social Media]

=== Slack и Small.chat ===

Team Icon https://zinadesign.slack.com/customize/icon

* Размер — 132×132 пкс или больше.
* Без прозрачности.
* Лучше графический знак, чем текст.
* Оставить немного пространства вокруг иконки.

== Оптимальные размеры сетки изображений товаров для Bootstrap ==

[[Файл:Bootstrap-grid-12.png]]

{| class="wikitable"
|-
! Префикс !! Ширина<br>внутренняя,<br>без padding !! Ширина<br>полная<br>(бэкграунд) !! Сколько полных колонок может быть
|-
| col-md-1 || 67 || 97 || 12 колонок по 97,5 px (чередуются 98 и 97)
|-
| col-md-2 || '''165''' || 195 || 6 колонок
|-
| col-md-3 || '''262''' || 292 || 4 колонки по 292,5 px (чередуются 293 и 292)
|-
| col-md-4 || '''360''' || 390 || 3 колонки
|-
| col-md-5 || 458 || 488 || 2 колонки по 487,5 px (чередуются 487 и 488)
|-
| col-md-6 || 555 || 585 || 2 колонки
|-
| col-md-7 || 653 || 683 || 1 колонка 682,5 px (682 или 683)
|-
| col-md-8 || 750 || 780 || 1 колонка
|-
| col-md-9 || 848 || 878 || 1 колонка 877,5 px (877 или 878)
|-
| col-md-10 || 945 || 975 || 1 колонка
|-
| col-md-11 || 1043 || 1073 || 1 колонка 1072,5 px (1072 или 1073)
|-
| col-md-12 || 1140 || 1170 || 1 колонка
|}

Полужирным в таблице выделены самые разумные размеры иконок — под такую сетку:

[[Файл:Bootstrap-grid-6-3.png]]

== См. также ==

* [https://calculateaspectratio.com/ Aspect Ratio Calculator - 4:3, 16:9, 21:9]
* [[Размеры разрешений экранов]]
* [[Bootstrap]]
* [http://sketchapp.me/rukovodstvo-dizajnera-po-dpi-i-ppi/ Руководство дизайнера по DPI, PPI и 4K разрешении]
* [http://lpgenerator.ru/blog/2017/01/24/optimizaciya-izobrazhenij-kak-vazhnaya-sostavlyayushaya-cro-processa/ Оптимизация изображений как важная составляющая CRO-процесса]
* [https://pacoup.com/2011/06/12/list-of-true-169-resolutions/ List of True 16:9 Resolutions]

[[Категория:Bootstrap]]
[[Категория:Дизайн]]

Размеры картинок - Історія редагувань

>Zina: /* Image placeholders */