Просмотр кода страницы Википедия:Подготовка изображений к загрузке

{{Планируемое руководство|[[ВП:ПИЗ]]}}

При загрузке файлов изображений в [[Википедия|Википедию]] или, что предпочтительнее, на [[Викисклад]], важно использовать правильный [[форматы графических файлов|формат файла]]. Для [[диаграмма|диаграмм]] следует выбирать формат [[Scalable Vector Graphics|SVG]] (особенно для тех, которые впоследствии потребуется расширить), для фотографических изображений — [[JPEG]], для всего остального — [[Portable Network Graphics|PNG]].

В большинстве случаев не рекомендуется использовать другие графические форматы:
* [[Microsoft Windows Bitmap|BMP]] — несжатый формат рисунков, в результате чего размеры файлов намного больше. Обычно преобразуются в PNG.
* [[Graphics Interchange Format|GIF]] — использовать только для анимаций. Для статичных картинок предпочтительнее формат PNG с более эффективным сжатием и поддержкой 24-битного цвета.
* [[Tagged Image File Format|TIFF]] — как правило, могут быть преобразованы в PNG или JPEG, о чем говорилось выше.

Не следует снабжать картинку [[Водяной знак|водяными знаками]], это расценивается как нарушение [[Википедия: Нейтральность|нейтральности]].

== Диаграммы ==

=== Применяйте SVG или PNG ===

Благодаря редактируемости и масштабируемости, [[векторная графика|векторный]] формат SVG является хорошим выбором для графического представления данных и иллюстраций. Однако не всегда легко конвертировать [[растровая графика|растровые изображения]] в SVG, и некоторые изображения (особенно фото), не благоприятствуют этой конвертации. Формат PNG является, как правило, более предпочтительным, чем JPEG для всего, что рисуется, а не фотографируется.

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

Среди многих [[веб-дизайнер]]ов существует заблуждение, что размеры PNG превышают размеры GIF. Это заблуждение происходит от двух фактов:

* Сравнение 24-битных PNG с 8-битными GIF приводит к мнению о большем размере PNG.
* Редактор [[Adobe Photoshop]] всегда был известен плохой поддержкой формата PNG.

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

{| padding="5" align="right"
|rowspan="2"|[[Image:Smiley face with title.png|150px]]
|[[Image:Smiley face with no title.png|150px]]
|-
!A title as a caption<br />under the image
|-
!''Изображение с заголовком<br />1248 байт''
!''Без заголовка<br />854 байт (+74 байт текста)''
|}
Содержит ли схема название? Если да, следует удалить части изображения, содержащие название, отдавая предпочтение простому тексту. Преимущества:
* Занимает меньше места, чем эквивалент текста в изображении;
* Может быть легко изменено;
* Пользователь может самостоятельно выбрать размер шрифта;
* Можно произвести поиск;
* Можно скопировать;
* Можно перевести на другие языки, благодаря чему схема может быть использована и в других языковых разделах Википедии.
{{clear}}

=== Выберите соответствующую глубину цвета ===
{| align="right"
|[[Изображение:Diamond without anti-aliasing.png]]
|[[Изображение:Anti-aliased diamond.png]]
|[[Изображение:Anti-aliased diamond enlarged.png]]
|-
|1-битный цвет <br />без сглаживания (180 байт)
|4-битный цвет <br />со сглаживанием (309 байт)
|Увеличенный вариант
|}
Соответствует ли число битов на пиксель числу цветов в изображении? Рисунки, как правило, имеют несколько цветов. Если схема использует 4 цвета, нет необходимости хранить её в 24-битном формате (truecolour), способном различать 16 миллионов цветов. Чем меньше глубина цвета PNG, тем меньше цветов в палитре. Изображения с палитрой могут иметь глубину 1, 2<ref>Некоторые программы редактирования изображений не поддерживают 2-битные изображения</ref>, 4 или 8 бит (2, 4, 16, или 256 оттенков). Используйте глубины бит, позволяющие обработать все цвета в изображении.

