Википедия:Советы по размещению иллюстраций

В этой статье даны рекомендации о том, где в статье и как размещать иллюстрации с разъяснениями, почему желательно делать так, а не иначе. Упор не на слово «как», а на слово «почему» — если вы видите, что озвученные соображения не подходят для вашего случая, вы можете сделать по-другому.

Особенности платформы

Оформление статей в Википедии отличается как от книжного оформления, так и от веба, в частности:

• Отсутствует деление на страницы. Статья идёт сплошным текстом. Однако статья имеет достаточно чёткое членение на разделы.
• Длина строки никак не зафиксирована. Может изменяться и высота строки, так как пользователь может настроить себе личную css.
• Невозможно внедрить в статью произвольный javascript.
• Размер изображений, вставляемых в статью нельзя подогнать под размер окна — размер изображения может быть задан либо в пикселях, либо относительно размера миниатюры (по умолчанию — 220 пикселей) с помощью параметра upright.
• Изображения, обтекаемые текстом, вставляются только с начала абзаца.
• Анимированные изображения доступны только в формате gif, либо apng. Анимированные svg будут отрендерены как статичное png-изображение.

Кроме того, викистатьи, в отличие от других видов медиа, постоянно меняются и обновляются. Сам викидвижок заточен под лёгкое внесение изменений. Однако, если в статье присутствует сложное оформление, оно может создать препятствие в редактировании статей. К примеру, в первые годы существования Википедии некоторые авторы массово расставляли в статьях мягкие переносы (­) и неразрывные пробелы ( ) — такая мера незначительно улучшала отображение текста на экране, но исходный текст статьи из-за этого превращался в трудночитаемую кашу. По этой причине старайтесь избегать сложных приёмов оформления без серьёзной на то надобности. Например, если в статье «PNG» нужно проиллюстрировать работу альфа-канала наложением одного изображения на другое и это не сделать более простым способом — можно использовать сложный код, а если хочется всего лишь обвести изображение красивой рамкой — от такого кода лучше воздержаться.

Иллюстрация в преамбуле

См. также: Википедия:Иллюстрирование § Оформление ознакомительного рисунка и Википедия:Преамбула § Общие требования

Механический будильник — хорошая первая иллюстрация для статьи будильник, сомнительная для статьи время и совершенно неуместная для статьи тайм-менеджмент

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

Иллюстрация в преамбуле не является обязательным элементом статьи. В идеале на ней должен отображаться сам предмет статьи как есть: если это статья о личности — первой иллюстрацией должен быть одиночный портрет, если о биологическом виде — фотография или рисунок отдельного его представителя. В статьях о более многогранных понятиях допустимо использовать несколько иллюстраций, оформленных в виде галереи, например в статье о городе — несколько наиболее известных достопримечательностей города. Старайтесь не помещать в заглавной иллюстрации метафоры или отдалённо связанные с предметом статьи понятия, например изображение паровоза в статье «коэффициент полезного действия». Если понятие достаточно абстрактно и не может быть представлено в виде фотографии, чертежа, схемы или диаграммы — лучше воздержаться от размещения заглавной иллюстрации.

Иллюстрацию в преамбуле следует размещать непосредственно перед первой строкой текста — после всех шаблонов, либо включать в шаблон-карточку, если таковой имеется в статье. Старайтесь в подписи не просто дублировать название статьи, а более подробно разобрать, что именно на ней размещено, например «Примус, работающий на керосине», «Портрет Лёни Голубкова кисти художника Васи Пупкина» и т.д.

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

Иллюстрации в тексте

В оборку справа

Размещать изображения справа проще всего

Наиболее простой и распространённый способ размещения изображения — справа от текста. Так вставить изображение можно с помощью кода [[файл:example.jpg|мини]] или [[файл:example.jpg|right|200px]]. Размещённое таким образом изображение не привлекает к себе излишнего внимания и не отвлекает от чтения, оно может быть размещено почти в любом удобном месте статьи. Однако есть у такого способа вставки изображения и ограничения:

• Нежелательно размещать таким образом иллюстрации большой ширины — больше 500 пикселей или с коэффициентом upright более 2. Оптимальный размер — 220 пикселей, задаётся автоматически при использовании параметра thumb. Если нужно изменить размер изображения (например, если оно слишком узкое и высокое), лучше использовать параметр upright, означающий множитель относительно стандартного размера изображения. Жёстко задавать размер в пикселях для миниатюр имеет смысл, к примеру, при использовании меток или выносных линий поверх изображения.
• Опасайтесь наползания изображений на заголовки 1 уровня (== ==), а также ситуаций, когда верхнее изображение сдвигает нижнее настолько, что оно перемещается к не относящемуся к нему разделу.
• Если на одном экране высотой 800 пикселей справа размещено более 2 изображений, стоит подумать об организации изображений в галерею.
• В некоторых случаях нежелательно размещение изображений (лиц, движущихся объектов), направленных вправо, от текста. Но не следует в этом случае использовать зеркальное отражение изображений, так как многие объекты не обладают симметрией и зеркальное отражение исказит их реальное положение на рисунке.
• Нежелательно размещать друг за другом подряд изображения, отличающиеся по ширине, особенно если это различие невелико. Лучше оставлять между ними несколько строк текста.
• Не помещайте изображение до того раздела, к которому оно относится, с расчётом, чтобы оно перекрывало часть заголовка, даже если кажется, что результат выглядит лучше. К примеру, в некоторых вариантах мобильного приложения отдельные разделы выполнены в виде скрывающихся блоков, отчего изображение при раскрытии соответствующего блока не будет показано — а будет показано при раскрытии предыдущего. Также такое размещение изображения может вызвать затруднения при редактировании: участник может не догадаться сразу, что ему нужно нажать «править» на предыдущем разделе, а не на текущем. При размещении под заголовком шаблонов вроде {{см. также}}, код вставки изображения следует размещать между заголовком и шаблоном.

