Как сохранять четкость фотографии при увеличении/уменьшении?

Question

[Денис Букреев]

Такие дела.
Есть страница, где разбросаны круглые фотографии.
При наведении они увеличиваются, при клике быстро уменьшаются и исчезают.
Клик происходит быстро и там сложно что либо уловить по качеству.

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

Может использовать другие методы увеличения, но какие?

PS: фотографии сами по себе в высоком качестве - в 2x размере для ретина-дисплеев

Answer 1

[Денис Букреев]

В общем, решил проблему так: берем большее изображение по размеру и с помощью transform меняем размер с шагом 0.2 - так качество не теряется
Я, таким образом, просто нарезал картинки с размер 1.2 относительно нужного, а в стилях просто прописал transform: scale(0.8), а при увеличении transform: scale(1) - потерь в качестве нет.
Либо можно просто для ретины взять вдвое большую картинку и так же с шагом 0.2 увеличивать/уменьшать

Answer 2

[Олег]

Вьюхи делай маленькие и при наведении скриптом подсовывай большую.

Answer 3

[Борис Шепелев]

Правильный вариант с двумя изображениями! одно - миниатюра, второе - оригинальное!
Я допустим всегда в своих проектах использую скрипт генерации миниатюра на лету: phpthumb.sourceforge.net
Получается фактически имея одну ссылку на изображение, у нас получается дополнительное, меньшего веса и размерности