Как правильно загружать и хранить на сервере несколько размеров изображения?

Question

[iGarett]

Как правильно это делается?
Разные размеры одного изображения, например, для разных размеров экранов телефона.
( И тоже не совсем пока ясно, как такое количество размеров делать ... )

Пытаюсь придумать это так:

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

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

Вобщем у меня опыта и фантазии к сожалению не хватает придумать, как это работает.
Можете помочь алгоритмом действий или примером, пожалуйста.

Answer 1

[Илья Шатохин]

Подключаете GM модуль, обрабатываете все урлы с картинками, размер для отдачи определяете по query параметрам, например www.cite.com/image/001?w=800&h=600 Конвертируете, отдаете картинку, результат кешируете, чтобы каждый раз не конвертировать заново. Храните как вам удобно, хоть в базе, хоть в папках.

Comments

[iGarett]

А если нужно выбрать размер картинки в зависимости от устройства (телефона) которое делает запрос через api? Тоже должны передаваться параметры?

[Илья Шатохин]

iGarett: да, сами определяете какие нужны параметры под размер экрана. Мы используем lazyload, который сам определяет размеры под конкретные элементы. Причем мы настраиваем минимальный приемлемый размер и на лету проставляем к картинкам srcset с кратными значениями, а браузер уже сам выбирает какой ему размер важней при ресайзе или для HiDPI экранов.

Answer 2

[Максим Тюльпаков]

width: 100%;

Задав данный CSS класс изображению, оно всегда будет вписываться в область просмотра.

Comments

[DDDsa]

А как же забота о трафике и производительности

[Максим Тюльпаков]

Даниил: нужно изначально оптимизировать само изображение и все. Врядли труд по созданию кучи изображений будет оправдан.

[Илья Шатохин]

Максим Тюльпаков: сомнительно, особенно кода проект серьезный и пользователи начинают охреневать от счетов за мобильный интернет.

[Yustas Alexu]

Илья Шатохин: на серъезном проекте серъезные клиенты - они имеют деньги на мобильный интернет и не охреневают по пустякам.

[Илья Шатохин]

Yustas Alexu: смешно. Серьезный проект может ориентироваться на разных клиентов. Да и не везде инет такой халявный и быстрый, как в РФ. Как бы по своему опыту говорю.

[ASultonov]

Понятно почему твой сайт так медленно загружается.

[ASultonov]

Yustas Alexu, на VK все клиенты серьезные и имеют деньги за мобильный интернет? Или вк не серьезный проект?

Answer 3

[zhenia3003]

Как реализовали хранение? Храните все разрешения картинок на файловом сервере или обрабатываете под нужный размер перед выдачей?