Ланч-тайм 110: краткий
перевод свежих статей
о digital

JPEG, PNG, GIF — боже мой! Идеальный формат ищут годами, потому что мало кто понимает, как они работают.

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

JPEG

Формат проверен временем. Как же он работает и для чего хорош?

JPEG сжимает изображения квадратами 8*8 пикселей, а затем делает что-то сумасшедшее и математическое. Преобразует пиксели в каждом блоке из RGB в YCbCr. С технической точки зрения, JPEG преобразует информацию из пространственной области в частотную.

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

Не подходит: для объектов с чёткими границами на изображении.

GIF

Формат GIF сжимает изображения с помощью алгоритма LZW. Он проще, чем магическая математика в JPEG. Алгоритм LZW сканирует изображение и генерирует короткие коды для повторяющихся частей, а потом сокращает их.

Ещё у GIF есть пара фич: прозрачность и поддержка анимации, но… Этот формат поддерживает только 256 цветов.

Подходит: для сжатия изображений с повторяющимися данными. Изображения с резкими переходами сохраняются без потерь.

Не подходит: для изображений с большим количеством цветов. Сжатие приводит к пастеризации.

Сильные стороны GIF и JPEG дополняют друг друга — они были убойной командой в эру молодого интернета. Но проблемы с патентом на LZW побудили к созданию новых форматов.

PNG

PNG как GIF, но лучше:

• Нет ограничения на 256 цветов.
• Есть поддержка альфа-канала (для создания частичной прозрачности).
• Подходит практически во всех ситуациях.

Как работает PNG?

1. Алгоритм сжатия PNG уменьшает объем данных. Он предполагает, что каждый следующий пиксель похож на предыдущий. Если это подтверждается — сохраняет разницу между предположением и фактическим значением. Маленькие числа занимают меньше места.
   
   
2. Вырезает повторения с помощью алгоритма LZ77. Да-да, для GIF — LZW, а для PNG — LZ77. Не путаем! Так избегают проблем с патентом.
   
   
3. Использует алгоритм кодирования Хаффмана. Генерирует короткие коды для распространенных значений.
   
   

PNG лучше, чем GIF (почти всегда). Хуже, чем JPEG — для фотографий.

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

НОВОЕ ПОКОЛЕНИЕ

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

WEBP

WebP — ответвление видеоформата Google WebM.

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

WEBP лучше, чем PNG или JPEG. Но этот формат поддерживается только в Chrome.

JPEG-XR

Формат следующего поколения, выбор Microsoft — JPEG-XR. Новые методы на основе механики сжатия JPEG. Но предлагает:

• Сжатие без потерь.
  
• Более эффективное сжатие с потерями.
  
• Альфа-канал.
  

Формат поддерживается только в Internet Explorer и Edge.

Думаете, фильтр на сайте не важен? Ошибаетесь. Неудобный фильтр портит общее впечатление.

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

H&M

Категория "Выбрать коллекцию" фильтрует по темам. Это бессмысленно.

Цель фильтра — сузить выбор продуктов, чтобы указать потребителю направление. И здесь про неё забыли. Не проще ли отфильтровать по "джинсам", чем по "дениму для отдыха"?

Несмотря на это, есть и достоинство — фильтр закреплён на каждой странице. Чтобы улучшить результаты поиска — выбирайте цвет, размер и стиль во время просмотра товаров. Не понравилось — кликайте «Очистить все».

River Island

Непростая фильтрация на сайте River Island. За раз можно отфильтровать только по одному параметру, потом страница перезагружается.

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

Zara

На сайте Zara фильтр вверху страницы — на самом видном месте.

Выбирайте определенные параметры, по которым будете искать. Мы сказали определенные? Кто-нибудь в курсе, как выглядит рубашка цвета "экрю"? Спасибо, Zara, теперь мы знаем.

Недостаток фильтра в том, что кнопка незаметна. Это серьезная проблема UX. Еще один минус — нет сортировки результатов.

Ted Baker

Сайт Ted Baker — радует глаз, чего не скажешь о фильтре.

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

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

Hunter

Фильтр на сайте Hunter, как и на Ted Baker, в виде выпадающего списка с отдельными вкладками для каждого варианта фильтрации. Однако тут он проще в использовании.

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

Marks and Spencer

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

Хоть категория не очень заметна — это стоящее дополнение.

Suit Supply

Suit Supply — прекрасный пример креативного подхода к созданию фильтра.

В фильтрации по характеристикам продукта используются визуальные эффекты вместо слов (мы-то с вами знаем, как важна визуализация).

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

ASOS

У ASOS исчерпывающая система фильтрации. И при огромном количестве параметров он отлично работает.

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

Чему мы можем научиться?

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

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

Вот девять способов, как повысить креативность.

1. Учитесь и сотрудничайте

Любопытство — прямой путь к креативности. Читайте, говорите с экспертами, и новые идеи появятся сами собой.

Сотрудничайте и учитесь у других. Это даст вам креативного пинка.

2. Занимайтесь любимым делом

Нет идей? Не знаете, что делать? Найдите гармонию в себе.

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

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

3. Ищите вдохновение в других сферах

Не копируйте идеи конкурентов. Поищите вдохновение в других отраслях и нишах.

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

4. Отвлекитесь или ничего не делайте

Алан Коэн писал, что достоинство есть и в работе, и в отдыхе.

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

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

Если креативность вас покинула — расслабьтесь и позвольте мозгу делать свою магию.

5. Прогулка

В среднем человек сидит от 7 до 15 часов ежедневно. Звучит кошмарно, да? Это ужасно для здоровья, настроения, и не менее страшно для творчества.

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

Многие бизнес-лидеры, например, Марк Цукерберг и Хикмет Эрсек, так проводят встречи.

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

6. Задайте правильное настроение

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

7. Используйте метод "шесть шляп мышления"

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

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

Смотрите на проблему с нескольких точек зрения, чтобы найти решение.

8. Обратитесь за советом или обратной связью

Иногда вы слишком близко к проблеме и не видите решение.

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

Даже если вы не воспользуетесь советом, это поможет расшевелить мышление и задаст направление.

9. Выберите ужасную идею

Какая самая бредовая идея, которую вы можете придумать? Составьте топ-10 таких.

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

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

А как вы прокачиваете креативность? Велком в комментарии, нужно больше способов :)