копия элемента
 

можно ли с клонировать, но не просто создать копию а допустим есть картинка в разрешение 1680 х 1050 и сделать копию 800 х 600 , если просто использовать width || height то картинка сожмется , но по сути у меня будет 2 идентичных картинки в разрешение 1680 х 1050.
можно ли такое реализовать на js?

canvas

канвас это хорошо , но тягать его всей странице я не думаю что очень хорошая идея, этот элемент мини-копия будет двигаться мышкой

для этого на сервере храняться ещё копии в нужном разрешении

что мешает создать еще один элмент img с тем же src?

<img src='...' width=800 height=600>

а если их много? память не резиновая

то мешает что там будет таже картинка в таком же разрешение только сжата ...

проблема в том что таскать большой элемент не очень удобно как минимум.
а во вторых нагрузка больше

я так понимаю вариантов кроме канвы нет?

по идее канва раз отрисовалась и при перемещении в контейнере с абс позицией перерисовываться не будет всякий раз. будет браться "содержимое" канвы из недр браузера. проблемы как при перерисовке имеджей быть не должно.
ну или как все-легковесные заменители

я так не считаю
Картинка сожмется по определенному алгоритму и будет именно с тем разрешением которое мы задали 800Х600 или 80Х60

поверьте сжимать картинку с большого разрешение в маленькое и надеяться увеличить производительность не лучшая идея

суть уловил щас попробую

да вот щас -при перемещении принудительно уменьшенное изображение будет работать так:
1 переместить контейнер с содержимым
2 взять полное изображение 1680 х 1050
3 отрендерить его 80х60
4 вставить полученное изображение

шаг 3 нужно исключить по возможности

попробывал получилось, но я зделал один вывод что нужно быть полным дебилом что бы перетаскивать по странице картинку в разрешение 1280 х 768 =)

neWjs,
Если у Вас есть уже картинка в браузере в полном масштабе, смысла её сокращать в канве нет, посколь брауз её закешировал и рендит из кеша.
так что таскать по экрану картинку
<img src="http://www.idomik.ru/uploads/posts/2010-07/1279306583_glacialis-oboi.jpg" height="48" width="64" />

Браузу пофег

ещё раз -да щаз
1 причина описана на пост выше
2 на первой странице темы-память браузера не резиновая и каждый экземпляр занимает место в оперативе-кеш не причём

я тут видел значение-функцию новое background-image: element(selector);
оно бы шикарно сюда подошло. Вам нужна кроссбраузерность? хотя, канвас - какая кроссбраузерность ...

во, нашел
https://developer.mozilla.org/en/CSS/-moz-element

эксперимент :

что у Вас больше томозит - какая картинка?
с красной границей - это копия.
http://jsbin.com/ayapoq

одинаково... и работает только в FireFox :)

Браузер не тягает большую картинку по экрану, а таскает копию, созданную в памяти. Или вы реально думаете что он каждый раз ее сжимает?

Посмотрите на браузер с низкоуровневой стороны. Есть картинка 1600х1080 при вставке такой картинки в тег <img src="..." width="600" height="480" /> браузер не будет тягать картинку оригинал, а будет тягать ее копию в сжатом виде, которая хранится в памяти.

И тем не менее в литературе (книгу не помню ) описывается что каждый раз пересжимает. в принципе можно убедиться -тягая картинки разного размера сжатые до одного размера-время и тормоза будут различными