Web картинки: Attention Required! | Cloudflare

Адаптивные изображения — Изучение веб-разработки

В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые  имеются в HTML для их реализации. Responsive images — только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.

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

Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.

• Содержимому тега main задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.
• Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
• Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.

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

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

Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.

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

Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. 

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

Примечание: Новые возможности обсуждаются в статье — srcset/sizes/<picture> — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML <img>. Как показано на примере выше — изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. CSS больше подходит для адаптивного дизайна чем HTML, об этом поговорим в следующем модуле о CSS.

Разные разрешения: Разные размеры

Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент <img> обычно позволяет указать только один  путь к файлу:

<img src="elva-fairy-800w. jpg" alt="Elva dressed as a fairy">

Однако есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
    
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Атрибуты srcset

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

1. Название изображения (elva-fairy-480w. jpg.)
2. Пробел.
3. Актуальная ширина картинки 
   в пикселах (480w) — заметьте, что здесь используется w вместо px, как вы могли ожидать.  Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  Cmd + I , чтобы вывести информацию на экран).

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

1. Медиа-условие ((max-width:480px)) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим «когда viewport width меньше или равен 480 пикселям».
2. Пробел.
3. Ширину слота (в оригинале «width of the slot»), занимаемую изображением, когда медиа-условие истинно. (440px)

Note: Для ширины слота, вы можете указать абсолютные значения (px, em) или значение относительно окна просмотра (vw), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.

Итак, с такими атрибутами, браузер сделает следующее:

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

И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px, тогда будет загружено изображение elva-fairy-480w.jpg, так как свойство ширины (480w) наиболее близко значение 440px. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.

Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута src.

Note: В описании элемента <head> вы найдёте строку <meta name="viewport" content="width=device-width">: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)

Полезные инструменты разработчика

Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера (not-responsive.html), затем открывал Responsive Design View (Tools > Web Developer > Responsive Design View), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.

Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к DOM Inspector, кликал по элементу <img> в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения

А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.

Переключения разрешений: Одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):

В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение — всего 39KB.

Художественное оформление

Подводя итоги, проблема художественного оформления заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент <picture> позволяет нам применять именно такое решение.

Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

Давайте исправим это при помощи элемента <picture>! Так же как <video> и <audio>, элемент <picture> это обёртка содержащая некоторое количество элементов <source> которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента <img>. Код responsive.html выглядит так:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait. jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

• Элемент <source> принимает атрибут media, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport’a составит 799px или меньше, будет выведено изображение первого элемента <source>. Если ширина составит 800px и более — второго.
• Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <img> выше, <source> может принимать атрибуты srcset и sizes с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента <picture>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
• Вы всегда должны использовать элемент <img>, с src и alt, прямо перед </picture>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <source>) или браузер не поддерживает элемент <picture>.

Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:

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

Почему это нельзя сделать посредством CSS и JavaScript?

Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.

Смело используйте современные форматы изображений

Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.

<picture> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type, браузер сразу определит файлы такого типа как неподдерживаемые:

<picture>
  <source type="image/svg+xml" srcset="pyramid. svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

• Не используйте атрибут media, если вам не нужно художественное оформление.
• В элементе <source> можно указывать путь к изображениям только того типа, который указан в type.
• Как и в предыдущих примерах, при необходимости вы можете использовать srcset and sizes.

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

1. Напишите простую HTML-разметку.
2. Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
3. Используйте элемент <picture> для работы с художественно оформленной картинкой.
4. Обозначьте несколько разных размеров для этой картинки.
5. Используйте srcset/size для описания переключения при смене размеров вьюпорта

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

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

• Художественное оформление: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов — например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью <picture> элемента.
• Переключение разрешений: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и srcset и sizes атрибуты.

Это так же подводит нас к окончанию целого модуля «Мультимедиа и встраивание»! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше — это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!

Оптимизация изображений для web / Хабр

В интернете достаточно статей и проектов для ресайза изображений. Почему же нужна еще одна? В этой статье я расскажу почему нас не удовлетворили текущие решения и пришлось пилить собственное.

Проблема

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

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

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

В качестве примера, как делать не нужно можно посмотреть на главную страницу такого известного сайта, как github.com. При весе страницы 2 Мб, 1.2 из них занимают бесполезные картинки, которые можно оптимизировать и не загружать.

Второй пример — наш Хабр. Скриншот приводить не буду, что бы не растягивать статью, результаты по ссылке. На хабре картинкам изменяют разрешение на нужное, но не оптимизируют их. Это позволило бы сократить их размер на 650 Кб (50%).

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

Распространенные решения

