Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Прекрасный мир графики
Search
Polina Gurtovaya
October 12, 2019
Technology
1
600
Прекрасный мир графики
Доклад о разных графических форматах и о том как их правильно готовить.
Polina Gurtovaya
October 12, 2019
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
860
Давайте все заблокируем
hellsquirrel
0
270
Wasmысле?
hellsquirrel
0
170
Магия декларативныx схем.
hellsquirrel
0
310
ML for HolyJS
hellsquirrel
0
96
Идеальный способ заблюрить белочку
hellsquirrel
0
120
ML/DL на фронте
hellsquirrel
0
160
InsertableStreams
hellsquirrel
0
68
WebRTC-404
hellsquirrel
0
480
Other Decks in Technology
See All in Technology
RSNA2024振り返り
nanachi
0
500
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
All you need to know about InnoDB Primary Keys
lefred
0
120
Larkご案内資料
customercloud
PRO
0
600
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
A better future with KSS
kneath
238
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Docker and Python
trallard
44
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
BBQ
matthewcrist
86
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
4 Signs Your Business is Dying
shpigford
182
22k
Transcript
Прекрасный мир графики 1
2
3
4
Итак, прекрасный мир графики 5
Графика Иллюстрирует Развлекает Добавляет немного добра на страничку 6
Это может быть Картинка Видяшка Взрывающийся вертолёт 7
Для десктопа ~50% контента это изображения 8
Это самая яркая часть нашей страницы 9
Мы с дизайнерами решаем одну задачу 10
Для кого? 11
Человек Использует глаза и мозг Злопамятное существо Любит когда 60fps
Не любит ждать 12
Зачем ? 13
14
15
Изображения 16
17 Использовать экспортированное из макета Использовать что дадут Попросить исходник
Провести эксперимент
Инструменты для экспериментов svgo (svgoomg- web-версия) optipng, cwebp, cjpeg aka
mozjpeg, ImageMagic, libvips imagemin, sharp squoosh ffmpeg imageoptim 18
SVG PNG JPEG WEBP 19 Pастр Вектор
pазмер контейнера devicePixelRatio 20 Каким должен быть размер растрового изображения?
Чтобы везде работало 21 <picture> <source srcset="cupcake.webp 1x,
[email protected]
2x"
type="image/webp" /> <source srcset="cupcake.webp 1x,
[email protected]
2x" type="image/jpeg" /> <img src="cupcake.jpg" alt="a yummy cupcake" /> </picture>
Когда SVG заходят хорошо 22 Часть изображения можно представить как
набор геометрических примитивов Есть интерактивность Нужно цеплять маркеры к фону Нужно много размеров
23 Со временем в голове сформируется нужная связь и потребность
в экспериментах снизится
Эксперимент 24
Берем тестовую картинку unicorn.svg - 12kB После svgo - 5.1kB
(57.5%) gzip - 2.7kB (77%) webP@2x - 4.7kB (60.8%) webP - 2.2kB (81.7%) 25
Тестовый единорог внутри <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 199”> <g
stroke-width="2.01"> <path d=“…534z” /> <path d=“…9z” fill="#f19c9b"/> <path d=“…” /> … </svg> 26
<path /> <path d="M215.147 235.789c0-13.921 2.609-31.501 9.735- 40.624 7.126-9.123 16.97-14.765
27.844-14.765 10.874 0 19.62 7.386 26.746 16.509 7.126 9.123 10.788 21.702 1 0.788 35.623 0 13.921-3.459 22.429-10.585 31.552-7.125 9.122-12.332 13.435-23.205 13.435-10.874 0-23.002-2.0 74-30.127-11.196-7.126-9.123-11.196-16.613-11.196-30.5 34z"/> https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths 27
<path /> 28 M - начало пути L - линия
(V, H) C - кривая (S, Q, T) A - дуга Z - замыкаем путь
SVG можно морфить flubber отлично морфит 29
JavaScript - анимации JS - анимации выполняются в том же
“потоке” что и основной JS requestAnimationFrame — обязательно нужно использовать, но он никогда не сработает если основной поток занят У нас всего 16.666667 ms :) 30
31
Пример с печенькой <svg xmlns=“…” width="200" height="120" viewBox="0 0 200
120"> <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="M69.5433628,33.5480878 C65.8626549…”/> </svg> 32
width and height 33 Original w/o width & height width=30vh
viewBox overflow: visible 34 viewBox: 0 0 100 120 width:
90px
preserveAspectRatio none 35 meet slice
Округление важно 36 d="M146.215 46.605c5.233…" d="M146.2 46.6c5.2…”
Насколько округлять? 37 Надо учитывать: container size, devicePixelRatio, inner transformations.
Начитать можно с : 1 знак - контейнер совпадает с размером svg, 2 знака — контейнер в 10 раз больше …etc
Печенька с друзьями 38
Печенька с друзьями <svg xmlns="http://www.w3.org/2000/svg" width="913" height="552"> <g transform="translate(523 128)">
<ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> <g transform="translate(665 236)"> <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> ... </svg> 39
Печенька с друзьями <svg xmlns="http://www.w3.org/2000/svg" width="913" height="552"> <defs> <g id="cookie">
<ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> </defs> <use href="#cookie" transform="translate(521 128)"/> <use href="#cookie" transform="translate(500 236)"/> ... </svg> 40
Сюрпризы внутри SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 319"> <script>console.log('')</script>
<ellipse cx="282.5" cy="159.5" fill="#FDC970" rx="282.5" ry="159.5"/> <path fill="#794545" d="M196.46 ..." /> </svg> 41
Сюрпризы внутри SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 319"> <image
height="2388" width="1669" x=".635" xlink:href="data:image/ png;base64,iVBORw0KGgoA..." /> </svg> 42
Как инлайнить SVG import React from "react"; import Logo from
"./logo.svg"; const App = () => <Logo />; export default App; 43 сreate-react-app использует https:/ /github.com/smooth-code/svgr
Мы инлайним SVG чтобы с ними было yдобно работать 44
Шевелящийся контент 45
Видео 46
ffmpeg - наш классный и универсальный инструмент 47
Контейнеры webm mp4 48
Видео кодеки VP8 VP9 AV1 H.264 H.265 49 <video autoplay
muted> <source src="unicorn.webm" type="video/webm" /> <source src="unicorn.mp4" type="video/mp4" /> </video>
Используйте эффективный кодек 50 evl.ms/blog/better-web-video-with-av1-codec
Избегайте страшных звуков :) 51 <video autoplay muted> <source src="unicorn.webm"
type="video/webm" /> <source src="unicorn.mp4" type="video/mp4" /> </video>
Анимированные картинки APNG WebP GIF 52
SVG — анимации 53
54
Есть куча прикольных анимирующихся CSS свойств 55
Анимируй - трансформируй (transform) 56 .animated { transform: ... ;
} Все что делает transform: (translate, rotate, scale, skew) можно описать при помощи матрицы
57 .transformed { transform: matrix3d( 1, 0, 0, 0, 0,
1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
Фильтры 58
Clip-path 59
stroke-dasharray 60
Как анимировать • CSS animation API (плохая поддержка) • Можно
костыльнуть через @keyframe 61
62 <Path className={cx("path")} ref={ref} style={{ strokeDasharray: pathLen, strokeDashoffset: pathLen, animation:
"15s dash 300ms infinite linear" }} />
63 const pathElement = svg.querySelector("path"); const length = pathElement.getTotalLength(); const
dist = length / numPoints; const points = [...Array(numPoints)].map((_, index) => { const { x, y } = data.getPointAtLength(index * dist); return { transform: `translateX(${3 * x}px) translateY(${3 * y}px)` }; }); fish.animate(points, { duration: 15000, iterations: Infinity }); setPathLen(length);
64 const data = ref.current.querySelector("path"); const length = data.getTotalLength(); const
dist = length / numPoints; const points = [...Array(numPoints)].map((_, index) => { const { x, y } = data.getPointAtLength(index * dist); return { transform: `translateX(${3 * x}px) translateY(${3 * y}px)` }; }); const keyFrames = `@keyframes fly { ${points .map( (point, index) => `${((index * 100) / numPoints).toFixed(2)}% { transform: ${ point.transform }; }` ) .join("\n")} }`; setPathLen(length);
Что еще прикольного можно делать? 65
Generative art 66
67
Процессинг и трансформация изображений • Обрезать картинку • Обнаружить предмет
• Применить затейливый фильтр (cместить цвета, etc) • Что-нибудь измерить 68 При помощи <canvas /> можно:
Пиксель измеряющий 69
Все работает быстро 70
WebGL 71
72 56ms x6 slowdown
Почему спецеэффекты в web - редкость? Низкая конверсия Никто не
верит в свои силы Нам лень :) 73
Путь к успеху Добавьте осознанности к процессу Используйте правильные инструменты
Сравнивайте результаты Не бойтесь экспериментировать Почитайте спец. литературу :) 74
75 evl.ms/blog/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
Спасибо! 76 @polina_gurtovaya @pgurtovaya
[email protected]