В оборку слева

Изображений Википе-тан, где она смотрит вправо заметно меньше — возможно, потому что изображения нечасто располагают в тексте слева

В отличие от изображения, размещённого справа, оно привлекает к себе больше внимания. Глаз натыкается на такое изображение при чтении как минимум дважды: у верхней и нижней границы. Наиболее оправдано размещение слева изображений, очень важных для понимания текста, портретов личностей, о которых говорится в соответствующем разделе (если это статья — не о данной конкретной личности), и т.п. Если две или более иллюстраций расположены в пределах экрана, высотой 800 пикселей, также имеет смысл чередовать изображения слева и справа, но в целом изображений слева должно быть меньше, чем справа. Вдобавок к ограничениям, присущим размещению изображения справа, такое изображение имеет дополнительные:

• Наползание на нижестоящие заголовки ещё более нежелательно. Если изображение слева наползает на заголовок любого уровня, он может быть воспринят как заголовок более низкого уровня, чем заголовок над изображением. Чтобы изображение не наползло на заголовок, используйте шаблон {{-}}
• Расположенное слева от маркированного или нумерованного списка изображение приводит к багам отображения списка в разных браузерах, поэтому нежелательно.

См. также [1]

Одновременно слева и справа от текста

Когда картинки окружают с двух сторон,…

… для текста остаётся слишком мало места

Одновременное размещение изображений справа и слева на одном уровне не только обладает недостатками изображения, размещённого слева, но ещё и значительно уменьшает ширину текстовой колонки. Если почему-то необходимо разместить изображения именно так, можно воспользоваться шаблоном {{распорка}} чтобы текст автоматически переносился, если для него слишком мало места.

В разрез

Изображения шириной 500-800 пикселей (но высотой не более 400 пикс., то есть половину экрана высотой 800 пикс.), панорамы и галереи изображений лучше вставлять без обтекания — для этого в параметрах изображения нужно указать пункт «центр». Изображения бо́льшего размера вставлять целиком нежелательно, лучше использовать миниатюры (thumb) — читатель всегда имеет возможность развернуть изображение на весь экран. С помощью шаблона {{Файл с описанием}} можно добавить к изображению большого размера многострочное описание, которое, при наличии места, располагается справа или слева от него, например — легенду.

Изображение большой ширины

Непосредственно после заголовка можно располагать крупные изображения только в том случае, если раздел целиком посвящён описанию того, что изображено на иллюстрации. Например, на иллюстрации в начале раздела может быть изображена схема какого-то механизма, а в тексте раздела описано, как изображённые на схеме части механизма взаимодействуют друг с другом. Вообще, крупные изображения следует вставлять в начало-середину раздела только тогда, когда за ним следует подробное его описание.

Галереи изображений, а также панорамы принято располагать в конце раздела. В галерях можно размещать примеры для подтверждения написанного в разделе, а также изображения, которые нежелательно размещать в виде миниатюры по причине их большого количества. В галерее должно быть не менее трёх изображений.

• 
  Котики — то, на чём держится Интернет
• 
  Маленькие
• 
  Большие
• 
  Рыжие
• 
  Серые
• 
  Усатые
• 
  Полосатые

Изображения внутри текста

Внутри текста размещают изображения, высота которых не превышает высоту буквы. Это могут быть символы, отсутствующие в шрифтах пользователя, пиктограммы, «искровые» графики, стрелки и т.д. (например: ). Технически возможна вставка изображений и бо́льшей высоты, но тогда над соотвествующей строкой будет отступ, который смотрится очень плохо.

Размер изображения

Размер изображения следует выбирать из его назначения. Для несложных иллюстраций, не имеющих важных мелких деталей, например, для большинства фотографий, достаточно указать параметр «мини» (или thumb) в иллюстрации — в этом случае размер картинки по умолчанию будет составлять 220 пикселей по большей стороне, но у пользователя остаётся возможность его изменять. Если в статье набралось большое количество таких изображений, их лучше объединять в галереи.

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

