Skip to content

Commit 23c4810

Browse files
authored
Update README.md
1 parent 7c33329 commit 23c4810

1 file changed

Lines changed: 1 addition & 56 deletions

File tree

README.md

Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
An opinionated library for handling responsive images with help of [imgrpoxy](https://imgproxy.net/).
88

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.
1010

1111
## Overview
1212

@@ -63,58 +63,3 @@ module.exports = {
6363
},
6464
}
6565
```
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

Comments
 (0)