В этом случае пиксели, соседние с граничным пикселем изображения, принимают промежуточное значение между цветом изображения и цветом фона, создавая градиент и размывая границу (cм. иллюстрацию справа).
{{clear}}

=== Не сохраняйте диаграммы в JPEG ===
{| align="right"
|[[Файл:Smiley_face_example_true_C.jpg]]
|[[Файл:Smiley face example true C crop.png]]
|}
Справа — пример JPEG-файла, который нужно было сохранить в формате PNG. JPEG использует [[сжатие с потерями|сжатие с потерями данных]] и предназначен для фотографий. Сжатие рисунков или диаграмм в JPEG даёт изображение плохого качества, так как видны артефакты вокруг краёв.

Ещё один недостаток — большой размер итогового файла. Компрессия JPEG имеет много вариантов, но чаще всего используются только два цветовых пространства: 24 бит RGB и 8-битные серые. Самое главное, JPEG по своей природе не поддерживает индексации цвета. Пример справа показывает изначально 4-цветное изображение, повреждённое JPEG-сжатием. Это привело к довольно большому размеру файла — аж 4,8 килобайт вместо 854 байт — и появлению ложных цветов даже после преобразования в PNG.

Если у вас нет исходного файла, но есть JPEG, не стоит сохранять JPEG как PNG: качества это не прибавит, зато приведёт к ещё большему размеру файла.
{{clear}}

=== SVG предпочтительнее PNG ===
{| padding="5" align="right"
|[[Файл:Smiley_face_crop.png|150px]]
|[[Файл:Smiley_face_crop.svg|150px]]
|-
|Увеличенный PNG
|Увеличенный SVG
|}
[[Portable Network Graphics|PNG]]&nbsp;— [[Растровая графика|растровый формат]] хранения графической информации, использующий сжатие без потерь, а [[Scalable Vector Graphics|SVG]]&nbsp;— это формат [[векторная графика|векторной графики]], позволяющий кодировать изображение как ряд геометрических конструкций. Если это смущает вас, не волнуйтесь, вам не нужно разбираться в технических аспектах создания изображений. На практике, SVG даже <span title="омерзительного">такого</span> качества, как создаёт программа [[Inkscape]], всё же легче для дальнейшего улучшения, чем растровая графика. Для изображений, состоящих в основном или полностью из многоугольников, линий и кривых (государственные флаги, дорожные знаки и т. д.), SVG в особенности проявляет преимущество над растровой графикой. Справа показаны два примера изображения: в форматах SVG и в PNG. Разница в качестве очевидна.

SVG также может быть легко изменён с помощью [[текстовый редактор|текстового редактора]].<ref>Общепринято использование кодировки [[UTF-8]] в SVG-файлах, так что редактор должен поддерживать это представление Unicode.</ref> Это делает обновление иллюстраций и их перевод на другие языки гораздо легче. Редакторы в [[GNU/Linux]] и в других [[UNIX]]-подобных системах имеют меньше проблем со шрифтами в SVG, поскольку они обычно используют похожие шрифты, а также они могут использовать библиотеку [[rsvg]] для просмотра SVG, как и движок [[MediaWiki]].

=== Не выдавайте растровые изображения за SVG ===

Во многих векторных форматах (SVG не исключение) есть функция «внедрить картинку». Конечно же, фотографическая текстура в векторном рисунке и с векторной же обрезкой — это замечательно. Но часто бывает такое: на странице с PNG-диаграммой просят перерисовать её в SVG. Кто-то, недолго думая, внедряет PNG в SVG и говорит: да, сделано. Это нехорошо! Причин несколько.
* Картинка остаётся растровой, с растровыми же артефактами при увеличении и уменьшении.
* Размер при этом увеличивается.
* Движок MediaWiki отлично увеличивает-уменьшает растровые картинки. Векторный движок RSVG делает это намного хуже.

== Скриншоты ==

Несколько простых требований к [[скриншот]]ам.

# Элементы [[графический интерфейс пользователя|графического интерфейса]] могут быть защищены [[копирайт]]ом программы, с которой снят скриншот, а также операционной системы или графических [[библиотека (программирование)|библиотек]]. Если скриншот содержит лицензионно несводобные элементы, то он не является свободным. Русская Википедия разрешает использование несводобных изображений при условиях добросовестного использования. За дальнейшей информацией обращайтесь в руководство [[Википедия:Критерии добросовестного использования]].
#: '''Примечание 1.''' С программного обеспечения со [[свободное программное обеспечение|свободной]] лицензией (например, [[GNU General Public License|GNU GPL]]) скриншоты можно снимать свободно. Каждый из этих скриншотов, как производная работа, будет иметь лицензию GPL.
#: '''Примечание 2.''' Если [[кадрирование|в кадр попадает]] только открытый документ, а не какие-либо части интерфейса, то изображение перестаёт быть производной работой от программы, и лицензия зависит лишь от лицензии на отснятый документ. В частности, если вы откроете в [[Microsoft Word]] «[[Евгений Онегин|Евгения Онегина]]», сделаете скриншот и обрежете весь интерфейс Word’а, полученный документ не будет иметь никакого копирайта<ref>Растровое изображение буквы считается не имеющим копирайта, так что лицензия на шрифт не важна.</ref>.
# Не снимайте прикладное программное обеспечение (например, текстовый редактор) с развёрнутым на весь экран окном — есть вероятность, что в статье (и даже на картинке предпросмотра) не будет ничего видно. Уменьшите окно настолько, насколько это возможно. Разумеется, это требование не подходит для сложных программ с большим количеством окон наподобие [[Autodesk 3ds Max|3D Studio MAX]].
#: Хороший пример: [[:Изображение:Gedit 2.14 Russian.png]] — здесь автор уменьшил картинку до 810×543, одновременно поставив крупный шрифт.
#: Плохой пример: [[:Изображение:GVim-screenshot.png]] — программа снималась на разрешении 1024×768, в то время как окно можно было свободно уменьшить; характерные особенности программы видны лишь на полноразмерной картинке.
# Правилом хорошего тона будет выключить [[Microsoft ClearType|ClearType]]. Даже если у читателя ЖК-монитор, ClearType не будет работать (или даже приведёт к неприятным артефактам), если повернуть монитор на 90°. В общем, если у вас ЖК-монитор в горизонтальной ориентации — это не значит, что у других тоже горизонтальный ЖК-монитор.
# Делая скриншот делового ПО, лучше снимать не пустые окна, а программу с загруженным документом. Рекомендуется, чтобы этот документ был либо частью ПО (например, демонстрационным файлом), либо вообще не имел копирайта.

== Фотографии ==

Не стоит выкладывать фотографии прямо с камеры. Рекомендуется сделать с фотографией то же самое, что вы делаете, когда сдаёте её в печать: выровнять яркость, выставить [[баланс белого]], обрезать неважные части.

Крайне не рекомендуется поворот средствами [[EXIF]] (именно так все фотоаппараты готовят вертикальные рисунки). Программа, не понимающая EXIF, покажет фотографию повёрнутой. Во многих просмотрщиках графики (например, [[XnView]]) есть функция «автоматически развернуть по EXIF без потерь данных».

Стоит спросить у сфотографированных людей, хотят ли они выставить свою фотографию на всеобщее обозрение. Если ответ «нет», не загружайте фото.

Многие репортажные фотографии можно загружать, закрасив или пикселизировав узнаваемые лица. Например: [[:Изображение:2005 Moscow powerless trolleybus.jpg]]

== Технические подробности ==
=== Представление и сжатие ===
Хотя некоторые форматы предполагают несколько алгоритмов сжатия, в целом формат и сжатие связаны вместе. Также выбор правильного представления изображения ([[индексированный цвет]], [[TrueColor]], сжатие с потерями такого типа как в JPEG…) имеет не меньшую важность при загрузке изображения, нежели сжатие. Сжатие может быть усилено при загрузке следующей версии изображения, а вот переводить из одного представления в другое понадобится явным образом.

=== Советы по оптимизации JPEG ===
Как указывалось выше, [[JPEG]] был разработан для фотографических изображений. Хотя алгоритмы JPEG неплохие, есть пара советов, которые помогут получить наименьший размер файла с минимальным ущербом для качества:
* При сохранении JPEG-файлов можно выбрать уровень компрессии. Обычно используется диапазон значений от 0 до 100, где 100&nbsp;— наилучшее качество с очень малым сжатием (несколько приложений, в частности Paint Shop Pro, имеют такую шкалу в обратном порядке: с 0 (высокое качество) до 100 (низкое качество)). Шкала от 0 до 100 не является процентной, то есть использование 50 не приводит ни к 50%-ному качеству, ни к уменьшению файла в 2 раза. Кроме того, 100 не означает «без потерь», так как изображение [[дискретное косинусное преобразование|подвергается преобразованию]], вызывающему искажения из-за округления. Поскольку большинство файлов в формате JPEG в Википедии будет появляться на страницах в виде эскиза, подходит параметр качества 95.
* Сжатие JPEG работает лучше на слегка размытых изображениях, так что увеличение чёткости приводит к увеличению артефактов
* Всегда работайте с исходным изображением, а не с уже сохранёнными файлами JPEG, так как качество постепенно снижается с каждым сохранением. По этой причине рекомендуется сохранять основную копию в формате без потерь, например, PNG.
* JPEG-файлы можно пережать без потерь с помощью <code>jpegtran -optimize</code> (при этом из файла также может быть удалена такая информация, как уменьшенные копии изображения, добавленные камерой). Jpegtran является частью [[libjpeg]]. На основе jpegtran существует пакет [http://sourceforge.net/projects/littleutils/ littleutils] с набором скриптов, автоматизирующих оптимизацию JPEG.
* JPEG-файлы могут быть оптимизированы без потерь с помощью программы [http://sylvana.net/jpegcrop/ Jpegcrop].

=== Советы по оптимизации PNG ===
В нефотографических изображениях (таких как рисунки и скриншоты программ) обычно используется мало цветов. Если это так, стоит сохранять изображение с индексацией цветов. Это уменьшит размер файла (о режиме с индексацией и truecolour см. [[глубина цвета]]).

Некоторые из оптимизирующих программ приведены ниже:
* [http://advancemame.sourceforge.net/comp-readme.html AdvDef / AdvPNG], часть AdvanceCOMP ([[GNU GPL]]) — оптимизирует [[сжатие данных]].
* [http://optipng.sourceforge.net/ OptiPNG] (свободная), оптимизирует параметры и сжатие
* [http://pmt.sourceforge.net/pngcrush/ Pngcrush] (свободная, на ней была основана OptiPNG; см. [http://ourworld.compuserve.com/homepages/jamesday/pngcompression/index.htm сравнение некоторых версий])
* [http://advsys.net/ken/utils.htm#pngout PNGOUT] (бесплатная проприетарная), оптимизирует параметры и сжатие
* [http://www.walbeehm.com/download/ DeflOpt] (бесплатная проприетарная для Windows)

[[OptiPNG]] в целом лучше, чем [[pngcrush]] и, как правило, значительно быстрее. Утилита [[AdvDef]] может быть использована после OptiPNG для дальнейшего улучшения результатов.

Для быстрого сжатия воспользуйтесь optipng:
<pre>optipng file.png</pre>

Для выполнения наиболее сильного сжатия (может занять много времени):
<pre>optipng -o7 file.png
advdef -z4 file.png
pngout /ks file.png
deflopt file.png</pre>

Каждая из этих утилит использует свой метод уменьшения PNG. После любого сжатия изображение должно полностью соответствовать оригиналу.

Для быстрой оптимизации можно использовать скрипт opt-png (пакет [http://sourceforge.net/projects/littleutils littleutils]) может быть полезным. Он автоматизирует оптимизацию PNG, используя pngcrush и pngrewrite в качестве основы.

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

== Примечания ==
{{примечания}}

== См. также ==
{{commons|Commons:Media for cleanup/ru|Указания по чистке изображений}}
* [[Википедия:Иллюстрирование]]


[[Категория:Википедия:Иллюстрирование|{{PAGENAME}}]]