Как ввести ограничение на размер картинки, если не известен её размер?

Question

[Евгений Усачев]

У меня есть условный div. Я загружаю файл на сервер. Сервер возвращает мне ссылку на файл и я вставляю условный div или image с scr с ссылкой на картинку. Но сама картинка может быть любого размера! Мне же надо сделать её 100*100px. Какой самый быстрый ( в плане оптимизации) способ это провернуть?

Comments

[iBird Rose]

Сервер возвращает мне ссылку на файл

А почему ты не возвращаешь сразу с сервера нужную картинку 100x100? зачем пытаешься костылять потом на фронте?

[Евгений Усачев]

iBird Rose, я до конца не уверен, что Вы имели ввиду. Но если вы имели ввиду сделать картинку сразу 100 на 100, то этот вариант не подходит: в дальнейшем мне нужна будет это же картинка, но целая. Сделать же копию картинки, только 100x100 значит замедлить этот участок кода почте в два раза. Поэтому я и уточнил

Какой самый быстрый ( в плане оптимизации) способ это провернуть?

[iBird Rose]

Евгений Усачев, тебе просто нужно любую картинку втиснуть в квадрат 100x100? вот к примеру: https://codepen.io/ibird/pen/MWOMLyB

[neol]

Какой самый быстрый ( в плане оптимизации) способ это провернуть?

А что и где вы собрались "оптимизировать"? Использование CPU или памяти, или сети, или диска, или времени передачи, или количества запросов, или чего-то ещё? На клиенте или на сервере?

Сделать же копию картинки, только 100x100 значит замедлить этот участок кода почте в два раза.

В два раза относительно чего?

[Евгений Усачев]

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

[neol]

Евгений Усачев, случай из жизни: лет 5-10 назад делали одну задачку, которая подразумевала очень много одинаковых блоков на странице (1-2 тысячи) и в этих блоков была маленькая кнопочка, размером в 15-20 px, на которой было такое же маленькое изображение, но отличавшееся по размеру на несколько px. Когда размер изображения привели к размеру кнопки и убрали таким образом масштабирование в браузере, время рендеринга страницы сократилось на 3 секунды.

На мой взгляд лучшим решением было бы при загрузке нового изображения вешать в очередь задачу на создание превью (или создавать превью по крону, если не хочется заморачиваться с очередями), а заодно можно сохранить изображение в более эффективном формате и прогнать через оптимизаторы. Так и при сохранении не будет задержки на ресайз, и при выводе клиенты получат изображение нужного размера.

Answer 1

[Евгений Усачев]

В целом, я решил проблему. Помощь не требуется. Мне понравился вариант с добавление класса, который будет иметь display:block и height:100px и width:100px.