Все, что будет сказано далее относится к JPEG и PNG изображениям, т.к. это наиболее популярные форматы в интернете.

Вбив в google что-то вроде «image resize backend» вы увидите, что в половине случаев предлагается использовать Nginx, другая часть— это различные самописные сервисы, чаще всего Node.js.

Из nginx, а точнее из libgd, которая используется в модуле nginx’а мы смогли выжать на тестовой картинке 63 RPS, что неплохо, но хотелось бы быстрее и больше гибкости. Graphicsmagick тоже не подходит, т.к. его скорость работы слишком низкая. К тому же оба эти решения выдают не оптимизированные изображения. Большинство других решений, например на Node предлагают использовать Sharp для ресайза, MozJPEG для оптимизации JPEG изображений и pngquant для оптимизации PNG.

Мы и сами достаточно долгое время пользовались самописной связкой из Nod’ы, Libvips и MozJPEG c pngquant, но в один из дней задались вопросом— «А можно ли сделать ресайз быстрее и менее требовательным к ресурсам?».

Спойлер: можно. 😉

Теперь хорошо бы выяснить, как можно ускорить наше приложение. Изучив код приложения мы выяснили, что imagemin, который использовался для оптимизации, а в частности его плагины MozJPEG и pngquant при работе дергают одноименные утилиты через os.Exec. Будем это дело однозначно выпиливать и использовать только биндинги к Cи’шным либам. Для ресайза использовался модуль Sharp, который представляет собой биндинг к С библиотеке Libvips.

Наша реализация

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

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

Быстро написали прототип, протестировали и поняли, что несмотря на большее, чем в Sharp, количество внутренних крутилок, Libvips по-прежнему выдает на выход не оптимизированные изображения. С этим надо что-то делать. Опять обращаемся ко всемогущему гуглу и узнаем, что лучший вариант это по-прежнему MozJPEG. Тут начинают закрадываться сомнения, что мы сейчас напишем то же самое, что было на Node, только на Go. Но внимательно почитав описание MoZJPEG узнаем, что она является форком libjpeg-turbo и совместима с ней.

Выглядит очень многообещающе. Дело за малым — собрать свою версию Libvips, в которой jpeg-turbo заменен на версию от Mozila. Для сборки мы выбрали Alpine Linux, т.к. приложение все равно планировалось публиковать с помощью Докера и Alpine имеет очень приятный формат конфига пакета, очень похожий на используемый в Arch Linux.

Собрали, протестировали. Теперь Libvips сразу при ресайзе выдает оптимизированную версию. То есть в Node версии версии мы сначала делали ресайз, а потом еще раз пропускали картинку через decoder-encoder. Теперь мы только делаем ресайз.

С JPEG разобрались, а что делать с png. Для решения этой задачи была найдена библиотека libpngquant. Она не очень популярная, несмотря на то, что консольная утилита pngquant, которая базируется на ней, используется во многих решениях. Так же к ней был найден биндинг на Go, немного заброшенный и с утечкой памяти, пришлось его форкнуть починить, дополнить документацией и всем остальным, что подобает приличному проекту. Libpngquant мы тоже собрали в виде Alpine пакета для простой установки.

Благодаря тому, что теперь изображение не требуется сохранять в файл для обработки c помощью pngquant мы можем немного оптимизировать процесс. Например не сжимать картинку при ресайзе в Libvips, а только после обработки в pngquant. Это позволит сохранить немного драгоценного процессорного времени. Надо ли говорить, что мы так же очень экономим благодаря тому, что вызов C библиотеки гораздо быстрее запуска консольной утилиты.

После того, как прототип был написан, протестирован на моем пк и выдавал приличные 25 RPS на мобильном двух ядерном проце, сжирая весь CPU, захотелось увидеть сколько можно выжать из него на нормальном железе. Запускаем код на шести ядерной машине, натравливаем Jmeter и WTF??? Получаем 30 RPS. Пробуем разобраться что за фигня.

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

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

Все более или менее современные ядра Linux (3.9+ и 2.6.32-417+ в CentOS 6) поддерживают опцию SO_REUSE, которая позволяет использовать один порт нескольким экземплярам приложения. Данный подход удобнее, чем балансировка средствами стороннего ПО, такого как HAProxy, т.к. не требует конфигурации и позволяет быстро добавлять и убирать инстансы.
Поэтому мы использовали SO_REUSE и опцию «—scale» в Docker compose, которая позволяет указать количество запускаемых экземпляров.

Время мерить

Пришло время оценить результат наших трудов.

Конфигурация:

• CPU: Intel Xeon E5-1650 v3 @ 3.50GHz 6 cores (12 vCPU)
• RAM: 64 Gb (используется около 1-2 Gb)
• Кол-во воркеров: 12

Результаты:

Больше бенчмарков (правда без сравнения с Node версией) на

.

Как видно переделывали ресайз мы не напрасно, увеличение скорости составило от 30 до 400% (в некоторых случаях). Если требуется ресайзить еще быстрее, то можно покрутить ручки «speed» и «quality» в libimagequant. Они позволят дополнительно сократить размер или увеличить скорость кодирования ценой потери качества изображения.

Код проекта на GitHub.
Биндинг Go к libimagequant так же на GitHub.

Image Класс (System.Web.UI.WebControls) | Microsoft Docs

В следующем примере показано, как создать Image элемент управления на веб-странице.

ImageЭлемент управления позволяет работать с изображениями из серверного кода. Используйте Image элемент управления для вывода любого допустимого изображения, поддерживаемого запрашивающим браузером на веб-странице. Путь к отображаемому изображению задается заданием ImageUrl Свойства. Можно указать текст, который будет отображаться вместо Image, если изображение недоступно, задав AlternateText свойство. Выравнивание изображения по отношению к другим элементам на веб-странице задается параметром ImageAlign Property.

Оптимизация картинок в Web — Highload.today

Картинки могут занимать до 90% от общего объема данных на странице. Их правильная оптимизация может значительно повлиять на скорость работы сайта.

Как оптимизировать картинки?

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

Форматы

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

[ad]

Инструменты

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

imagemagick

Современные камеры обычно записывают в JPEG фотки кучу метаданных (геолокацию, превью и т.п.). Если их вырезать, можно иногда сэкономить несколько десятков килобайт. Convert от imagemagick содержит полезный параметр “-strip” для вырезания всех ненужных метаданных из JPEG изображения:

convert test.jpg -resize 100x100 **-strip** test_100.jpg

Jpegtran

Jpegtran позволяет вырезать метаданные и провести lossless оптимизацию JPEG:

jpegtran -copy none -optimize -outfile min.image.jpg image.jpg

## сохранит оптимизированную копию в min.image.jpg

Jpegoptim

Еще одна полезная утилита jpegoptim для оптимизации JPEG:

jpegoptim file.jpg

## Оптимизирует файл и сохранит его в самого себя

Optipng

Инструмент для оптимизации PNG картинок optipng работает так:

optipng test.png

## Оптимизирует файл и сохранит его в самого себя

Pngcrush

Pngcrush работает так:

pngcrush -reduce -brute in.png out.png

## Оптимизирует in.png и запишет результат в out.png

Самое важное

Обязательно используйте инструменты сжатия картинок без потери качества. Это требует минутных затрат, но может уменьшить размеры изображений в несколько раз. Из инструментов лучше всего использовать Pngcrush и Jpegtran.

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

Подготовка изображений для WEB в PhotoShop

На первый взгляд в публикации фотографий нет ничего сложного – достаточно отсканировать ее и вставить на WEB-страничку. Но это лишь кажущаяся простота. Для того чтобы фотография или картинка из журнала выглядела привлекательно на вашей страничке и одновременно с этим не заставляла пользователя слишком долго ждать своего появления при невысокой скорости соединения, необходимо предпринять некоторые усилия.
Начнем с обычных фотографий.
Во-первых, если фотографии еще не напечатаны, и Вы только что подошли к окошку Kodak Express, обязательно заказывайте печать на ГЛЯНЦЕВОЙ бумаге, иначе при сканировании матового отпечатка получите нерезкое и «грязное» изображение. Все дело в том, что поверхность матового отпечатка похожа на сильно уменьшенную поверхность бушующего моря, а яркость лампы сканера значительно превышает яркость дневного света даже в том случае, если рассматривать отпечаток, стоя на экваторе в период летнего солнцестояния :). Поэтому при освещении снимка лампой сканера неровная поверхность фотографии начинает сильно «бликовать», что при сканировании вылезает как «белый шум». В результате отсканированное изображение будет казаться нерезким и пыльным что, к сожалению, не скорректировать никакими фильтрами.

