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

1. Оптимизация
графики
на практике
Тим Чаптыков
vk.com/tc
@chaptykov

2. 60%

3. Сеть — количество запросов, размер
Производительность — рендер, память, время
Восприятие — приоритеты загрузки, заглушки

4. Оптимизация
размера
изображений

5. Утилиты
для оптимизации
графики
01

6. Растровая графика

7. gifsicle
jpegtran
optipng — без потерь
pngquant — c потерями

8. Есть плагин для вашей
любимой системы
сборки

9. imageoptim.com

10. Векторная графика

11. github.com/svg/svgo

12. SVGOMG — web-app
grunt-svgmin
gulp-svgmin
mimoza-minify-js
svgo-osx-folder-action — OSX folder action
image-webpack-loader
postcss-svgo
svgo_bot — бот для Telegram

13. github.com/svg/svgo-gui

15. GZIP

17. Экспорт
растровой
графики
02

19. Save for Web
File > Export > Save for Web (Legacy)
⌥⇧⌘S

21. Export As
File > Export > Export As
⌥⇧⌘W

23. JPEG — фотографии
PNG — «клипарты»
GIF — крошечные изображения, анимация

24. JPEG
Для большинства фотографий подойдет 75.
Артефакты будут видны на сложных текстурах
(например, шум).
Для ретины 51 при двукратном размере.
Всегда progressive.

26. #1

27. #1
PNG24
600×380, 56 KB

28. PNG24
Source image
54.35 KB
PNG24
Optimized
38.90 KB
PNG8
Optimized
23.62 KB
JPEG
Optimized
8.19 KB

29. –46.16 KB
—84.93%

30. Crop + Trim
File > Save As
⌘A → ⌘C → ⌘N → Enter → ⌘V

31. Чек-лист
— Изображение актуального размера
— Изображение обрезано точно по размеру (без
прозрачных или однотонных областей)
— Выбран подходящий формат
— Изображение удачно декомпозировано

32. #2

33. #2
PNG24
2204×1102, 1.2 MB

34. PNG24
43 KB
JPEG, 75
238 KB

35. PNG24
Optimized
1243.30 KB
PNG24+JPEG
2 images
282.73 KB

36. –960.57 KB
—77.26%

37. Экспорт SVG
03

39. Save As
File > Save As
⇧⌘S

41. Export
File > Export > Export As

43. Export for Screens
File > Export > Export for Screens
⌥⌘E

46. Asset Export

48. Clipboard
⌘C

50. Save As — для совместимости с Illustrator
Export — для экспорта файла
Export for Screens — для экспорта артбордов
Asset Export — для экспорта отдельных фигур
Clipboard — для быстрых экспериментов

51. Save As — для совместимости с Illustrator
Export — для экспорта файла
Export for Screens — для экспорта артбордов
Asset Export — для экспорта отдельных фигур
Clipboard — для быстрых экспериментов

52. Styling

53. <svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<defs>
<style>
.a {
opacity: 0.7;
}
.b {
fill: #828a99;
}
</style>
</defs>
<g class="a">
<path class="b" d="<% … %>" />
</g>
</svg>
Internal CSS

54. Переопределение
стилей

55. Inline style
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<g style="opacity: 0.699999988079071">
<path d="<% … %>" style="fill: #828a99" />
</g>
</svg>

56. Inline style
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<g style="opacity: 0.699999988079071">
<path d="<% … %>" style="fill: #828a99" />
</g>
</svg>
WTF?

57. Presentation attributes
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<g opacity="0.7">
<path d="<% … %>" fill="#828a99" />
</g>
</svg>

58. Internal CSS — переопределение, большой размер
Inline style — проблемы с точностью и специфичностью
Presentation attributes

59. Internal CSS — переопределение, большой размер
Inline style — проблемы с точностью и специфичностью
Presentation attributes

60. Font

62. Images

64. Object IDs

65. Decimal

66. Minify

67. Responsive

68. https://css-tricks.com/
illustrator-to-svg/

70. <?xml version="1.0" encoding="UTF-8"?>
<svg
width="14px" height="19px"
viewBox="0 0 14 19"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Custom-Preset" transform="translate(-8.000000, -3.000000)" fill="#D8D8D8">
<path d="M18.6923882,8.19238816 L18.6923882,5.69238816 L5.69238816,5.69238816
L5.69238816,10.6923882 L13.6923882,10.6923882 L13.6923882,18.6923882
L18.6923882,18.6923882 L18.6923882,8.19238816 Z" id="Combined-Shape"
transform="translate(12.192388, 12.192388) rotate(45.000000) translate(-12.192388,
-12.192388) "></path>
</g>
</g>
</svg>

71. <?xml version="1.0" encoding="UTF-8"?>
<svg
width="14px" height="19px"
viewBox="0 0 14 19"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Custom-Preset" transform="translate(-8.000000, -3.000000)" fill="#D8D8D8">
<path d="M18.6923882,8.19238816 L18.6923882,5.69238816 L5.69238816,5.69238816
L5.69238816,10.6923882 L13.6923882,10.6923882 L13.6923882,18.6923882
L18.6923882,18.6923882 L18.6923882,8.19238816 Z" id="Combined-Shape"
transform="translate(12.192388, 12.192388) rotate(45.000000) translate(-12.192388,
-12.192388) "></path>
</g>
</g>
</svg>

