|
6 | 6 |
|
7 | 7 | An opinionated library for handling responsive images with help of [imgrpoxy](https://imgproxy.net/). |
8 | 8 |
|
9 | | -It takes your images, generates 1x, 2x and 3x of them and output them as <picture/>'s srcSet or background css. |
| 9 | +It takes your images, generates optimized 1x, 2x and 3x versions of them and output them as <picture/>'s srcSet or background css. |
10 | 10 |
|
11 | 11 | ## Overview |
12 | 12 |
|
@@ -63,58 +63,3 @@ module.exports = { |
63 | 63 | }, |
64 | 64 | } |
65 | 65 | ``` |
66 | | - |
67 | | -Imgproxy url'ы можно составлять как в билдтайме, так и в рантайме. |
68 | | -Набор инструментов в этой библиотеке заточен под подготовку url в билдтайме. |
69 | | -На это есть несколько причин: |
70 | | -1. Лучше потратить процессорное время в билдтайме, чем в рантайме |
71 | | -2. Подпись url в imgproxy возможна только в билдтайме |
72 | | -3. В билдтайме у нас есть доступТо что мы можем получить все возможные брейкпоинты по картинкам в билдтайме |
73 | | - |
74 | | -Минусы такого подхода: |
75 | | -1. Неудобно использовать урлы с подписью? Не поиграешь |
76 | | -2. Нельзя воспользоваться require context dynamic |
77 | | - |
78 | | -3. Импорт через require.context('./myImage') и функцию-хелпер/компонент |
79 | | -4. Во время импорта все ссылки на изображения imgproxy собираем в один json |
80 | | - |
81 | | -<picture class="image css-1bv363l e1mofdgw0"> |
82 | | - <source media="(max-width: 767px)" type="image/webp" |
83 | | - srcset="/_next/static/images/core-values/mobile.all/reliability-c770d411@1x.webp 1x,/_next/static/images/core-values/mobile.all/reliability-6c497195@2x.webp 2x,/_next/static/images/core-values/mobile.all/reliability-67dc4bb0@3x.webp 3x"> |
84 | | - <img |
85 | | - srcset="/_next/static/images/core-values/desktop.m/reliability-8b8b8b67@1x.png 1x,/_next/static/images/core-values/desktop.m/reliability-a5845164@2x.png 2x,/_next/static/images/core-values/desktop.m/reliability-db64bb29@3x.png 3x" |
86 | | - src="/_next/static/images/core-values/desktop.m/reliability-8b8b8b67@1x.png" |
87 | | - alt="Illustration: a man folds a wall of lego"> |
88 | | -</picture> |
89 | | - |
90 | | -Проблемы: |
91 | | -1. Разработка на локалхосте, запускать докер или делать bypass всей этой логики? |
92 | | -2. Порядок source в picture, первый подошедший используется |
93 | | -3. Picture компонент можно удалить в пользу обобщения |
94 | | -4. Объединить Picture компоненты новые и старые |
95 | | -5. Собирать статистику какие картинки запрашиваются |
96 | | -6. Собирать все урлы и потом по ним проходить после сборки стенда |
97 | | -7. Поправить file-loader |
98 | | - |
99 | | -Идеи: |
100 | | -1. Загружать picture тег асинхронно, например, как кусок html |
101 | | -img src='csssr.com/getimage/myimagename' |
102 | | -server.use('/getimage/:imagename', () => {}) |
103 | | - |
104 | | - |
105 | | -Порядок в srcSet не имеет значения |
106 | | -Порядок в source имеет значение, первое подошедшее правило срабатывает |
107 | | - |
108 | | - |
109 | | -Ожидается file-loader перед этим лоадером |
110 | | - |
111 | | -Можно потом вынести imgproxy в options loader'а |
112 | | - |
113 | | -[MIT](./LICENSE) |
114 | | - |
115 | | -[npm]: https://img.shields.io/npm/v/image-resolution-loader.svg |
116 | | -[npm-url]: https://npmjs.com/package/image-resolution-loader |
117 | | -[node]: https://img.shields.io/node/v/image-resolution-loader |
118 | | -[node-url]: https://nodejs.org |
119 | | -[deps]: https://david-dm.org/ArtyomResh/image-resolution-loader.svg |
120 | | -[deps-url]: https://david-dm.org/ArtyomResh/image-resolution-loader |
0 commit comments