Наконец Вы положили фотографию на стекло сканера и пытаетесь задать настройки сканирования.
Все WEB-изображения имеют разрешение 72 dpi. Но это совсем не означает, что в параметрах сканирования нужно ставить это число. Правильнее отталкиваться от размеров окончательной картинки в пикселях. Проще всего объяснить на примере. Допустим, у нас есть фотография 10×15 см. Нам надо вставит эту фотографию в ячейку таблицы, имеющую ширину 400 пикселей. Для начала, пересчитаем размер фотографии в дюймы, поделив ширину и высоту на 2.54. Получим 3.94×5.91 дюйма. Сейчас нас очень заинтересовала ширина. В окончательном варианте она должна будет составить 400 пикселей. Вот теперь можно высчитать разрешение сканирования, поделив так необходимые нам 400 пикселей на нашу ширину – 3.94 дюйма. Получаем 102 dpi. На самом деле, конечно, никто так не считает – этот расчет приведен лишь для наглядности и предотвращения некоторых заблуждений начинающих web-дизайнеров. На практике сканирование производится с заведомым запасом – в данном случае «на глаз» ставится 150 dpi, а потом в PhotoShop производится масштабирование до 400 пикселей. Теоретически, качество пересчитанного изображения должно быть хуже отсканированного «в размер», практически же это отличие незаметно.
Если фотография слишком темная, или наоборот – слишком светлая, настоятельно не рекомендую прибегать к регулировкам яркости и контрастности. Так как контроль этих регулировок производится чисто визуально, то очень легко «завалить» фотографию, т.е. «срезать» самые светлые и самые темные тона. Эти регулировки лучше использовать при создании эффектов для коллажей. Для «осветления» или «затемнения» изображения больше подходит инструмент «Levels» (рис.1).

Рис.1

Движки (1) и (3) подгоняются, соответственно, к началу и концу гистограммы, движком (2) регулируется насыщенность изображения. Здесь же можно скорректировать т.н. «черную точку», «серую точку» «белую точку», выбрав соответствующую пипетку (4) и пометив прямо на изображении места, где по-вашему мнению должны быть соответствующие тона. Причем, средней пипеткой можно выбрать любое по насыщенности место, в котором R,G и B составляющие цвета должны быть равны. PhotoShop при этом автоматически произведет цветокоррекцию всего изображения. Следующим этапом желательно сделать эффект «Filter — Sharpen — Unsharp Mask». Для визуального контроля изображения в процессе регулировок фильтра установите масштаб просмотра «Actual pixels», т.к. в увеличенном масштабе эффект может не понравиться :). «Unsharp Mask» не рекомендую применять, если фотография сильно запылена. Результат будет ужасен. C пылью можно попытаться расправиться с помощью эффекта «Noise – Ddust & Scratches». Главное в этом деле – не перестараться.

Здесь можно дать дополнения, которые касаются подготовки изображений из журналов. Журналы печатаются т.н. офсетным способом, поэтому изображение в журнале состоит из большого числа маленьких точек 4-х основных цветов модели CMYK: Cyan, Magenta, Yellow, blacK (цвет black обозначен по последней букве, чтобы не путать его с Blue из модели RGB). Это вносит в обработку ряд дополнительных трудностей. Первым делом нужно избавиться от растра. Хорошо зарекомендовал себя следующий способ:

Изображение сканируется с разрешением 600 dpi без применения фильтров сканера. Во многих сканерах присутствует опция «Descreen», но в большинстве случаев она работает просто отвратительно, особенно в сканерах класса SOHO. Поэтому ее не используем.
Полученное изображение увеличиваем лупой до такой степени, чтобы были видны офсетные точки, но в то же время просматривался достаточный фрагмент изображения.
Вызываем эффект «Blur – Gaussian Blur» и движком устанавливаем такую величину, при которой офсетные точки сольются и станут неразличимы.
Делаем «Image — Size» изображения до нужной нам величины.
Дальше – действия такие же, как и с фото, начиная с эффекта «Filter — Sharpen — Unsharp Mask». Стоит отметить, что иногда, особенно при сканировании некачественных публикаций, после попытки размытия офсетных точек эффектом «Blur – Gaussian Blur» на изображении остаются частые параллельные линии или «сетка», которые очень портят вид. В этом случае можно посоветовать положить картинку в сканер под углом, примерно 45? и сразу после сканирования повернуть изображение в PhotoShop в нормальное положение. Дальше – все как описано выше с пункта 2.
Вот теперь все готово для создания окончательного файла. Не стоит торопиться нажимать Ctrl+S, можно поступить более мудро — Ctrl+Alt+Shift+S (жутковато выглядит, не правда ли?). Если указательный палец правой руки при нажатии первых двух кнопок интуитивно тянется к Del, то Вам больше подойдет прогулка по меню File – Save for Web. Здесь все очень наглядно и в пояснениях почти не нуждается. Переходим на закладку 2-Up или 4-Up (кому как удобнее) и, визуально контролируя конечный результат, выбираем формат и параметры при которых наивысшее качество картинки соответствует наименьшему размеру файла. Единственно что я бы не рекомендовал делать в этом окне, так это изменять размеры изображения. Загонять картинку «в размер» лучше на первоначальном этапе, потому что пересчет пикселей может свести на нет все ваши героические усилия. Будет лучше, если фильтр «Filter — Sharpen — Unsharp Mask» будет последней садистской процедурой перед сохранением файла на диск. 🙂

Подготовка фотографий для web. — Sergey Brezhnev — LiveJournal

Сегодня поговорим о том, как я подготавливаю картинки для публикации в интернете.

Когда ко мне поступают заказы на обработку, то я отдаю фото в полном размере и не парюсь над веб размером — заказчик всё сделает сам, если ему нужно. А если это заказ на съёмку (а мы с Алиной бывает берём совместные заказы), тогда готовый материал заказчику уходит полноразмерным и в размере для веба. И бывали случаи, когда заказчик спрашивает, а почему полноразмеры более мутные? Вопрос тут немного некорректный. Правильнее было бы сказать, что это размер для веба более резкий. Так и должно быть, размер для веба должен смотреться выигрышнее, т.к. большинство клиентов будут смотреть ваши работы именно в интернете и именно в небольшом размере. Не нужно забывать, что просматривая полноразмерное фото, ваш просмотрщик масштабирует его под размер экрана и делает он это по каким-то своим алгоритмам. И в 99% случаев полноразмерное фото, масштабированное до размеров экрана, будет выглядеть более мутно, нежели его увеличить до масштаба 1:1. Отсюда идёт псевдо-размытость, которой на самом деле нет. Это как с лесенками в фотошопе при разном масштабе… но сейчас не об этом.

Для себя я определил оптимальным размер картинок для веба следующий: 1200px по горизонтали и 900px по вертикали.

Посмотрим, как выглядит полноразмер (масштабированный) и размер для веба (1:1) рядом.

(Фото кликабельно. Лучше посмотреть его в полном размере в новой вкладке. Так будет лучше видна разница)

Разница хорошо видна на листьях дерева, на волосах, платье, букете.

У этого фото я просто изменил размер и не шарпил совсем. Размер изменил Ctrl+Atl+I, выставил 900 px по вертикали и готово.

Пробуя несколько вариантов уменьшения (в 1 раз или в несколько раз поэтапно и т.д.), я пришёл к тому, что лучшее враг хорошего. И в 80% случаев, если картинка изначально хорошая, резкая, то никакого шарпа после однократного уменьшения не требуется совсем. Картинка и так за счёт уменьшения становится визуально более резкой, чем полноразмер. Этого хватает с головой.

Но в оставшихся 20% я всё же добавляю резкость уже на уменьшенную копию. Тут у меня 2 варианта. Первый — шарплю всю картинку и потом ластиком примерно на 50% стираю перешарпленные места (обычно это границы переходов яркостей, т.е. контуры объектов). И второй вариант, если картинка в целом нормальная, но мне нужно что-то отдельно подчеркнуть, то шарплю только требуемый участок.

Рассмотрим ещё одно фото. Изначально оно достаточно резкое (6630px по длинной стороне), при 100% видна везде фактура. Но при уменьшении до 1200px по горизонтали детали читаются не так сочно. Поэтому надо пошарпить.

(Gif-ка кликабельна)

Я не заморачиваюсь с настройками резкости для веб-размера, а делаю дубликат слоя (после изменения размера) и применяю к нему самую простую резкость Filter/Sharpen/Sharpen (Фильтр/Резкость/Резкость). А дальше смотрю на результат. Если кажется, что резкости много, то уменьшаю прозрачность слоя. Если кажется, что только в определённых местах слишком резко (в основном контуры), то протираю ластиком именно в тех местах. Если всё сразу хорошо, то сохраняю. В данной гифке у меня копия слоя на 100% и в паре мест протёр ластиком, где показалось, что контуры слишком резкие.

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

Стоит заметить, что я говорю именно о добавлении резкости для картинок в веб-размере, а не полноразмерных. Для полноразмерных я использую несколько способов добавления резкости. Это Sharpen (Резкость), Unsharp mask (Контурная резкость), Smart sharpen (Умная резкость) и изредка High pass (Цветовой контраст). Для разных случаев разный, но в большинстве случаев просто по настроению. Не считаю, что стоит уж очень сильно заморачиваться по этому поводу.

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

Всем мир!

Группа вк: vk.com/sergretouch
Биханс: www.behance.net/sergretouch
Инстаграм: http://instagram.com/sergey_brezhnev
Ютуб: http://www.youtube.com/user/sergbrezhnev
Facebook: https://www.facebook.com/sergey.brezhnev.7

11 советов по созданию волшебных картинок

Если вы хотите сделать красивую фотографию паутины, вы попали в нужное место.

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

Звук хороший? Давайте нырнем!

1. Стрелять в неподвижный день

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

Это вызывает три основных проблемы:

1. Если вы используете длинную выдержку (что часто необходимо при съемке с близкого расстояния, особенно ранним утром и поздним днем), движущаяся паутина создаст размытость при движении.
2. Если вы фокусируетесь при большом увеличении (например,g., вы используете макрообъектив), тогда вам будет сложно заблокировать фокус.
3. Любое движение стряхнет влагу и может даже порвать ткань.

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

2. Сфокусируйтесь вручную (используйте объектив с максимальным увеличением)

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

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

Вот тут и приходит на помощь ручная фокусировка; он позволяет получать резкие фотографии, регулируя кольцо фокусировки на оправе объектива. Обратите внимание, что для ручной фокусировки обычно нужно щелкнуть переключателем на боковой стороне объектива или камеры (это часто обозначается как AF / M ).

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

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

3. Будьте экологически чистым фотографом

Помните: там, где есть паутина, есть маленькое (или не такое уж маленькое!) Существо, которое ее сотворило.

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

4. Найдите простой фон, который выделяет Интернет

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

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

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

По крайней мере, убедитесь, что фон не отвлекает.Сведите к минимуму количество цветов и стремитесь к большому разделению объекта и фона.

5. Тщательно выбирайте диафрагму (и глубину резкости)

Фотография паутины — это акцентирование внимания на вашем основном объекте — паутине — при этом фон остается ненавязчивым и (в идеале) дополнительным.

А один из самых простых способов выделить ваш основной объект и уменьшить фон? Увеличьте диафрагму, чтобы создать красивое размытие фона.

(Обратите внимание на то, что фотографии паутины в этой статье имеют гладкий, размытый фон? Это сделано специально!)

При большом увеличении и при хорошем разделении объекта и фона (т.е.е., фон находится на расстоянии более нескольких дюймов от объекта), вы можете добиться размытого фона в диапазоне от f / 1,4 до f / 5,6 или около того. Но если вы уменьшите масштаб, чтобы получить более естественное изображение, вам нужно будет сделать диафрагму как можно меньше (f / 2,8 — отличная отправная точка).

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

6. Стрелять в лоб

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

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

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

7. Не забудьте штатив (или снимайте с короткой выдержкой)

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

Итак, у вас есть два варианта:

1. Вы можете взять с собой в поле штатив, который обеспечит устойчивость вашей камеры даже при низкой выдержке. У этого есть несколько недостатков: во-первых, прочные штативы могут быть дорогими, к тому же они могут быть громоздкими, а при длинной выдержке вам понадобится действительно неподвижный объект.
2. Можно снимать с рук и использовать короткую выдержку. Здесь вам нужно поддерживать скорость выше 1/125 с или около того (и, возможно, выше 1/160 или 1/200 с, в зависимости от уровня увеличения и устойчивости ваших рук).

Какой метод лучше? Это действительно зависит от ваших предпочтений и стиля съемки. Некоторым фотографам нравится медленная, преднамеренная съемка со штатива, в то время как другим нравится гибкость удержания в руках. Однако, если вы планируете снимать при слабом освещении, вам, вероятно, придется использовать штатив, если только ваша камера не способна снимать с низким уровнем шума при высоких значениях ISO.

8. Ищите паутину с росой

Многие классические фотографии паутины включают капли росы или дождя, например:

Как видите, роса выглядит красиво, к тому же она создает интересные эффекты боке в областях, не находящихся в фокусе.

Я упоминал выше, что лучшее время дня для влажной паутины — утро, хотя вы также можете выйти на улицу после ливня (если, конечно, не ветрено!).

9. Заливка рамы

Вот простой совет по композиции:

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

И если у вас есть макрообъектив, обязательно используйте его; это позволит вам заполнить рамку намного проще!

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

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

10. Сфотографируйте паутину с обеих сторон

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

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

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

11. Экспериментируйте со вспышкой

Вот ваш последний совет по фотографии паутины:

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

Лично я считаю, что лучше всего получается съемка при естественном освещении. Но иногда добавление искусственного света с помощью вспышки может красиво осветить сеть и создать хорошие блики.Это может быть особенно эффективно при слабом освещении; вспышка сохранит резкость изображения (высокое значение ISO не требуется!).

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

Итог: получайте удовольствие от вспышки и не бойтесь экспериментировать!

Фотография паутины: заключительные слова

Надеюсь, теперь вы готовы сделать несколько красивых фотографий в паутине.Так что запомните эти советы, возьмите камеру (и объектив с близкой фокусировкой) и выходите на улицу!

Теперь к вам:

Какой из этих советов по фотографии паутины вам больше всего нравится? Планируете ли вы в ближайшее время выйти и пристрелить пауков? Поделитесь своими мыслями в комментариях ниже!

Как эффективно использовать изображения на веб-сайтах

Многие веб-профессионалы проповедуют важность включения изображений в дизайн и содержание веб-сайта.

Визуальная привлекательность важна.

Однако вы не можете просто использовать любое изображение и ожидать, что оно сотворит чудеса.

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

Целенаправленное использование изображений

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

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

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

Посмотрите, как фотография справа на веб-странице ниже была полностью проигнорирована:

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

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

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

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

Итак, как мы можем определить, полезно изображение или нет?

Задайте себе следующие вопросы, чтобы определить, является ли фотография, которую вы собираетесь использовать на своем веб-сайте, подходящей и целевой:

• Есть ли у какие-либо преимущества от использования этого конкретного изображения? Например, хорошо ли он демонстрирует мой продукт или услугу?
• Помогает ли пользователю понять суть, которую я пытаюсь донести?
• Создает ли этот образ эмоциональную привлекательность? Например, помогает ли покупателю представить себя с помощью продукта, изображенного на фотографии?
• Как это изображение относится к моему бренду? Говорит ли это моей целевой аудитории?
• Какое сообщение отправляет это изображение? Сообщение вообще отправляется?
• Как мои посетители отреагируют на это изображение ? Изменит ли это их мнение? Например, поможет ли это облегчить процесс покупки?

Используйте фотографии реальных людей

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

Взгляните на результаты исследования A / B-тестирования, проведенного компанией 37signals, занимающейся веб-приложениями.

Они увидели на 102,5% рост регистраций только потому, что они добавили изображение улыбающегося счастливого человека на целевую страницу одного из своих веб-приложений!

Укажите на очевидное

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

Джеймс Бриз, специалист по юзабилити, провел исследование по отслеживанию взглядов, которое показало, что объект фотографии может определять фиксацию взгляда пользователя на веб-странице.

В частности, Бриз обнаружил, что люди сосредотачиваются на глазах объекта на фотографии. Когда объект фотографии обращен вперед, к зрителю, зритель редко связывает модель с содержанием веб-страницы:

Однако, когда объект смотрит прямо на продукт или текст, глаза зрителей следуют в направлении:

Использование направления взгляда — не единственная тактика.

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

Например, посмотрите, как Karma Wi-Fi использует тему фотографии, чтобы указать пользователям на текст и рекламируемый продукт.

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

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

Иногда картинка действительно стоит тысячи слов.

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

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

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

Оптимизируйте размер файлов изображений

Средний размер веб-страницы составляет 1,28 МБ. 61,5% из них приходится на изображения.

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

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

Прощальное слово

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

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

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

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

Совет: Чтобы добавить изображения в Excel в Интернете, вам может потребоваться сначала переключиться в режим редактирования , щелкнув Редактировать книгу > Редактировать в браузере .

Вставить изображение с вашего компьютера

Чтобы вставить изображение, сохраненное в доступном для вас месте, выполните следующие действия:

1. Щелкните место на листе, куда вы хотите вставить рисунок.

2. На ленте «Вставка» щелкните «Рисунки».

3. Выбрать это устройство…

4. Найдите изображение, которое хотите вставить, выберите его и нажмите «Открыть».

Изображение будет вставлено в ваш рабочий лист.

Вставить изображение из стоковых изображений

Чтобы вставить картинку из коллекции стоковых изображений, выполните следующие действия:

1. Щелкните место на листе, куда вы хотите вставить рисунок.

2. На ленте «Вставка» щелкните «Рисунки».

3. Выбрать фондовые изображения…

4. Найдите изображение, которое хотите вставить, выберите его и нажмите «Открыть».

Изображение будет вставлено в ваш рабочий лист.

Вставить изображение из изображений Bing

Чтобы вставить изображение из результатов поиска Bing Pictures, выполните следующие действия:

1. Щелкните место на листе, куда вы хотите вставить рисунок.

2. На ленте «Вставка» щелкните «Рисунки».

3. Выберите изображения Bing…

4. Найдите изображение, которое хотите вставить, выберите его и нажмите «Открыть».

Изображение будет вставлено в ваш рабочий лист.

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

• Веб-сайт, на котором размещен образ, не использует HTTPS. Это можно рассматривать как потенциальную уязвимость системы безопасности.

• URL-адрес изображения на веб-сайте не является допустимым адресом.

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

1. Щелкните место на листе, куда вы хотите вставить рисунок.

2. На ленте «Вставка» щелкните «Рисунки».