72. <?xml version="1.0" encoding="UTF-8"?>
<svg
width="14px" height="19px"
viewBox="0 0 14 19"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Custom-Preset" transform="translate(-8.000000, -3.000000)" fill="#D8D8D8">
<path d="M18.6923882,8.19238816 L18.6923882,5.69238816 L5.69238816,5.69238816
L5.69238816,10.6923882 L13.6923882,10.6923882 L13.6923882,18.6923882
L18.6923882,18.6923882 L18.6923882,8.19238816 Z" id="Combined-Shape"
transform="translate(12.192388, 12.192388) rotate(45.000000) translate(-12.192388,
-12.192388) "></path>
</g>
</g>
</svg>

73. <?xml version="1.0" encoding="UTF-8"?>
<svg
width="14px" height="19px"
viewBox="0 0 14 19"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Custom-Preset" transform="translate(-8.000000, -3.000000)" fill="#D8D8D8">
<path d="M18.6923882,8.19238816 L18.6923882,5.69238816 L5.69238816,5.69238816
L5.69238816,10.6923882 L13.6923882,10.6923882 L13.6923882,18.6923882
L18.6923882,18.6923882 L18.6923882,8.19238816 Z" id="Combined-Shape"
transform="translate(12.192388, 12.192388) rotate(45.000000) translate(-12.192388,
-12.192388) "></path>
</g>
</g>
</svg>

74. Exploring ways to export
clean .svg icons with
Sketch… the correct way
https://vk.cc/7mfRx2

75. SVGO Compressor
Sketch plugin

76. Настройки SVGO
для Sketch
removeTitle, removeDesc, precision

77. Чек-лист
— SVGO и GZIP
— Невидимые объекты
— Объекты за пределами холста
— Пересекающиеся фигуры одного цвета
— Группы
— Эффекты
— Растровые изображения

78. #3

79. #3
SVG
10 KB

82. SVG
Optimized
9.82 KB
SVG
Edited + Optimized
4.63 KB

83. –5.19 KB
—52.85%

85. Больше
форматов
04

86. JPEG 2000 — только Safari
JPEG XR — только IE и Edge
BPG — не поддерживается
WebP — Blink-браузеры

87. JPEG 2000 — только Safari
JPEG XR — только IE и Edge
BPG — не поддерживается
WebP — Blink-браузеры

88. WebP
Формат сжатия изображений с потерями и без.
Разработан Google в 2010 году.

89. xnview.com/en/xnconvert/

90. #4

91. #4
PNG24
2000×1360, 332 KB

92. PNG24
Optimized
331.71 KB
WebP
Converted
130.52 KB

93. –201.19 KB
—60.65%

94. Генерация
графики
05

95. CSS
SVG
Canvas

96. #5

99. 1. Desaturate
2. Blend with transparency

100. // Grayscale
let grayscale = r * 0.4 + g * 0.59 + b * 0.21;

101. // source и blend от 0 до 1
let darken = Math.min(source, blend);
let multiply = source * blend;
let colorBurn = 1 - (1 - source) / blend;
let linearBurn = Math.max(0, source + blend - 1);
let lighten = Math.max(source, blend);
let screen = 1 - (1 - source) * (1 - blend);
let colorDodge = source / (1 - blend);
let linearDodge = Math.min(1, source + blend);

102. Formulas for Photoshop
blending modes
https://vk.cc/7mopUI

103. Canvas как способ
оптимизации графики
https://vk.cc/2AydDQ

104. #6

106. #6
PNG24
1294×778, 771 KB

107. PNG24
Source image
771.17 KB
PNG24
Optimized
707.66 KB

108. JPEG, 51
1294×778, 98 KB
SVG
1 KB

109. JPEG, 51
1294×778, 98 KB
SVG
1 KB
Фон

110. <svg width="647" height="389" viewBox="0 0 647 389">
<clipPath id="a">
<path d="<% … %>" fill="#000" />
</clipPath>
<image
clip-path="url(#a)"
width="100%"
height="100%"
xlink:href="photo.jpg" />
</svg>

111. PNG24
Source image
771.17 KB
PNG24
Optimized
707.66 KB
JPEG+SVG
Optimized
99.62 KB

112. –671.56 KB
—87.08%

113. #7

115. Фон
JPEG

116. 1 слой
PNG24

117. 2 слой
PNG24

118. 3 слой
PNG24

119. 4 слой
PNG24

120. #7
JPEG + 4×PNG24
4000×1080, 11.92 MB

121. PNG24

122. PNG8 + JPEG

123. PNG8 + JPEG

124. Before
5 images
11.92 MB
After
9 images
2.02 MB

125. –9.9 MB
—83.08%

127. #8

129. Фон
CSS Gradient

130. Город
SVG Pattern

131. 1 слой
Pattern with Linear Gradient

132. 2 слой
Pattern with Linear Gradient

133. Шум
Генерируем в Canvas, вставляем как base64

134. Шум
Multiply, feBlend

135. SVG feBlend
https://vk.cc/7mosUy

136. –140 KB

137. Выводы
06

138. Атомы
Оптимизация
без потерь
Модернизация
изображения
Конвертация
формата
Разделение Объединение

139. See also
— images.guide by Addy Osmani
— И. Григорик Оптимизация изображений
— C. Чикуенок про JPEG (раз, два, три)
— С. Чикуенок про PNG (раз, два, три, четыре)

140. Оптимизируйте.
Тим Чаптыков
vk.com/tc
@chaptykov