В некоторых случаях размера в 800 пикселей недостаточно. Например, на картине «Утро стрелецкой казни» при таком разрешении неразличимы детали лица Петра I и многих других персонажей. В этом случае правильнее будет разместить изображение в небольшом разрешении — пользователь всегда может увидеть изображение целиком, щёлкнув по нему мышкой. Если же по ходу статьи требуется обратить внимание на некоторый фрагмент, имеет смысл загрузить его отдельным изображением и вставить в нужное место статьи.

Изображение на пол-экрана, а лица Петра I не разобрать

А так — в самый раз

Несмотря на то, что имеется шаблон {{часть изображения}}, лучше загружать вырезанный фрагмент отдельным файлом: во-первых, изображение, выводимое с помощью этого шаблона загружается полностью, причём в том разрешении, в котором выведен фрагмент, а во-вторых — возможны неочевидные изменения отображения шаблона при изменении веб-стандартов, викидвижка или даже просто при неаккуратной правке исходного изображения.

Подписи к изображениям

Подписи к изображениям должны быть конкретными и поясняющими то, под чем они стоят. В Википедии не принято (хотя и не запрещено) давать рисункам номера, например «рис. 3» — предпочтительно располагать изображения там, где они упоминаются в тексте. Если объект на изображении не требует пояснений, например достаточно хорошо характеризуется вышестоящим заголовком раздела, изображение можно оставить без подписи, а также и без рамки.

Упоминая изображение в тексте статьи, не следует ссылаться на него, как на изображение слева/сверху/снизу и т.д., так как на разных размерах окна, браузерах и т.д., а также просто при внесении некоторых правок в статью изображение может оказаться в другом месте. Лучше ссылаться на подпись к рисунку.

Слово «Supercalifragilisticexpialidocious» слишком длинное.
В перезауженные рамки изображения с подобными пропорциями оно не вписывается

В подписях к изображению работают не все возможности викиразметки: текст в подписи не может быть разделён на абзацы (но может использоваться тег <br>), не работают маркированные и нумерованные списки, отступы и преформатированные абзацы моноширинного текста. Подписи располагаются всегда снизу изображений. Если эти ограничения не устраивают, можно пользоваться различными шаблонами наподобие {{файл с описанием}}, снимающими часть подобных ограничений.

Старайтесь избегать случаев, когда изображение слишком узкое и подпись разбивается на много коротких строк. Особенно неряшливо подпись выглядит, когда чередуются строки из коротких слов (например, предлогов и союзов) и длинных. Старайтесь в подобных случаях вставлять изображение большего размера, либо размещайте подпись другим способом. В отдельных случаях возможно переносить длинные слова с помощью шаблона {{shy}}. Особенно заметной проблема узких подписей становится в галереях, оформленных с использованием свойства packed — в них изображения выравниваются по высоте, а ширина самых узких из них может оказаться недостаточной для комфортного размещения подписи.

Подписи к изображению отображаются шрифтом, меньшим чем основной текст. Дополнительно уменьшать размер текста в подписи не следует. Также не принято применять другие «украшения» текста: центрировать его или использовать нестандартные шрифты. При смене темы оформления эти украшения будут смотреться странно и некрасиво.

Старайтесь не размещать текст внутри изображения, если без этого можно обойтись, особенно для растровой графики. Подписи, выполненные текстом, индексируются поисковыми системами, в том числе внутренним поиском; их легче редактировать при переводе статей на другие языки; они лучше отображаются на мониторах. Конечно, если текст является частью иллюстрации или сложным образом в неё вписан — например, как подписи на карте — вынести его из изображения не получится. Наоборот, если на изображении имеется поясняющий текст у одного из краёв, однозначно необходимо обрезать изображение, а текст вынести в подпись. С подписями у выносных элементов ситуация может быть неоднозначна: хотя существует шаблон {{выносная линия2}}, у него есть проблемы: отсутствует удобный способ визуального редактирования — из-за чего устанавливать шаблон приходится множеством проб и ошибок; кроме того, неосторожными правками изображения можно сбить привязку выносной линии к изображению. С другой стороны, часть проблем с подписями отпадает, если использовать иллюстрацию в формате SVG: подписи в этих файлах можно легко менять, кроме того в один файл можно загрузить подписи на нескольких языках.

Иллюстрирование с помощью шаблонов

Иногда вместо того, чтобы создавать иллюстрацию в качестве отдельного изображения, бывает удобно создавать иллюстрации с помощью средств HTML, CSS и викишаблонов. Такой подход довольно сложен в реализации, требует от создателя определённых навыков в программировании и разметке HTML, но даёт некоторые преимущества, недоступные в иных случаях: например, позволяет добавить элементы интерактивности. Как правило, с помощью шаблонов создаются иллюстрации, набираемые из типовых элементов. Хороший пример такого шаблона — {{маршрутная карта}}.

Другие рекомендации

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

Старайтесь воздерживаться от использования анимированных изображений, особенно совершающих быстрые и энергичные движения. Предпочтительный способ — разместить неподвижное изображение, с которого установить ссылку на анимированное. Неподвижную миниатюру можно задать в качестве параметра «thumb».

См. также

• ВП:Иллюстрирование
• Изображения на MediaWiki
• Про:Графическая мастерская