3. Выберите изображения Bing…

4. Найдите изображение, которое хотите вставить.

5. На конкретном изображении, которое вы хотите вставить, щелкните многоточие (…), а затем ссылку на изображение.Это откроет изображение в новой вкладке браузера.

6. Сохраните изображение на свой компьютер.

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

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

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

Google Images Оптимальные методы поисковой оптимизации | Центр поиска | Разработчики Google

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

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

Отказ от встроенных ссылок Картинок Google

При желании вы можете запретить отображение полноразмерного изображения на странице результатов поиска Картинок Google, отказавшись от встроенных ссылок в результатах поиска Картинок Google.

Чтобы отказаться от встроенных ссылок:

1. При запросе изображения проверьте заголовок реферера HTTP в запросе.
2. Если запрос поступает из домена Google, ответьте HTTP 200 или 204 без содержания.

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

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

Создавайте удобные для пользователей условия

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

• Обеспечьте хороший контекст: Убедитесь, что ваш визуальный контент соответствует теме страницы.Мы рекомендуем отображать изображения только там, где они добавляют исходную ценность странице. Мы особенно не приветствуем страницы, на которых ни изображения, ни текст не являются исходным содержанием.
• Оптимизировать размещение: По возможности размещайте изображения рядом с соответствующим текстом. Когда это имеет смысл, подумайте о размещении самого важного изображения в верхней части страницы.
• Не вставляйте важный текст в изображения: Избегайте встраивания текста в изображения, особенно важных текстовых элементов, таких как заголовки страниц и пункты меню, потому что не все пользователи могут получить к ним доступ (а инструменты перевода страниц не будут работать с изображениями).Чтобы обеспечить максимальную доступность вашего контента, сохраняйте текст в HTML, предоставляйте замещающий текст для изображений.
• Создавайте информативные и качественные сайты: Хороший контент на вашей веб-странице так же важен, как и визуальный контент для Картинок Google — он обеспечивает контекст и делает результат более действенным. Содержимое страницы может использоваться для создания фрагмента текста для изображения, и Google учитывает качество содержимого страницы при ранжировании изображений.
• Создавайте сайты, удобные для устройств: Пользователи ищут в Google Картинки чаще с мобильных устройств, чем с компьютеров.По этой причине важно, чтобы вы создавали свой сайт для всех типов и размеров устройств. Используйте тест Mobile-Friendly Test, чтобы проверить, насколько хорошо ваши страницы работают на мобильных устройствах, и получить отзывы о том, что необходимо исправить.
• Создайте хорошую структуру URL для ваших изображений: Google использует путь URL, а также имя файла, чтобы помочь ему понять ваши изображения. Рассмотрите возможность организации содержимого изображения так, чтобы URL-адреса были построены логически.

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

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

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

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

Добавить структурированные данные

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

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

Оптимизировать скорость

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

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

Проанализируйте скорость своего сайта с помощью PageSpeed ​​Insights и посетите нашу страницу «Основы Интернета», чтобы узнать о передовых методах и методах повышения производительности веб-сайта.

Добавить фото хорошего качества

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

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

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

Точно так же имя файла может дать Google подсказку о предмете изображения. Для например, my-new-black-kitten.jpg лучше, чем IMG00023.JPG . Если вы локализуете свои изображения, убедитесь, что вы переводите имена файлов тоже.

Используйте описательный замещающий текст

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

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

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

• Плохо (отсутствует альтернативный текст):
• Плохо (набивка ключевых слов):
• Лучше:
• Best:

Мы рекомендуем тестировать контент, проверяя доступность и используя эмулятор медленного сетевого подключения.

Помогите нам открыть для себя все ваши изображения

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

Google анализирует HTML-код ваших страниц для индексации изображений, но не индексирует изображения CSS.

• Хорошо:
• Плохо:
  Щенок золотистого ретривера

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

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

Карты сайта для изображений могут содержать URL-адреса из других доменов, в отличие от обычных карт сайта, в которых применяются междоменные ограничения. Это позволяет использовать CDN (сети доставки контента) для размещения изображений. Мы рекомендуем вам проверить доменное имя CDN в Search Console, чтобы мы могли сообщить вам обо всех обнаруженных нами ошибках сканирования.

Поддерживаемые форматы изображений

Google Images поддерживает изображения в следующих форматах: BMP, GIF, JPEG, PNG, WebP и SVG.

Вы также можете встроить изображения как URI данных. URI данных позволяют включить файл, такой как изображение, в строку, задав src элемента img как строку в кодировке Base64, используя следующий формат:

 data ]">
 

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

Адаптивные изображения

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

<картинка>