Размеры картинок
- Размеры для Retina
- Responsive Image Breakpoints Generator — !!!
- Responsive Images - A Reference Guide from A to Z
Сервисы, которые позволяют на лету сгенерировать картинку нужного размера с нужной надписью.
- 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/ — с котятами
Согласно статистике Размеры разрешений экранов (см. также в виде таблицы), самые большие из востребованных размеров:
- горизонтальный — 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) — это наиболее популярная пропорция у цифровых фотоаппаратов. Ближайшие подходящие размеры:
Горизонтальные:
- 1280x960 — оптимальный максимальный размер изображения (целое, также это стандарт SXGA−)
- 1152x864
Вертикальные:
- 960x720
- 935x701
- 950x714
- 960x722
- 900x677
Горизонтальные:
- 1707x960
- 1664x936 (целое)
- 1655x935
Вертикальные:
- 540x960 (целое)
- 531x944
- 527x936
Горизонтальные:
- 1360x960 (1358x960)
- 1344x950
- 1322x935
- 1315x930
- 1273x900
Вертикальные:
- 680x960 (679x960)
- 672x950
- 661x935
- 658x930
- 636x900
Устарело
По статистике имеющихся в продаже мониторов видно, что сейчас (2017 год) популярны мониторы с разрешениями 1920x1080 (415 моделей) и 2560x1440 (58 моделей). Из этого делаем выводы:
- максимальная ширина бэкграундов — 2560 px
- максимальный размер картинок на странице — диктуется шириной контейнера, т.е. для Bootstrap 4 это 1140 px, для Bootstrap 3 — 1170 px.
Наблюдения за портфолио Лебедева подтверждают: 820-1200 px.
При выборе размера большой горизонтальной картинки имеет смысл ориентироваться на соотношение сторон широкоэкранного формата телевидения высокой четности 1,78:1 (16:9), как наиболее распространённого в современных компьютерных мониторах (960×540, 1280×720, 1366×768, 1600×900, 1920×1080). https://ru.wikipedia.org/wiki/Соотношение_сторон_экрана
Также соотношение 16:9 используется в Google Мой Бизнес.
Второй подход — придерживаться пропорции 1,91:1, как рекомендует Facebook. Это соотношение связано с пропорциями на десктопе и на мобильных устройствах.
- CSS3-медиазапросы
- Заметка: как использовать HTML "picture" для адаптивных изображений
- The anatomy of responsive images - JakeArchibald.com
- Изображения | Web | Google Developers
- ResponsiveImages.org
- 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 в браузере, и при печати на принтер.
Пока есть два варианта размеров, которые кажутся разумными.
Оптимальное соотношение сторон — 16:9.
В Illustrator при создании документа выбирать профиль "Для Интернета", размер 800x450 пкс.
Если вставить прямоугольник этого размера на горизонтальный лист формата А4, он нормально помещается, т.е. будет корректно распечатываться.
В Photoshop использовать этот же размер, но с масштабированием под 96 dpi — т.е. 1067x600 пкс.
Этот размер ближе к формату А4, т.е. лучше распечатывается.
В Photoshop этот размер с масштабированием 96 dpi равен 1066x733 пкс.
- Cover photo: 851x315 px, < 100 kb, jpg, sRGB (см. офсайт). Шаблон PSD можно взять здесь https://blog.bufferapp.com/facebook-cover-photo
- Profile: 340x340 px (будет уменьшена до 170x170 px), png. Нужно еще проверить вариант 1290x1290 px, png, 8 bit — такой вариант предлагает сам Фейсбук.
- Cover photo: 3000x842 px
- Profile: 400x400 px
- Cover: 2048x1191 px
- Cover: 1461x850 px
Итого: оптимальный размер картинки для расшаривания одновременно в Twitter, Facebook и Google+:
- под Ретину: 1200 x 630 пкс
- минимальный: 544 x 285 пкс
- Shared Link: 1,200 x 627
- Highlighted Image: 1,200 x 717 (Recommended)
Ширина 544 пкс — это ширина viewport sm в Bootstrap 4, и этот размер наиболее близок к настоящим размерам изображений в лентах соцсетей:
Высота 285 пкс (и 630 пкс для картинки под Ретину) вычисляется с учетом пропорции 1,91:1 — эта пропорция используется в Facebook и корректно отображается в Google+.
Размер 1200 x 630 для ретины (устройств с высоким разрешением) — это рекомендация Facebook.
Тестирование размеров картинок
| Квадрат | Прямоугольник | Максимум | Главное | |
|---|---|---|---|---|
| 154×154 | 470×246 (1,91:1) | 1200×627 | Не менее 600 x 315 пикселей, однако рекомендуется использовать размер 1200 x 630 пикселей или более. Размер файла изображения не должен превышать 5 МБ. Если не хотите, чтобы изображение было обрезано, выбирайте соотношение сторон 1,91:1 или близкое к нему. | |
| 120×120 | 420×220 (1,91:1) min 280×150 |
1024×512 | Пропорция изображения в ленте 1,91:1, реальный размер в ленте 420×220. Для вручную загружаемых файлов ограничения: max вес файла — 5 мб для фото, 3 мб для GIF. Для загружаемых через Twitter Cards — 1 мб. | |
| Google+ | 150×150 | 497×373 (1,33:1) 426×213 (2:1) |
Если ширина изображения меньше 400 px, то Google+ сделает превьюшку Thumbnail. Описание с примером. |
- 2017 Social Media Image Sizes Cheat Sheet
- Always Up-To-Date Guide to Social Media Image Sizes
- Your Free Guide to Every Ideal Image Size on Social Media
Team Icon https://zinadesign.slack.com/customize/icon
- Размер — 132×132 пкс или больше.
- Без прозрачности.
- Лучше графический знак, чем текст.
- Оставить немного пространства вокруг иконки.
| Префикс | Ширина внутренняя, без padding |
Ширина полная (бэкграунд) |
Сколько полных колонок может быть |
|---|---|---|---|
| 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 колонка |
Полужирным в таблице выделены самые разумные размеры иконок — под такую сетку:
