Pixel art для начинающих. Введение.

Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ. Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами pixel art’а перед тем, как приступить к изометрии.

Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).

 1. История (очень коротко).

 

 

Pixel art (пишется без дефиса) или пиксельная графика – направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации.

Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля – это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.

 

Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).

Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно – он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики – всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.

Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру – явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем – если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.

 

Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты – приложения для мобильных устройств, рекламу и web-дизайн.

 

Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!

 

2. Инструменты.

Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.

 

Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.

Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов – отлично. Если также позволяет сохранять файлы – просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.

 

Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику – это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.

 3. Общие принципы.

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

Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2х2 пикселя, или 3х3. Но строить изображение всё же предпочтительно из отдельных пикселей.

Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:

Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:

 

Почему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее – что называется, не наш метод.

 

Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).

Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы – фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):

Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее – там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель – в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя.

Изломы 2 и 6 идентичны друг другу – это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.

Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):

Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель – только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:

Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово – но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.

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

Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:

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

4.1. Рисуем склянку с живой водой.

1. Форма объекта, пока можно не использовать цвет.

2. Красная жидкость.

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

4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?

5. Аналогично рисуем склянку с синей жидкостью – здесь тот же цвет стекла, плюс три оттенка синего для жидкости.

4.2. Рисуем арбуз.

1. Нарисуем круг и полукруг – это будут арбуз и вырезанная долька.

2. Обозначим вырез на самом арбузе, а на дольке – границу между корочкой и мякотью.

3. Заливка. Цвета из палитры, средний оттенок зелёного – цвет корки, средний красный – цвет мякоти.

4. Обозначим переходный участок от корки к мякоти.

5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно – семечки! Если скрестить арбуз с тараканами, будут расползаться сами.

6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) – чтобы придать объём самому арбузу.

5. Dithering.

Дизеринг, или смешивание – техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ – чередовать пиксели в шахматном порядке:

Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям – на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:

 

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

 

Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.

Еще два варианта дизеринга:

 

Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше – можно. Меньше лучше не делать.

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

Ну, хватит теории. Предлагаю еще немного попрактиковаться.

6.1. Рисуем меч.

Такой несерьёзный меч для несерьёзного проекта:

1. Форма. Здесь всё просто.

2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.

3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание – я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени – справа и снизу.

4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию – дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить – не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?

5. Я не стал останавливаться на достигнутом и сильно состарил наше оружие, вообразив, как мог бы выглядеть клинок, пролежи он сотню лет в подземелье. Цвета заменены более тёмными (соседними из той же палитры), я ввёл больше чёрного (на предыдущем рисунке лишь три действительно чёрных точки, одна на стыке дола с крестовиной усиливала эффект глубины тени, две другие подчёркивали обмотку рукояти). Выбоины и сколы на лезвии, крестовина и яблоко серьёзно повреждены (наверняка в жестокой сечи), обмотка рукояти порвана. В общем, перед нами настоящая древность. Придумаем достойную легенду и поставим на видном месте, как семейную реликвию.

6.2. Робот.

Один из самых распространённых способов рисования «с нуля» – изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» – сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:

Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:

Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:

На самом деле рисовать полноценные конечности, честно говоря, поленился. Хотелось поскорее закончить урок, плюс массивный робот на тонких ножках – по-моему достаточно забавно. Помимо того, что ноги нарисованы обыкновенными прямыми (что здорово сэкономило мне время), я не стал придавать им объём – это не цилиндры, а пока что обычные плоские прямоугольники. Объёма добьюсь позже, с помощью теней и бликов. Кстати, еще одна хитрость, на которую пошёл сознательно – бедро левой ноги построено в точности как голень правой, и наоборот, так что фактически, вместо того чтобы нарисовать четыре цилиндра, я схитрил и нарисовал два наклонных прямоугольника.

Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!

Основной цвет, плюс я заменил цвет обводки с чёрного на тёмно-синий. Смотрится по-прежнему пустовато, но это ничего, исправлю тенями. Условлюсь, что источник света где-то за сверху за моим левым плечом, следовательно, тени лягут в основном справа и снизу. Сначала грудь, как самый крупный элемент:

Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3-4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю – это также придаст рисунку больше плавности.

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

Также приглядитесь к глазам, у них уже есть блики, основной цвет и тень. Кладу тень по всему роботу:

Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):

Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).

Здесь сложно давать какие-либо советы, кроме одного – учитесь рисовать, изучайте тени, теорию света. Двигаемся дальше, дизеринг:

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

Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним – цвет светлой тени, и правый нижний – цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок – я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.

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

WIP, тот самый Work in Progress:

---

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

Юрий Гусев aka Fool
http://www.foolstown.com/
http://fool.deviantart.com/

Алексей Гаркушин aka gas13
http://gas13.ru/ 
http://gas13.deviantart.com/

Дизайн-группа eBoy
http://hello.eboy.com/eboy/category/everything/explore/parts/

Henk Nieborg (Голландия)
http://www.henknieborg.nl/

Gary J Lucken (Великобритания)
http://www.armyoftrolls.co.uk/

Kenneth Fejer…
http://www.kennethfejer.com/

…и один из его замечательных проектов – ISOSITY
http://www.kennethfejer.com/isocity/

Agnes Heyer aka Arachne (Норвегия)
http://www.retinaleclipse.com/

Borek Bures (Чехия)
http://www.spiv.cz/index.html

The Spriters Resource – хранилище спрайтов из игр
http://spriters-resource. com/

Как подготавливать фотографии для Фотогалерей и Блога – Справочный центр Vigbo

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

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

В каком формате лучше сохранять изображения для сайта?

Мы поддерживаем два основных формата изображений, это JPEG (JPG) и PNG. Изображения других форматов могут обрабатываться некорректно.

JPEG является приоритетным, так как картинки такого формата легче сжимаются без потери качества, к тому же и вес их небольшой.

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

1. PNG-8 — использует 256 цветов и ограниченную прозрачность, в сравнении с PNG 24.
2. PNG-24 — использует 16 млн. цветов. Имеет гораздо больший вес по сравнению с PNG-8, зато есть возможность задать полупрозрачность пикселям;

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

ВАЖНО: выбирайте при сохранении количество точек на дюйм — 72 dpi, а цветовой профиль — sRGB.

Вес

Чем легче картинка, тем быстрее она загружается. Вес зависит от трех параметров:

1. Размер изображения в пикселях (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей).

2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем больше она весит.

3. Степень ее сжатия (качество фото). Вы удивитесь, но сохранять изображение в наилучшем качестве — не всегда хорошая идея. Фоновые изображения и картинки, которым не обязательно иметь большое разрешение, можно сохранять в качестве чуть выше среднего, чтобы уменьшить размер файла и увеличить скорость загрузки сайта.

Максимальный вес фото, который можно добавить на сайт — до 10 Мб. Это ограничение предусмотрено на всем сайте, кроме виджета Фотогалерея. Также для сайта действует ограничение по размеру фото: можно добавить изображение не более 6000 пикселей по большей стороне. Ограничение отсутствует в виджете Фотогалерея.

Что происходит при загрузке изображения на сайт?

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

• 500 пикселей
• 1000 пикселей
• 2000 пикселей.

При этом высота фотографии изменяется пропорционально ширине. Для посетителей вашего сайта на разных устройствах будут показаны фотографии в оптимальном размере.

Если ширина загружаемого изображения больше 2000 пикселей, то система автоматически выполнит оптимизацию. Т.е. если вы загружаете оригинал фотографии размером 5000 пикселей по ширине и объемом 2 мб, максимально используемая сайтом копия фото будет по ширине 2000 пикселей и объемом около 1 мб.

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

Мы рекомендуем подготовить фотографии заранее, перед загрузкой их на сайт. Самое оптимальное фото — это изображение не более 2000 рх по ширине и объемом не более 600 кб.

Получить оптимизированное изображение вы можете двумя способами:

• Оптимизация с помощью функции «Save for Web» графических редакторов (например, Adobe Photoshop, Gimp и т.д.). Можно использовать online-версию редакторов;
• Оптимизация с помощью сервисов или программ по оптимизации (например, tinypng.com). Если вы используете функцию «Save for Web» графических редакторов, то дополнительная оптимизация сторонним сервисом не нужна. Вы можете самостоятельно установить нужную степень сжатия (alt+shift+ctrl+S) и в настройках указать процент сжатия (оптимальное значение 89%) при сохранении фото и в большинстве случаев этого будет достаточно.

Какое количество фотографий можно загрузить на сайт?

Вы можете загрузить неограниченное количество фотографий на сайт. Однако мы рекомендуем загружать не более 60 заранее оптимизированных фотографий в одну галерею. Добавление большого количества фотографий в одну галерею приведет к уменьшению скорости загрузки сайта.

Оптимизация изображений в слайдере

В результате автоматического преобразования изображений для слайдера, дополнительно создается копия фотографии шириной 2560 пикселей.

Таким образом, если вы загружаете фотографию в слайдер размером 5000 пикселей по ширине и объемом 2 мб, максимально используемая сайтом копия фото будет по ширине 2560 пикселей и объемом около 1 мб.

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

Пиксельная манипуляция с холстом — Интерфейсы веб API

До сих пор мы не смотрели на фактические пиксели нашего объекта canvas (далее «холст»). С объектом ImageData вы можете напрямую читать и писать массив данных для управления пиксельными данными. Мы также рассмотрим, как можно сгладить сглаживание изображения (сглаживание) и как сохранить изображения с вашего холста.

Объект ImageData представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:

width

Ширина изображения в пикселях.

height

Высота изображения в пикселях.

data

A Uint8ClampedArray представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от 0 до 255 (в комплекте).

Свойство data возвращает Uint8ClampedArray, к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зелёный, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причём красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.

Uint8ClampedArray содержит высоту × ширину × 4 байта данных, значения индекса варьируются от 0 до (высота × ширина × 4) -1.

Например, чтобы прочитать значение синего компонента из пикселя в столбце 200, строка 50 на изображении, вы должны сделать следующее:

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

Вы можете получить доступ к размеру массива пикселей в байтах, прочитав атрибут Uint8ClampedArray.length:

var numBytes = imageData.data.length;

Чтобы создать новый пустой объект ImageData , вы должны использовать метод createImageData () (en-US). Существуют две версии метода createImageData() :

var myImageData = ctx.createImageData(width, height);

Это создаёт новый объект ImageData с указанными параметрами. Все пиксели заданы прозрачным черным.

Вы также можете создать новый объект ImageData ImageData с теми же размерами, что и объект, заданный anotherImageData . Все пиксели нового объекта установлены на прозрачный чёрный. Это не копирует данные изображения!

var myImageData = ctx.createImageData(anotherImageData);

Чтобы получить объект ImageData , содержащий копию пиксельных данных для контекста холста, вы можете использовать метод getImageData() :

var myImageData = ctx.getImageData(left, top, width, height);

Этот метод возвращает объект ImageData , представляющий пиксельные данные для области холста, углы которого представлены точками (left , top), (left+width , top), (left , top+height) и (left+width , top+height). Координаты задаются в единицах пространства координат холста.

Примечание: Любые пиксели за пределами холста возвращаются как прозрачный чёрный цвет в результирующий объект ImageData .

Этот метод также показан в статье Manipulating video using canvas.

Выбор цвета

В этом примере мы используем метод getImageData() для отображения цвета под курсором мыши. Для этого нам нужна текущая позиция мыши с layerX и layerY, затем мы просматриваем пиксельные данные в этой позиции в массиве пикселей, который предоставляет нам getImageData() . Наконец, мы используем данные массива для установки цвета фона и текста <div> для отображения цвета.

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
  color. style.background =  rgba;
  color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);

Вы можете использовать метод putImageData() для рисования пиксельных данных в контексте:

ctx.putImageData(myImageData, dx, dy);

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

Например, чтобы нарисовать все изображение, представленное myImageData, в верхнем левом углу контекста, вы можете просто сделать следующее:

ctx.putImageData(myImageData, 0, 0);

Оттенки серого цвета и инвертирование цветов

В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью putImageData(). Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зелёного и синего. Вы также можете использовать средневзвешенное значение, заданное формулой x = 0.299r + 0.587g + 0.114b, например. Для дополнительной информации см. Grayscale в Википедии.

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  var invert = function() {
    for (var i = 0; i < data.length; i += 4) {
      data[i]     = 255 - data[i];     
      data[i + 1] = 255 - data[i + 1]; 
      data[i + 2] = 255 - data[i + 2]; 
    }
    ctx.putImageData(imageData, 0, 0);
  };

  var grayscale = function() {
    for (var i = 0; i < data.length; i += 4) {
      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i]     = avg; 
      data[i + 1] = avg; 
      data[i + 2] = avg; 
    }
    ctx. putImageData(imageData, 0, 0);
  };

  var invertbtn = document.getElementById('invertbtn');
  invertbtn.addEventListener('click', invert);
  var grayscalebtn = document.getElementById('grayscalebtn');
  grayscalebtn.addEventListener('click', grayscale);
}

С помощью метода                                                             drawImage (), второго холста и свойства imageSmoothingEnabled (en-US) мы способны увеличить изображение и посмотреть его более детально.

Мы получаем положение мыши и обрезаем изображение на 5 пикселей левее и выше и на 5 пикселей правее и ниже положения мыши. Затем мы копируем его на другой холст и изменяем размер изображения до размера, который мы хотим. При масштабировании мы изменяем холст с исходного размера 10×10 пикселей до 200×200.

zoomctx.drawImage(canvas,
                  Math.abs(x - 5), Math.abs(y - 5),
                  10, 10, 0, 0, 200, 200);

Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть чёткие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства imageSmoothingEnabled (которому нужны префиксы для разных браузеров).

Zoom example

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var zoomctx = document.getElementById('zoom').getContext('2d');

  var smoothbtn = document.getElementById('smoothbtn');
  var toggleSmoothing = function(event) {
    zoomctx.imageSmoothingEnabled = this.checked;
    zoomctx.mozImageSmoothingEnabled = this.checked;
    zoomctx.webkitImageSmoothingEnabled = this.checked;
    zoomctx.msImageSmoothingEnabled = this.checked;
  };
  smoothbtn.addEventListener('change', toggleSmoothing);

  var zoom = function(event) {
    var x = event.layerX;
    var y = event.layerY;
    zoomctx. drawImage(canvas,
                      Math.abs(x - 5),
                      Math.abs(y - 5),
                      10, 10,
                      0, 0,
                      200, 200);
  };

  canvas.addEventListener('mousemove', zoom);
}

HTMLCanvasElement предоставляет метод toDataURL(), который полезен при сохранении изображений. Он возвращает data URI, содержащий представление изображения в формате, заданном параметром type (по умолчанию используется в PNG ). Возвращаемое изображение имеет разрешение 96 точек на дюйм.

Примечание: 

Имейте в виду, что если холст содержит пиксели, полученные из другого origin без использования CORS, холст будет испорчен, и его содержимое больше не будет считываться и сохраняться. Смотрите Безопасность и испорченные холсты в Allowing cross-origin use of images and canvas

canvas.toDataURL('image/png')

Настройки по умолчанию. Создаёт изображение в формате PNG.

canvas.toDataURL('image/jpeg', quality)

Создаёт изображение в формате JPG. Дополнительно вы можете задать параметр «качество» (quality) в диапазоне от 0 до 1, причём единица задаёт лучшее качество и 0 —  почти не распознаваемый, но небольшой по размеру файл.

После того как вы создали URI данные из своего холста, вы можете использовать его как источник любого <image> или поместить его в гиперссылку с download attribute, чтобы сохранить его на диске, например.

Вы также можете создать Blob из холста.

canvas.toBlob(callback, type, encoderOptions)

Создаёт объект Blob, представляющий изображение, содержащееся в холсте.

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

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

Однако оптимизация картинок — всегда компромисс между скоростью работы и качеством изображений. Поэтому перед оптимизацией обязательно оцените вес сайта и долю изображений. Оптимизируйте, если изображения занимают 50% веса и более.

Оптимизируем векторные изображения 

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

Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега <svg>. Также разметку svg встраивайте в веб-страницу.

Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.

Оптимизируем растровые изображения 

Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта. 

Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях. Допустим, изображения имеет размер 50 х 50 пикселей. Это 2 500 пикселей. 

1 пиксель = 4 байта. 
2500 пикселей х 4 байта = 10 000 байтов 
10 000 байтов / 1024 = 10 КБ

Пример расчета веса изображений для разных размеров: 

Размер изображения	Количество пикселей	Вес файла, КБ
100 х 100	10 000	39
250 х 250	62 500	244
500 х 500	250 000	977
800 х 800	640 000	2500

Изображения с множеством деталей не заменишь на векторную графику. Если фотографии просто уменьшать в размере, то при открытии в большом размере и на экранах с высоким разрешением они будут выглядеть размыто и нечетко. Это происходит из-за того, что фотография распадается на пиксели, поэтому основная задача — оптимизировать с минимальной потерей качества. Для этого есть несколько способов.

• Снижаем глубину цвета. Иногда широкая палитра для отображения цветов не нужна. Если каждый канал имеет 256 оттенков, то мы имеем более 2500 цветов. Ограничьтесь палитрой в 256 цветов всего, тогда на каждый канал будет приходиться 2 бита вместо 8, а пиксель будет весить 2 байта вместо 4. Мы уменьшили вес изображений в два раза.

• Применяем дельта-кодирование. Этот способ работает не с каждым пикселем, а с соседними. Глаз человека часто не видит разницу между нюансами цветов, поэтому укажите разницу между соседними пикселями. Если они имеют схожие цветовые значения, то разница или дельта между пикселями нулевая. Это значит, что пиксель будет весить всего один бит. Применяйте этот метод для целых блоков похожих цветов.

• Масштабируем изображения. На большинстве сайтов используются изображения большего размера, чем нужно. Администраторы вставляют картинки тех размеров, что у них есть, а уменьшение их размера до требуемых выполняется со стороны браузера. Выясните, совпадает ли фактический и отображаемый размеры фотографий на вашем ресурсе с помощью Инструментов разработчиков Chrome. Наведите курсор и сравните значения.

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

Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:

Фактический размер	Отображаемый размер	Лишний вес, пиксели
210 х 210	200 х 200	210х210 — 200х200 = 4100
510 х 510	500 х 500	510х510 — 500х500 = 10 100
910 х 910	900 х 900	910х910 — 900х900 = 18 100

Сжимаем данные 

Перед оптимизацией оцените, насколько правильно выбраны форматы изображений. В растровой графике есть прозрачность и анимация, но не в каждом формате она поддерживается.

		Прозрачность
		ДА	НЕТ
Анимация	ДА	GIF	—
	НЕТ	PNG	JPEG

Используйте только подходящие форматы для изображений. Например, png не сжимается с потерей данных, поэтому он всегда будет весить много. Используйте формат png только для изображений, где важно показать мелкие детали. Для этого можно использовать разные инструменты.

Сервисы для оптимизации изображений — ТОП-9

Онлайн-сервис для сжатия картинок с уменьшением веса до 90%. Работает с форматами JPEG, PNG, SVG, GIF и WEBP. Имеет три степени сжатия: • Lossy – с потерей качества, дает максимальную компрессию. • Lossless – без потери качества. • Custom – настройки задаются вручную, можно менять размер по высоте и ширине, ориентацию, формат файла. Поддерживается пакетная загрузка изображений, есть предпросмотр. Данные выгружаются на жесткий диск или в облачные хранилища Dropbox, Google Drive. В платной версии Pro есть расширенный набор ручных настроек, возможность автоматического переименования файлов.

Очень простой редактор, сжимает картинки в формате JPEG, умеет преобразовывать PNG в JPEG, JPEG в PNG, SVG в PNG, работает с GIF-файлами. Загрузка до 20 картинок одновременно, скачать файлы можно в ZIP-архиве. Сервис позволяет корректировать степень сжатия для каждого изображения с предварительным просмотром.

Функциональный инструмент для работы с изображениями JPEG, PNG, PDF и GIF. В бесплатной версии максимальный размер файла до 2 МБ, в платной – без ограничений. Интегрируется с WordPress, позволяя обрабатывать картинки из панели управления сайтом. Файлы можно загружать через API по протоколу HTTPS. Доступны три режима: • Обычный – режим для щадящей оптимизации без потери качества. • Агрессивный – сжатие до 50% с потерей качества. • Ультра – экстремальное сжатие. Рекомендуется для изображений с минимальным количеством деталей. Настройки позволяют выставлять ширину, высоту, % от оригинального размера. Есть функция восстановления исходных файлов.

Работает с форматами JPEG, PNG, WEBP, позволяет обрабатывать по одному изображению с предпросмотром. В расширенных настройках есть регулировка цветности от 0 до 256 и возможность раздельного изменения палитры для разных областей изображения. Вручную можно задать квантирование, сглаживание и другие параметры. Для улучшения качества отображения и устранения артефактов сжатия после оптимизации применяется дизеринг.

Набор утилит от Google Page Speed для преобразования картинок и GIF-файлов в формат WEBP. Инструмент поддерживает 2 типа перекодирования: • Без потерь – объем данных меньше на 30% по сравнению с файлами JPEG, PNG, GIF. При этом сохраняется эквивалентное визуальное качество. • С потерями – существенно сокращается размер файлов, при этом инструмент прогнозирует результат сжатия. На основе прогноза адаптивно распределяются области, в которых допускается максимальная потеря данных (однородный фон, мало деталей), и области, где важно сохранить визуальную полноту картинки. Утилиты подходят для Windows, Linux, и Mac OS X.

Онлайн-редактор изображений с возможностью их обработки и оптимизации. Сжимает JPEG, PNG, GIF, а так же преобразует сырые форматы TIFF и RAW в JPEG. В сервисе есть возможность добавления водяных знаков, конвертации HTML-страницы в изображение, обрезки, поворота кадра. Файлы можно загружать из Dropbox и Google Drive, предусмотрена пакетная обработка. Изображения сжимаются до наименьшего возможного размера без потери визуального качества. Платформа предлагает плагин для WordPress.

ezGIF работает с форматами GIF, JPEG, PNG, WEBP. Для каждого формата предусмотрено несколько способов оптимизации: • GIF – сжатие за счет дизеринга, за счет уменьшения количества цветов в каждом кадре, за счет пропуска каждого n-ного кадра. • JPEG – оптимизация файла при удалении мета-данных, сжатие по размеру, сжатие по качеству от 0 до 100. • PNG, WEBP – сжатие до минимально возможного размера при сохранении качества картинки. В сервисе есть дополнительные опции: регулировка скорости, фильтры, надписи, водяной знак и создание новой гифки из видео, картинок или нескольких других гифок.

Оптимизирует изображения в формате JPEG. Утилита входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Наилучшее соотношение определяется методом подбора значения от 5 до 95. Удобное средство для пакетной обработки однотипных изображений (для каталогов, карточек товаров).

Может сжимать изображения PNG с потерями качества. Инструмент конвертирует 32-битные файлы в 8-битные с использованием векторного квантования. Обработка уменьшает размер файла в 2 и более раз. Сохраняется полная альфа-прозрачность. Применяется алгоритм подавления шума.

Прописываем мета-данные 

Название файла. Все картинки перед загрузкой на сайт называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.

Нет	Да
дом_кп_лесное.jpeg img792138.jpeg kupit-dom-nedorogo.jpeg	dom-kp-lesnoe-front. jpeg dom-kp-lesnoe-uchastok.jpeg cottage-kp-lesnoe.jpeg

Поле Title. Когда пользователь наводит курсор на картинку на сайте, ему подсвечивается текст, прописанный в поле title. Прописывайте в это поле название фотографии. Пишите на русском.

Нет	Да
Отдых Подмосковье  Фото378 Домик на базе отдыха цена	Въезд на базу отдыха «Лесные просторы» Интерьер домика на базе отдыха «Соловьи»

Поле Alt. Указывайте описание файла. Если он не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.

Шпаргалка

• Вес изображений влияет на загрузку сайтов. Оптимизировав изображения, вы снизите вес и повысите быстродействие, а это один из важных факторов ранжирования. 

• Векторную графику используйте для логотипов, значков, элементов, текстов и подобных картинок. Для сжатия применяйте инструмент svgo. 


• Растровые изображения — для иллюстраций. Растровая графика состоит из пикселей, каждый из которых весит 4 байта. Определяйте вес файла по формуле: длина х ширина х 4 байта. 


• Ограничьте палитру. В каждом пикселе закодировано 4 канала модели RGBA и используются более 2500 оттенков. Часто так много цветов не нужно, а ограничение палитры позволит уменьшить вес в два раза.  


• Применяйте дельта-кодирование. Человеческий глаз не различает похожие оттенки и цвета, поэтому применяйте дельта-кодирование для соседних пикселей и целых блоков, задавая дельту между пикселями. 


• Масштабируйте изображения, чтобы привести их к допустимому размеру. Размещая на сайтах картинки большего размера, вы вынуждаете пользователей скачивать лишние данные. Я оптимизирую изображения даже на 10 пикселей больше, чем требуется. Проверяйте соответствие размеров в Инструментах разработчика Chrome. 


• Используйте подходящие форматы: gif — для анимации, png — для прозрачности и для отображения мелких деталей, jpeg — для остального. Для сжатия воспользуйтесь сервисами: gif — ezGIF, Gifsicle, для png — Compressor, Optipng, Pngquant, для jpeg — Imagify, Jpegtran, Compressjpeg. 


• Называйте файлы латиницей и понятным названием. В поле Title указывайте название картинки, в поле alt — описание. Title и Alt могут совпадать. Пишите понятные описания для людей, включайте ключевые слова, избегайте переспама.

Материал подготовила Светлана Сирвида-Льорентэ.

Размер снимка в пикселях и формат фотографии

Калькуляторы в этой статье посвящены теме печати цифровых фотографий.

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

Дано: У нас имеется цифровое изображение известных нам размеров, например, 3264 на 2448 пикселей, и набор стандартных форматов, предлагаемых сервисами фотопечати. Формат определяет линейные размеры фотографии, например, фотография формата 10х15 имеет размеры 102 на 152 миллиметра.

Требуется: Выбрать из набора форматов максимально большой, на котором еще можно напечатать изображение без потери качества.

Для задания форматов фотографий я создал отдельный справочник Форматы фотографий, который при необходимости можно расширять.

Единственное специальное знание, которым нужно обладать для нахождения ответа, это знание того, что качественная печать цифрового изображения требует разрешения не менее 300 точек (пикселей) на дюйм (300 dpi), а более-менее приемлемая печать возможна при разрешении не менее 150 точек на дюйм (150 dpi). Все остальное — простые математические действия.

Графически задача изображена на рисунке ниже

Логика поиска ответа проста — линейные размеры каждого формата переводятся в дюймы, а затем в пиксели, исходя из того, что в одном дюйме 300 (150) пикселей. Далее полученное число сравнивается с размером изображения (там есть определенные нюансы, связанные с отношением высоты и ширины, но об этом во второй части). Если размер формата в пикселях больше, чем размер нашего изображения (на рисунке — формат справа от фотографии), то он уже не подойдет, ибо фотографию придется растягивать, и мы получим разрешение хуже 300 (150) dpi. Если размер формата меньше, чем размер нашего изображения (на рисунке — формат справа от фотографии), то он подойдет — фотографию придется сжимать, и мы получим разрешение лучше 300 (150) dpi.

Из всех подходящих форматов калькулятор выбирает формат максимального размера (с печатью изображений меньшего размера проблем нет — насколько я понимаю, печатать можно и с разрешением 1200 dpi).

Подбор формата фотографии по размеру изображения в пикселях

Рекомендованный формат для печати с разрешением 300 dpi

 

Размер формата в пикселях для разрешения 300 dpi

 

Рекомендованный формат для печати с разрешением 150 dpi

 

Размер формата в пикселях для разрешения 150 dpi

 

content_copy Ссылка save Сохранить extension Виджет

Второй калькулятор по размерам уже напечатанного снимка и размерам исходного изображения помогает определить получившееся разрешение снимка и обрезанную при масштабировании часть. Сформулируем задачу.

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

При масштабировании, как видно, возможны два варианта:
первый — масштабирование с потерей части изображения,
второй — масштабирование с сохранением всего изображения, но с возникновением пустого места на снимке.
Как эстет, для расчетов я выбрал первый вариант.

Таким образом, первое, что требуется: найти получившееся разрешение снимка и часть изображения, которая не попала на снимок. Второе, соответственно, это будет разница между использованной шириной (высотой) и исходной шириной (высотой) изображения.

Чисто пикселей на дюйм

Ширина напечатанного изображения, см

Высота напечатанного изображения, см

Ширина изображения в пикселях

Высота изображения в пикселях

Соотношение высоты к ширине при печати

 

Соотношение высоты к ширине в пикселях

 

Используемая ширина при сохранении пропорций, пикселей

 

Используемая высота при сохранении пропорций, пикселей

 

Разрешение при печати, в пикселях на дюйм

 

content_copy Ссылка save Сохранить extension Виджет

Как увеличить качество картинки в фотошопе?

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

• Откройте Photoshop, перейдите в меню File>Open (Файл>Открыть) и выберите изображение:

• Перейдите в меню Image>Image Size(Изображение>Размер изображения):

• Диалоговое окно Image Size (Размер изображения) будет выглядеть, как показано на снимке ниже:

• Чтобы изменить только разрешение, снимите галочку с Resample Image (ресамплинг):

Перед тем, как увеличить разрешение в Фотошопе, мы говорим программе, что не хотим менять количество пикселей в изображении. Это происходит, когда мы изменяем размер изображений (увеличиваем или уменьшаем их). При изменении разрешения мы не меняем количество пикселей на фото, меняется только значение того, сколько из этих пикселей будет отображаться на дюйм:

• В поле Resolution(Разрешение) введите нужный размер:

Обратите внимание, что когда вы вводите значение в поле Resolution (Разрешение), значения ширины и высоты документа также изменяются:

• Нажмите кнопку «ОК», чтобы сохранить изменения:

Теперь вы знаете, как увеличить разрешение в Фотошопе.

В этом примере у нас было изображение с разрешением 300 пикселей на дюйм. Я хотела его опубликовать, поэтому изображение должно было быть как минимум 600 пикселей на дюйм. Помним, что мы не добавили и не уменьшили количество пикселей изображения.

Обратите внимание, что ширина и высота документа уменьшились наполовину, а разрешение удвоилось. Это означает, что для того, чтобы использовать разрешение 600 пикселей на дюйм и сохранить высокое качество, я могу распечатать это изображение только размером 5 x 3.33 дюймов:

Как вы уже догадались, ширина и высота нашего документа удвоились, когда мы уполовинили наше разрешение. Теперь мое изображение можно распечатать большего размера, но качество будет намного хуже. Поэтому нужно знать, как увеличить качество картинки в Фотошопе.

Заметьте, что размер в пикселях никогда не меняются. Мы начали с изображения 3000 на 2000 пикселей и закончили с размерами все еще 3000 на 2000 пикселей. Это важно помнить, потому что, когда мы меняем разрешение мы меняем только значение которое указывает, сколько пикселей будет отображаться на дюйм изображения, а не сколько пикселей составляют изображение.

Представьте, что вы и ваш друг находитесь в поле, и у каждого полное ведро с 5000 семян растений. Вы должны посадить все свои 5000 семян на 1-дюймовых квадратах поля. Теперь представьте, что вам разрешено посадить только 150 семян на дюйм, а вашему другу разрешается посадить 300 семян на дюйм. У обоих одинаковое количество семян, но вам потребуется вдвое больше площади поверхности в поле, чтобы посадить все свои семена.

Посчитаем, чтобы стало более понятно, как увеличить разрешение в Фотошопе:

Изображение в примере составляет 3000 на 2000 пикселей

600 пикселей на дюйм: 3000 пикселей / 600 пикселей на дюйм = 5 дюймов.
2000 пикселей / 600 пикселей на дюйм = 3,33 дюйма.
300 пикселей на дюйм: 3000 пикселей / 300 пикселей на дюйм = 10 дюймов.
2000 пикселей / 300 пикселей на дюйм = 6,667 дюйма.
150 пикселей на дюйм: 3000 пикселей / 150 пикселей на дюйм = 20 дюймов.
2000 пикселей / 150 пикселей на дюйм = 13,33 дюйма.
72 пикселя на дюйм: 3000 пикселей / 72 пикселей на дюйм = 41. 67 дюйма.
2000 пикселей / 72 пикселя на дюйм = 27.78 дюймов.

В этом примере изображение было распечатано лазерным принтером на стандартных листах бумаги размером 8,5 на 11 дюймов:

72 пикселя на дюйм: Размер документа настолько большой, что не помещается на листе размером 8,5 на 11 дюймов и обрезается. Качество печати крайне низкое, в результате чего изображение выглядит очень размытым.

150 пикселей на дюйм: Размер документа по-прежнему слишком большой для листа размером 8,5 на 11 дюймов, качество посредственное, но не слишком подходящее.

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

600 пикселей на дюйм: Изображение значительно меньше, чем другие файлы, но качество очень высокое.

Какое же разрешение выбрать? При 72 и 150 пикселях на дюйм изображения слишком низкого качества для получения высококачественной печати, так что они выбывают. Изображения с 300 и 600 пикселями на дюйм выглядели очень четко, но изображение с 600ppi было слишком мало. Для этого примера разрешение 300 пикселей на дюйм подходит лучше всего из-за большого печатного размера и высокого качества.

Поиск наилучшего разрешения – это лучший способ, как увеличить качество картинки в Фотошопе.

Данная публикация является переводом статьи «How to Change Image Resolution Using Adobe Photoshop» , подготовленная редакцией проекта.

Советы по работе с изображениями в Publisher

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

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

В этой статье:

Подкрепление сообщения рисунками

Когда вы создаете или выбираете изображения для публикации, следите за тем, чтобы они были:

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

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

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

• Неунывные    Анимация захватывает взгляд и не отпускает. Неохудяемая анимация может привести к остановке потенциальных клиентов в пути — они могут быть настолько отвлекались, что пропустили суть. Если вы используете анимированный рисунок в веб-публикации, четко укажите его назначение (например, показать последовательность использования продукта).

Выбор рисунка соответствующего размера

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

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

Разрешение изображения выражается в пикселях на дюйм (ppi) или точках на дюйм (dpi). Эти термины взаимозаменяемы.

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

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

Поиск фактического разрешения

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

Чтобы найти фактическое разрешение изображения в вашей публикации:

1. Выберите Сервис > Диспетчер графики.

2. В области задач Диспетчер графики в разделе Выберите рисунок щелкните стрелку рядом с рисунком с нужной информацией, а затем выберите элемент Подробности.

3. В поле Фактическое разрешение отображается разрешение в точках на дюйм.

Если вы планируете распечатывать цветные рисунки в типографии, ваш рисунок должен иметь разрешение от 200 до 300 пикселей на дюйм. Оно может быть выше — до 800 пикселей на дюйм, — но никак не ниже. Если вы планируете использовать эти рисунки только в электронном виде (например, в Интернете или PowerPoint), достаточно установить разрешение 96 пикселей на дюйм (разрешение экрана компьютерных мониторов).

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

Формат файла	Электронный документ	Настольная печать	Промышленная печать	Основное применение	Характеристики
BMP	x	x		Черно-белые рисунки (значки, кнопки, эмблемы)	Небольшой размер файла, небольшое количество цветов, отсутствие прозрачности, малое сжатие
EMF	x	x		Черно-белые рисунки	Усовершенствованная версия формата BMP с меньшим размером файла
EPS		x	x	Черно-белые рисунки, рисунки с контурами обрезки, двухцветные изображения, плашечные цвета	Цветовые данные CMYK
GIF	x			Низкое разрешение, простые цвета, черно-белые рисунки с резкими краями (значки, кнопки, эмблемы), анимации	Небольшой размер файла, мало цветов, прозрачность, небольшое сжатие без потери детализации
JPEG	x	x		Фотографии	Небольшой размер файла, миллионы цветов, отсутствие прозрачности, гибкое сжатие с потерей детализации
PNG	x	x	x	Черно-белые рисунки, анимация	Усовершенствованная версия формата GIF, меньший размер файла, миллионы цветов, прозрачность и сжатие без потери детализации
TIFF		x	x	Фотографии, черно-белые рисунки	Большой размер файла, насыщенные цветовые данные RGB и CMYK, прозрачность, сжатие без потери детализации
WMF	x	x		Черно-белые рисунки	Усовершенствованная версия формата BMP с меньшим размером файла

Уменьшение рисунков с высоким разрешением

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

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

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

Уменьшение рисунков с высоким разрешением

В Publisher вы можете уменьшать разрешение одного, нескольких или всех рисунков путем сжатия.

1. Щелкните рисунок правой кнопкой мыши и выберите Формат рисунка > Рисунок.

2. Нажмите кнопку Сжать.

3. В диалоговом окне Сжатие рисунков в разделе Конечный результат выберите один из вариантов:

   • Выберите пункт Профессиональная печать, чтобы сжать рисунки до 300 пикселей на дюйм.

   • Выберите пункт Настольная печать, чтобы сжать рисунки до 220 пикселей на дюйм.

   • Выберите пункт Веб, чтобы сжать рисунки до 96 пикселей на дюйм.

4. В разделе Применение параметров сжатия укажите, следует ли применить сжатие ко всем или только к выбранным рисункам, а затем нажмите кнопку ОК.

5. Если появится запрос на подтверждение оптимизации изображений, нажмите кнопку Да.

   Исходные рисунки с высоким разрешением будут заменены их сжатыми версиями.

Уменьшение размера публикации с помощью связанных рисунков

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

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

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

Вставка рисунка как ссылки

1. Выберите Вставить > Рисунок > Из файла.

2. В диалоговом окне Вставка рисунка найдите и выберите необходимый рисунок.

3. Щелкните стрелку около кнопки Вставить, затем выберите команду Связать с файлом.

Источники рисунков

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

Если же вы не можете создавать фотографии или иллюстрации профессионального качества, воспользуйтесь такими интернет-источниками:

• Служба Bing, которую можно использовать, не выходя из Office. В Office 2013 или 2016 выберите Вставка > Изображения из Интернета. В более ранних версиях Office выберите Вставка > Картинки.

• Фотобанки, например Corbis и Getty (платные ресурсы).

• Другие поисковые системы, например MSN, Yahoo и Google (права на использование могут различаться).

• Библиотеки и другие общественные заведения, например библиотека РАН (права на использование могут различаться).

Правовые вопросы

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

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

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

Если у вас есть сомнения относительно использования рисунка, перед публикацией свяжитесь с его владельцем и попросите разрешение.

Усовершенствование полученных рисунков

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

Эффекты можно применять сразу ко всем рисункам публикации, чтобы придать ей однородный вид.

Совет: Измененную картинку можно сохранить для повторного использования. Для этого щелкните ее правой кнопкой мыши и выберите команду Сохранить как рисунок. В списке Тип файла диалогового окна Сохранить как выберите формат файла. Если вы планируете использовать измененную картинку в печатных публикациях, сохраните ее в формате «Метафайл Windows» (WMF). Если она будет использоваться в веб-публикациях, нажмите кнопку Изменить, а затем выберите разрешение Веб (96 точек на дюйм). Сохраните картинку в формате GIF. В поле Сохранить в выберите расположение и нажмите кнопку Сохранить.

Обрезка

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

1. Выберите картинку в вашем документе.

2. Щелкните Рисунок > Обрезка .

3. Наведите указатель мыши на один из маркеров обрезки по краям изображения. Щелкните мышью и перетащите маркер, чтобы обрезать необходимую часть изображения.

Изменение размера

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

1. Выберите картинку.

2. Наведите указатель мыши на незакрашенный круг в углу изображения.

3. Перетаскивайте его, пока изображение не станет нужного размера.

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

Поворот и отражение

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

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

Поворот изображения

1. Выберите картинку.

2. Щелкните Упорядочить > Повернуть/отразить, а затем выполните одно из следующих действий:

   • Выберите Повернуть влево на 90° или Повернуть вправо на 90°. С каждым нажатием картинка поворачивается на 90°. Нажимайте соответствующую кнопку до тех пор, пока она не окажется в нужной позиции.

   • Выберите пункт Свободное вращение, затем наведите указатель мыши на круглый зеленый маркер вверху объекта. Когда вокруг него отобразится кружок, перетаскивайте его, пока не повернете объект под нужным углом.

Отражение картинки

1. Выберите картинку.

2. Щелкните Упорядочить > Повернуть/отразить, а затем выберите команду Отразить слева направо или Отразить сверху вниз.

Добавление тени

Добавив картинке тень, вы придадите публикации объем, глубину и профессиональный вид.

1. Выберите картинку.

2. Щелкните Форматирование > Стиль тени и выберите нужный стиль.

Примечание: Чтобы удалить тень, нажмите кнопку Стиль тени и выберите пункт Нет тени.

Изменение контрастности и яркости

Настраивая контрастность и яркость изображения, вы можете изменять внешний вид картинки.

1. Выберите картинку.

2. На панели инструментов Работа с рисунками выполните одно из следующий действий:

   • Чтобы увеличить яркость, нажмите кнопку Увеличить яркость .

   • Чтобы уменьшить яркость, нажмите кнопку Уменьшить яркость .

   • Чтобы увеличить контрастность, нажмите кнопку Увеличить контрастность .

   • Чтобы уменьшить контрастность, нажмите кнопку Уменьшить контрастность .

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

Если вы хотите разместить картинку за текстом, ее можно обесцветить. Для этого щелкните Рисунок > Цвет и выберите вариант Обесцветить.

Обтекание картинки текстом

Один из способов документооборота — добавить текст, который будет обтекать изображение. Функция обтекаения текстом позволяет разместить клип среди блоков текста.

1. Вставьте картинку в блок текста.

2. Выбрав картинку, щелкните Рисунок > Обтекание текстом , а затем выберите нужный стиль обтекания.

   Текст может располагаться вокруг рисунка, над или под ним или проходить через рисунок. Кроме того, вы можете установить точки обтекания, которые могут пригодиться при работе с фигурам неправильной формы.

Совет: Графические объекты можно вносить в документ как до, так и после добавления текста. Но при использовании эффекта обтекания текстом проще сначала добавить текст, а затем графику.

Google Фото: какие привилегии получают владельцы Google Pixel и стоит ли их покупать?

Хотя многие люди зависели от бесплатного хранилища фотографий в Google Фото, с июня 2021 года вам придется платить за использование приложения для облачного хранилища — то есть, если у вас нет телефона Pixel от Google.

Видите ли, смартфоны Pixel продавались с обещанием льгот Google Фото, и компания не может по праву отказаться от одного из главных преимуществ телефонов.

Однако преимущества зависят от того, какой у вас телефон Pixel, поэтому некоторые люди получают больше преимуществ от Google Фото, чем другие.

Если вы хотите знать, какие привилегии вы получаете для своего телефона, мы перечислили их ниже. И стоит ли покупать новый или старый телефон Google Pixel только ради облачного хранилища? Мы это тоже исследуем.

Google Pixel (Изображение предоставлено: Future)

Полноценное резервное копирование для «жизни»

Если у вас есть оригинальный Google Pixel или Pixel XL, тогда вам повезло, потому что вы можете сохранить исходное полное качество обратно план на всю жизнь. Вы можете оставаться в блаженном неведении ни о каких изменениях в Google Фото.

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

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

Google Pixel 3 (Изображение предоставлено: Future)

Резервное копирование в полном качестве… на данный момент

После выпуска телефонов Pixel первого поколения Google прекратил предлагать пожизненное оригинальное хранилище — возможно, он понял, что предлагать бесплатную услугу «на всю жизнь» может быть дорого. Вместо этого он установил ограничение по времени — и если у вас есть телефон Pixel третьего поколения, у вас еще есть время.

Резервные копии Google Pixel 3 и 3 XL будут сохраняться в исходном хранилище до конца января 2022 года, а затем они будут переведены на более низкий уровень. Это предлагает неограниченное хранилище «высокого качества», но требует оплаты, если ваши исходные фотографии превышают 15 ГБ.

Google Pixel 2 (Изображение предоставлено: Будущее)

Резервное копирование низкого качества

Подавляющее большинство телефонов Google имеют неограниченное хранилище высокого качества. Имейте в виду, что «высокое качество» на самом деле означает «ограничено 16 ГБ», и это исходное хранилище, которое позволяет вам сохранять фотографии в том разрешении, в котором вы их сделали.

Для большинства телефонов Pixel это ограничение не имеет значения, поскольку их камеры не превышают это разрешение.

Просто имейте в виду, что если по какой-либо причине вы захотите сохранить оригинальные фотографии — возможно, с другого устройства — вы получите только 15 ГБ памяти, прежде чем вам придется платить.И это хранилище складывается с тем, что вы использовали в других приложениях Google, поэтому, если у вас есть 14,5 ГБ файлов на Диске, вы можете легко превысить лимит.

Google Pixel 5 (Изображение предоставлено: Future)

Стоит ли покупать телефон Google Pixel для Google Фото?

Если вы заядлый пользователь Google Фото, возможно, вы подумываете о покупке телефона Pixel только из-за преимуществ, но это может быть не самой мудрой идеей.

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

Фактически, если вы купите телефон Pixel для неограниченного хранилища высокого качества, вы, вероятно, в конечном итоге потратите больше денег, чем если бы вы только что купили хранилище.

Конечно, есть и другие причины для покупки телефона Pixel, например, их стандартный Android или маленькие корпуса. Так что, если вы уже подумывали о покупке телефона Pixel, этого могло бы быть достаточно, чтобы изменить баланс, но мы бы не рекомендовали отказываться от идеально хорошего телефона только по этой причине.

Google Фото наконец перестает притворяться, что сжатые фотографии «высокого качества»

Планируете ли вы придерживаться Google Фото, когда его бесплатное неограниченное хранилище исчезнет 1 июня? Если вы чем-то похожи на меня, вы, вероятно, все еще пытаетесь понять, можете ли вы позволить себе откладывать это решение еще немного — и сегодня Google сделал это немного проще.

Во-первых, компания, наконец, сообщает об этом так, как есть: Google больше не будет притворяться, что его сжатые фотографии и видео более низкого качества имеют «высокое качество», что избавило бы меня от длинных объяснений буквально на прошлой неделе! (После 1 июня нынешние владельцы телефонов Google Pixel по-прежнему получают неограниченное количество фотографий «высокого качества», но если вместо этого вы используете, скажем, Samsung или iPhone, то вряд ли когда-либо были фотографии «нормального качества», которые не учитывайте новый лимит в 15 ГБ.)

Пока «высокий», привет, «заставка»

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

Что делать, если у вас уже есть Gmail на 10 ГБ и 2 ГБ документов, хранящихся на Google Диске, как у вас, а для фотографий осталось всего 3 ГБ, прежде чем вам придется платить? Прежде всего, знайте, что ваши существующие фотографии «высокого качества» до 1 июня не учитываются в квоте, но также у Google есть новый инструмент, который поможет вам найти и удалить размытые фотографии и большие видео, чтобы освободить еще больше места. .

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

Возможно, все еще запутались? Я бы не стал винить тебя; Мне потребовалось время, чтобы все это прямо в голове, особенно с учетом того, что Google предлагает разные уровни устаревшего бесплатного хранилища в зависимости от того, какой у вас телефон Pixel.Вот попытка сжать эту информацию для вас:

• Для всех, включая владельцев сторонних сайтов. : все, что вы загрузили бесплатно до 1 июня 2021 года, не будет учитываться в вашей квоте в 15 ГБ.
• Pixel 3A, Pixel 4, Pixel 4A, Pixel 5: Вы также по-прежнему получаете неограниченное количество бесплатных «Storage Saver», или «высокое качество» изображений в будущем, но не «Исходное качество»
• Pixel 3 : вы по-прежнему получаете неограниченное количество бесплатных фотографий и видео в исходном качестве , если вы загружаете их до 1 января 2022 года, после чего вы получаете неограниченное «хранилище» в будущем
• Pixel 2: У вас есть (в прошедшем времени) неограниченное количество бесплатных фотографий и видео в исходном качестве , если вы загрузили их до 16 января 2021 года, и в будущем вы получите неограниченное «Экономия места»
• пикселей (2016 г.): Вы получаете неограниченное количество бесплатных фотографий и видео в исходном качестве, пока ваш телефон не заработает.

Будущие телефоны Google не будут иметь этих льгот: существующие Pixels будут последними, которые будут поставляться с бесплатными неограниченными загрузками в высоком качестве, Google подтвердил на The Verge в ноябре.

пикселей изображения | Shutha

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

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

«Пиксели» и «точки»
Какие пиксели содержат
Как работают числа
Разрядность изображения
Связь между пикселями и размером файла

«Пиксели» и «точки»

Для представления изображения рядом ставится множество точек, обозначающих высоту и ширину.Затем мы измеряем, сколько из них покрывают площадь, которую мы обычно измеряем на дюйм. Возможно, вы слышали о «точках на дюйм (dpi)» и «пикселях на дюйм (ppi)». Возможно, вы даже слышали термины «линий на дюйм (lpi)» и «образцов на дюйм (spi)». Все они относятся к разным отраслям индустрии обработки изображений или издательской деятельности, и все они относятся к различным способам использования множества точек, каждая из которых одного цвета, для представления изображения. Давайте посмотрим на некоторые из них:

Принтер точек

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

Струйный принтер точек

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

Струйные принтеры

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

Точки для коммерческой печати

Рис. 2 На коммерческих принтерах точки расположены на одинаковом расстоянии друг от друга, но на самом деле их размер различается для получения более темных или светлых цветов на изображении.

Коммерческая печать, такая как Litho или Web, также превращает пиксели в точки. Однако, в отличие от струйных принтеров, эти точки равномерно распределены, и каждый основной цвет печати печатается под другим углом. Меньшие точки позволяют отображать больше белой бумаги, поэтому делая тона светлее, а большие точки, размер которых может увеличиваться до такой степени, что они накладываются друг на друга, делают цвета более темными. Однако люди, работающие в полиграфической промышленности, обычно называют их «линиями» по историческим причинам, поскольку изначально точки создавались путем проецирования фотографий через стеклянные пластины с тонкими линиями, вытравленными на стекле, которые образовывали точечный узор.

Причина использования другой цветовой системы при печати рассматривается позже. Хотя преобразование изображений в стандартные цвета принтера обычно не входит в обязанности фотографа (этим должен заниматься человек, имеющий ссылки на оператора принтера, обычно это дизайнер), все же важно знать некоторые из основы, чтобы вы могли убедиться, что вы поставляете здоровые изображения, которые не вызывают проблем с цветом в дальнейшем на производственной линии. См. Страницу «Почему для печати используется CMYK», если вы хотите узнать, почему для печати используется другой набор цветов.

Цифровые точки

Цифровые изображения также состоят из однотонных точек. Они называются «пикселями» и располагаются рядом без промежутков между ними. Они различаются в зависимости от устройства, на котором они отображаются.

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

Обычно мы рассматриваем изображения как непрерывные тона, не подозревая о структуре под ними.Но когда изображение оцифровывается, оно разбивается на крошечные блоки с описанием значения цвета в каждой точке.

Рис. 4 В этом преувеличенном примере мы действительно можем видеть пиксели.

Выше изображение преобразовано во множество рядов сплошных тонов; немного похоже на цветные строительные блоки. Однако эти блоки изображения меняются на разных этапах создания изображения.

Цифровые точки Camera Raw

Рис. 5 Файл Camera Raw также захватывает пиксели, но делает это иначе, чем обычное цифровое изображение.

Если вы снимаете изображение в формате Camera Raw на цифровую камеру, изображение будет таким, что каждый квадрат или пиксель является записью только одного из трех основных цветов: красного, зеленого и синего (RGB ).

Обычные цифровые точки

Рис. 6 В обычном цифровом файле изменяется цвет и оттенок каждого пикселя.

Это снова меняется, когда изображения конвертируются из файла необработанного снимка или отсканированы с пленки, тогда оцифрованное изображение состоит из цветных блоков.Фотографы называют эти блоки «пикселями», что является упрощением термина «элемент изображения». Однако операторы сканера вместо этого часто называют их «образцами», поскольку каждый блок представляет собой точку цвета, которую сканер отбирал в виде мелких строк по всему изображению.

Точки экрана цифровые

Рис. 7 Монитор представляет каждый пиксель в виде трех полосок и меняет интенсивность каждой полосы, чтобы отобразить то, что выглядит как определенный цвет.

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

Как мы будем относиться к количеству пикселей по площади?

В этом курсе мы будем просто говорить о «точках на дюйм» (dpi).У фотографов стало принято называть dpi, хотя, строго говоря, «пиксели на дюйм» (ppi) более корректно, когда речь идет о цифровых точках, с которыми в основном имеют дело фотографы. Подробнее об этом позже.

Какие пиксели содержат

Когда дело доходит до цифровых точек или пикселей, на самом деле в них нет ничего, кроме набора чисел или цифр, отсюда и термин «цифровой».

Рис. 8 Пиксель — это не что иное, как три набора чисел, которые вместе представляют определенный цвет.

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

Рис. 9 В простейшей форме пиксель может быть черным, представленным числом «0», и белым, представленным числом «1»

Чтобы объяснить, как работают числа в пикселях, полезно начать с изображения в его простейшей форме. Это черно-белое изображение, в котором каждый пиксель имеет значение «0» для черного или «1» для белого. Это называется растровым изображением, поскольку для описания цвета требуется только один бит информации, 0 или 1. Проблема в том, что здесь может быть только два тона: черный и белый, что с фотографической точки зрения не очень полезно, как можно увидеть в примере.

Рисунок 10 Изображение, состоящее только из черно-белых тонов

ПРИМЕЧАНИЕ. В компьютерной терминологии «Черно-белый» буквально означает «черно-белые тона без серого». Однако фотограф думает о черно-белом как о непрерывном тоне черного, переходящем от серого к белому. В цифровых терминах это называется оттенками серого. Нет проблем с фотографом, продолжающим использовать термин «черно-белое» в его традиционном смысле, но имейте в виду, что Photoshop использует этот термин по-другому.Если вы предоставляете изображения кому-то другому, например дизайнеру или редактору изображений, то безопаснее вместо этого называть черно-белые изображения оттенками серого. Они должны знать терминологию фотографа, но лучше перестраховаться, чтобы избежать недоразумений.

Рис. 11 Изображение в градациях серого состоит из гораздо большего числа оттенков, чем простое черно-белое изображение

Чтобы получить фотографию с полным диапазоном оттенков серого, как можно увидеть в следующем примере, требуется намного больше двух тонов, представленных числами 0 и 1.Используется система из 256 тонов со значениями 0-255. Снова «0» представляет черный цвет, но на этот раз «255» представляет белый цвет. Эти числа между ними относятся ко всем промежуточным оттенкам серого между черным и белым.

Рис. 12 Изображение с 256 оттенками серого достаточно, чтобы передать ощущение непрерывного тона.

Сначала может показаться странным сказать, что существует 256 тонов, когда числа увеличиваются только до 255. Объяснение состоит в том, что диапазон также включает «0», который учитывает дополнительный тон, увеличивая общее количество до 256.Значение тона 0 по-прежнему является тоном.

Как работают числа

Хотя мы думаем о числах в десятичном выражении (единицы, десятки, сотни и т. Д.), Компьютер этого не делает. Он использует «двоичную» форму чисел (единицы, двойки, четверки, восьмерки и т. Д.), Полностью состоящую из цифр «0» и «1». Для десятичных цифр требуется всего три цифры, чтобы записать наивысшее значение «255», но при использовании двоичных цифр только «0» и «1» требуется всего восемь цифр.Это означает, что каждый пиксель шкалы серого имеет номер от «00000000» для черного до «11111111» для белого, поскольку двоичное значение «11111111» равно десятичному значению «255».

Рисунок 13 Как компьютер видит числа от 0 до 255.

Не обязательно знать, как работают двоичные числа. Несмотря на то, что все компьютерные операции выполняются с использованием двоичной системы каждый раз, когда Photoshop или любая другая компьютерная программа отображает числа, которые вы можете прочитать, они всегда будут в десятичном формате, поэтому перевод не потребуется.Что полезно знать, так это то, что, поскольку компьютеру требуется один «бит» информации для хранения каждой двоичной цифры, это приводит к тому, что компьютер должен использовать 8 бит информации для хранения 256 возможных тонов от 0 до 255. Отсюда и термин «8-битное изображение». В компьютерных терминах «8 бит» равняется «1 байту», поэтому в результате каждый пиксель в изображении в градациях серого равен 1 байту в размере файла.

Рис. 14 Изображение в градациях серого имеет только 1 набор чисел на пиксель, изображение RGB имеет три набора чисел на пиксель, а изображение CMYK имеет четыре набора чисел на пиксель

До сих пор мы рассматривали только изображения в оттенках серого.Photoshop может использовать несколько методов для представления цвета, но два из них, которые вы, скорее всего, будете использовать, — это стандартный набор красного, зеленого, синего (обычно обозначаемый как «RGB») и набор цветов принтера: голубой, пурпурный, Желтый, черный (обычно называемый «CMYK»). Почему должны быть разные способы представления цвета, не будет объяснено на данном этапе, поскольку это будет рассмотрено в разделах, посвященных цвету. Короче говоря, все ваши изображения, с которыми вы будете работать и отправлять клиентам, будут в оттенках серого, RGB или CMYK.

В цветном изображении RGB каждый пиксель состоит из трех чисел, представляющих значения красного, зеленого и синего цветов. Поскольку каждый пиксель RGB имеет три набора 8-битных двоичных чисел, он, следовательно, имеет в общей сложности 24 бита компьютерной информации. Отсюда и термин «24-битный цвет». И поскольку 8 бит равны 1 байту, каждый пиксель RGB равен 3 байтам в размере файла. Цветное изображение CMYK работает так же, но вместо этого имеет четыре набора 8-битных двоичных чисел, поэтому каждый пиксель равен 4 байтам. В результате изображение RGB в три раза больше по размеру файла, чем изображение в оттенках серого и изображение CMYK в четыре раза больше, конечно, при условии, что изображения имеют одинаковое количество пикселей.

ПРИМЕЧАНИЕ. В Photoshop отдельные основные цвета, будь то серый, RGB или CMYK, известны как «каналы». Следовательно, оттенки серого имеют 1 канал, RGB — 3 канала, а CMYK — 4 канала. Иногда может возникнуть путаница при описании размеров изображения. Изображение RGB часто называют «8-битным» или «24-битным», не говоря уже о том, что означают «8» и «24». Оба описания верны в том смысле, что изображение RGB имеет 8 бит информации на канал, или всего 24 бита (три канала).То же самое справедливо и для CMYK, за исключением того, что он обозначается как «8 бит» на канал или «32 бита» в целом (четыре канала).

Битовая глубина изображения

Сканирующие машины лучшего качества и цифровые камеры могут использовать более 8 бит при создании 10-битных, 12-битных, 14-битных, а иногда и 16-битных канальных изображений. Количество каналов для оттенков серого, RGB и CMYK остается прежним, но количество цифр в каждом канале увеличивается. Использование до 16 бит на канал дает огромное увеличение количества создаваемых цветов, а не вдвое больше, чем может показаться разница между «8» и «16».8-битное изображение имеет 256 тонов на канал, а 16-битное изображение имеет 2, умноженные на себя в 16 раз, что составляет 65 536 тонов. В изображении RGB это составляет 65 536 x 3 (для трех каналов RGB), что дает много триллионов потенциальных цветов.

Рис. 15 Выше представлена ​​диаграмма, представляющая 8-битные, 12-битные и 16-битные изображения. 16-битное изображение может представлять триллионы разных цветов.

Photoshop принимает только 1-битные, 8-битные или 16-битные изображения, поэтому независимо от того, сколько бит на канал использует сканер или цифровая камера, если изображение имеет размер более 8 бит, оно будет считано Photoshop как 16 бит.Это очевидное увеличение битовой глубины не дает никаких преимуществ, поскольку 12-битное сканирование по-прежнему содержит только 12 бит информации на канал, просто он будет сохранен Photoshop в файле размером 16 бит. Поскольку в 16 битах вдвое больше битов информации, размер рабочего файла будет вдвое больше, чем у 8-битного изображения. Несмотря на дополнительный размер файла и огромное увеличение количества цветов, исправление 16-битного сканирования в Photoshop может иметь некоторые очень реальные преимущества, но эта тема будет затронута в разделе цветов.

Связь между пикселями и размером файла

Изображения в оттенках серого, RGB и CMYK имеют либо 1, 3 или 4 байта на пиксель (8 бит на изображение канала), либо 2, 6 или 8 байтов на пиксель (16 бит на изображение канала). Поэтому достаточно просто сложить количество пикселей в изображении, чтобы определить размер файла. Для 8-битных изображений оттенки серого имеют то же количество байтов, что и пикселей, RGB имеет в 3 раза больше байтов, чем пикселей, а изображение CMYK — в 4 раза.Для 16-битных изображений цифры вдвое больше.

Рисунок 16 Диаграмма, показывающая, как размеры файлов различаются между истинным черно-белым изображением, изображением в оттенках серого, изображением RGB и изображением CMYK

К сожалению, как и большинство вещей, относящихся к компьютерам, всегда есть другой вариант или исключение из общего правила. Можно разумно предположить, что термин килобайт (КБ) подразумевает значение в 1000 байт, но поскольку компьютер использует двоичную систему счисления, десятичное число 1000 становится довольно нечетным числом 1111011000 в двоичном выражении.В компьютерной индустрии было решено округлить это число до двоичного числа 10000000000 (2 в степени 10 или 1 при 10 нулевых значениях). Однако это небольшое увеличение числового значения, так как оно затем переводится обратно в 1024 в десятичном выражении. Это не большая проблема, просто помните, что килобайт немного больше, чем следует из названия. Таким образом, изображение в градациях серого, состоящее из одного миллиона пикселей, одного миллиона байтов, будет иметь размер всего 0,95 мегабайта (1000000/1024/1024) или чуть меньше 1 мегабайта.Общее эмпирическое правило: один миллион пикселей равен одному мегабайту — это нормально, если вам не нужно быть точным, поскольку разница невелика.

ПРИМЕЧАНИЕ. См. Страницу с префиксами номеров, если вы хотите узнать больше о терминах, используемых для размеров номеров.

Чтобы продолжить, лучше всего упростить то, что мы подразумеваем под цифровым изображением, и добавлять вариации и исключения только в случае необходимости. В настоящее время текст будет относиться ко всем изображениям как к цветным в RGB с 8 битами на канал, всего 24 бита для трех каналов.Вы можете в конечном итоге работать с 16-битными (всего 48 бит) изображениями RGB, но вам всегда нужно будет доставлять изображения в 8-битном формате, так как это то, что ожидают клиенты или заказчики, так что это стало стандартом.

РАЗРЕШЕНИЕ СЛЕДУЮЩЕГО УРОКА И РАЗМЕР ФАЙЛА

Вверх по основам цифровой обработки изображений
Вернуться к плану урока
О разрешении и размере файла

пикселей Головоломки и компьютерное мышление

Также для детей младшего возраста практика и исследования:

• счисление
• считая
• цветов
• симметрия

Обучение в составе:

• вычисления
• по математике
• арт
• история

Простые раскраски по номерам

Вычислительная техника

Одностороннее представление изображений и сохранение их в компьютере или цифровой камере в виде числовой сетки.Этот способ представления изображения называется растровым изображением или растровым изображением .

Каждое изображение разделено на сетку квадратов. Каждое число указывает цвет этого квадрата изображения. Каждый квадрат называется пикселем. Чем больше пикселей составляет изображение, тем выше разрешение, которое оно имеет. Снимки с более высоким разрешением имеют больше деталей и, в частности, более плавные линии. Изображение менее пиксельное — квадраты меньше видны. Это также означает, что вы можете видеть более мелкие детали — более мелкие предметы могут исчезнуть на изображении с низким разрешением .

Каждое изображение также должно иметь (или иметь заранее согласованный) ключ, указывающий, какой номер соответствует какому цвету. Допустимое количество цветов называется глубиной цвета . Чем больше цветов, тем больше битов требуется для хранения цветов каждого пикселя. Для двух цветов вам понадобится один бит для каждого пикселя, для 4 цветов вам понадобится 2 бита, для 8 цветов вам понадобится 3 бита и так далее. Каждый битовый шаблон представляет собой разное число и, следовательно, разный цвет.

Вычислительное мышление

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

Это также пример декомпозиции по данным. Изображение разбито на маленькие квадраты. Другой способ разложить изображение, поэтому другое представление — это линии и формы внутри него. Это разложение вместо этого приводит к векторным изображениям.

Каждое изображение уникально, но, выбирая представление растровых изображений, мы получаем обобщенный способ представления изображения. Таким образом можно представить любое изображение.

Инструкции: простые раскраски по номерам

В каждом квадрате есть число, указывающее цвет, который нужно раскрасить в этом квадрате. Посмотрите цвета в ключе.

Изучите различные алгоритмы их раскрашивания. Например:

1. Работайте вдоль строк, раскрашивая каждый пиксель по очереди, прежде чем переходить к следующей строке.
2. Выберите цвет, затем работайте по строкам, раскрашивая пиксели только этого цвета. Когда вы дойдете до конца сетки, выберите следующий цвет и начните заново.Повторяйте это, пока у вас не закончатся цвета.
3. Выберите неокрашенный квадрат и раскрасьте его, затем раскрасьте все пиксели вокруг него, которые имеют одинаковое число, двигаясь наружу, пока их пиксели не перестанут быть смежными с этим номером. Затем выберите новый неокрашенный квадрат и повторяйте, пока не будет получен весь рисунок.

Ресурсы: Пазлы с раскраской по номерам

Вот листы и решения головоломок «Раскраска по номерам», которые вы можете скачать. Здесь видны ответы, так что вы можете увидеть, что это за картинки, или отправьте детей на наш веб-сайт «Bit of cs4fn», где они могут сами загрузить их, не увидев сначала ответов.

Мини-звери Картинки

Пчелы среди цветов

Божья коровка

Пчелы среди цветов с множеством других миниатюрные звери

Хэллоуин картинки

Римлянам и пиксельные головоломки

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

---

Представление чисел и пиксельные головоломки

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

---

Программирование пиксельных пазлов

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

• Бегайте взад и вперед по рядам, раскрашивая каждый квадрат по очереди, покрывая сетку только один раз ИЛИ
• Перескакивайте по раскраске сетки первым цветом, затем переходите по раскраске сетки вторым цветом и так далее,…
• Программа может использовать форму кодирования длин серий (см. Ниже), чтобы сохранить инструкцию в программе для каждого квадрата.

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

---

Отправка пазлов, раскрашенных по номерам

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

Инструкции: пазлы раскраски по номерам

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

Так, например, с таблицей поиска цветов 1 Синий, 2 Красный: 1 1 1 2 2 2 будет означать цвет трех пикселей синим, а затем трех пикселей красного.

Ресурсы: пазлы по номерам

Вот листы и решения головоломок «Раскраска по номерам», которые вы можете скачать.

Изображение африканских животных

---

Пиксельные таблицы с файлами реальных изображений

Следующим шагом будет исследование реальных изображений. Вы можете преобразовать фактические файлы изображений в электронную таблицу, например, удерживая числа x, y и R G B для каждого пикселя. Затем вы можете изменить числа (например, обнулить все значения зеленого цвета), а затем посмотреть, что вы получите.

---

Симметричные раскраски по номерам

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

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

Узнайте больше на нашей странице головоломки с симметричными пикселями

---

Головоломки с кодированием длин серий

Инструкции: головоломки с кодированием длин серий

Мы даем эти головоломки в двух формах: одна немного сложнее, где все состоит из чисел, и другая, более простая для понимания, где цвета указаны явно.Каждая пара дает количество пикселей, которые нужно раскрасить, и цвет, который нужно использовать. Раскрасьте пиксели, следуя инструкциям по порядку.

Подсказка по вычислительному мышлению

Способ представления данных (здесь изображений) влияет на объем необходимого хранилища. Растровая графика подразумевает обработку изображения как сетки. Затем вы сохраняете число, представляющее цвет в каждой точке (или пикселе) в сетке. Кодирование длин серий сокращает количество чисел, которые вам нужно сохранить, путем подсчета серий чисел.

Ресурсы: Загадки с кодированием длин серий

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

Логическое мышление Пазлы со сжатыми пикселями

Инструкции: Логическое мышление Пазлы со сжатыми пикселями

Числа в каждой строке головоломки со сжатыми пикселями с логическим мышлением говорят вам количество ячеек в каждой группе черных ячеек в строке.Таким образом, если числа рядом со строкой равны 2,4,5, это означает, что в строке есть блок из 2 черных ячеек, блок из 4 черных ячеек и блок из 5 в указанном порядке. Каждый блок разделен одной или несколькими белыми клетками. Белые клетки также могут появляться до или после блоков. Точно так же кодируются столбцы.

Подсказка по вычислительному мышлению

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

Ресурсы: Логическое мышление Головоломки со сжатыми пикселями

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

Еще пазлы

Множество других головоломок, связанных с вычислительным мышлением, включая книгу cs4fn Computational Thinking Puzzle Book Issue 1

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

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

Плагин оптимизации и сжатия изображений для WordPress и API от ShortPixel

Плагин оптимизации и сжатия изображений для WordPress и API от ShortPixel

284 КБ 41 КБ

85% сжатие изображения

У вас медленный сайт?

Бесплатная регистрация

Повысьте скорость вашего сайта и повысите рейтинг SEO

Введите URL своего веб-сайта ниже, чтобы узнать, что ShortPixel может сделать для вашего веб-сайта

ShortPixel повышает производительность веб-сайта за счет изменения размера, сжатия и обслуживания изображений из CDN.

Оптимизированные изображения меньше и визуально похожи на исходные изображения.

• Выберите свой уровень сжатия
• Теперь с CDN
• Поддерживаемые форматы: JPG, PNG, GIF, PDF, WebP, Avif

Бесплатная регистрация

ShortPixel Image Optimizer WordPress плагин

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

• Пакетная автоматизация
  занимает секунды
• БЫСТРЕЕ,
  УМЕНЬШЕННОЕ РЕЗЕРВНОЕ КОПИРОВАНИЕ
• Быстрая обработка
  старых и новых изображений
• Конфиденциальность для всех
  обработанных файлов

Скачать плагин Подробнее …

Счастливые пользователи Интернета

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

• Меньше использования полосы пропускания
• Быстрое резервное копирование
• Лучше поисковый рейтинг
• Супер быстрые сайты
• Пакетная оптимизация изображений
• Плагин для WordPress
• Качество изображения сохраняется
• Мощные алгоритмы

4228503550

изображений уже оптимизированы

на более чем 1 миллионе веб-сайтов более чем 500 000 пользователей по всему миру.
На данный момент мы сэкономили в Интернете более 600 000 ТБ трафика. ×

Установите наше новое приложение для Android, чтобы оптимизировать фотографии на мобильном устройстве и сэкономить много места.

Google Фото прекращает бесплатное неограниченное хранилище фотографий для не-Pixels

Одна из самых больших привилегий Google Фото будет уменьшена в следующем году.Неограниченное «высококачественное» резервное копирование фотографий прекращается для телефонов, отличных от Pixel, с 1 июня 2021 года. Пользователи, использующие Google Фото для резервного копирования фотографий на другие телефоны, будут видеть все загрузки после этой даты в общем хранилище Google.

Эта новость появилась благодаря сообщению в блоге на сайте Google, и Google признал, что это «может стать сюрпризом» — это немного преуменьшает. Тем не менее, это продолжает логическую тенденцию последних нескольких лет. Google Pixel 4 вообще не поставлялся с резервными копиями «оригинального качества», а Pixel 2 получает неограниченное количество резервных копий исходного качества только до конца 2020 года, хотя исходному Google Pixel по-прежнему обещают резервные копии навсегда.

Параметры резервного копирования в Google Фото.

Для контекста, Google Фото предлагает два варианта резервного копирования фотографий: высокое качество и исходное качество. Исходное качество означает исходное разрешение, а «высокое качество» может быть уменьшенной версией с измененным размером.

Google ясно дает понять, что это изменение не повлияет на уже загруженные фотографии, поэтому 1 июня у вас не будет гигабайтов хранилища, занятых предыдущими резервными копиями. По оценкам Google, бесплатных 15 ГБ хранилища, которые поставляются с каждой учетной записью Google, достаточно для большинства людей, чтобы работать в течение следующих трех лет без каких-либо проблем, и клиенты будут уведомлены как в приложении, так и по электронной почте, когда предел.Google также прямо заявляет, что Pixel 1-5 не затронуты этим изменением и по-прежнему подлежат неограниченному высококачественному резервному копированию. Однако такая формулировка вызывает некоторые сомнения в отношении будущих пикселей.

Google Фото — одна из самых популярных услуг компании, хотя бесплатное резервное копирование фотографий в какой-то момент должно было закончиться. Google активизирует усилия по продвижению своих планов платного хранилища Google One, включая бесплатный VPN. Обновленная функция «всплывающих цветов» Google Фото также будет заблокирована за платным доступом Google One.

Инструмент оценки хранилища Google Фото.

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

Пикселей под вашими фотографиями

Вы когда-нибудь задумывались о пикселях, из которых состоят ваши изображения? Сегодня Джоди Фридман из MCP Actions анализирует изображение, чтобы пролить на него некоторый свет.

Меня часто спрашивают, почему важно разрешение и что все это значит. Поскольку «картинка говорит тысячу слов», возможно, это поможет вам лучше ее понять — вместо того, чтобы вдаваться в технические подробности. Ниже показан глаз моей дочери (и часть ее шляпы). Я обрезал его, затем изменил размер (выбрасывая пиксели). Мой конечный результат был 30 пикселей в ширину и 72 пикселей на дюйм. Так что при увеличении на 3200% — вот результат. Как видите, ваша фотография состоит из крошечных квадратов. Чем больше фотография и чем выше разрешение, тем меньше квадратов.Для изображений превосходного качества вам нужно больше пикселей на дюйм и больший размер. Чем больше плотность пикселей на фотографии, тем больше вы сможете распечатать.

Далее идет полная фотография с измененным размером для моего блога (чтобы она соответствовала) шириной 900 пикселей. И разрешение 72ppi (что считается подходящим для Интернета).

Если я хотел бы напечатать, вот два примера чисел, которые работают. Оба означают ТОЧНО ОДИН ВЕЩЬ !!!! Зайдите в раздел изображение — размер изображения — в фотошопе. Вы увидите размер вашего фото.Фотографии поступают с вашей камеры в виде цифровых файлов с разрешением 72 пикселя на дюйм (по крайней мере, все мои камеры). Моя фотография началась с: 72ppi и была 33,3 × 50 дюймов. 2400 × 3600 пикселей.

Если нам нужна фотография с разрешением 300 пикселей на дюйм, поскольку некоторые лаборатории этого требуют, а некоторые люди считают, что им нужно разрешение 300 пикселей на дюйм, вот результат: 300 пикселей на дюйм и 8 × 12 дюймов. Обратите внимание, что пиксели имеют те же 2400 × 3600, что и предыдущий! Это то же качество, что и 72ppi, и было 33,3 × 50 дюймов.

Надеюсь, эта фотография помогла вам начать понимать пиксели под вашими фотографиями.

Этот пост на тему «Пиксели под вашими фотографиями» был отправлен Джоди Фридман из MCP Actions.

No related posts.