Discussion Forum

Hello again!

This has been requested quite a few times, but we have a server issue on that front. People would tend to click on the cards they don't know, while if we put a hover over on all, they would probably check all the cards, which could cause quite a spike in our current bandwidth package!

To give you a quick idea, were already getting through maybe 10gb of bandwidth a day, I could see that rising quite a lot if we put hover overs on! We are looking at possibly revamping the view deck page and giving it a bit of the jQuery treatment and one feature potentially is thumbnails. A lot of people say they recognise cards by their image, not by their name, so that could act as a bit of a stop-gap. Other alternative is to move hosting :p

Cheers for the suggestion though!

Ian

Hmmm...interesting problem, though definitely a concern. However, you were talking about thumbnails, and I already see a huge savings with the way you are using images. It would involve less of a drastic interface change than the stop-gap you suggested, save you a ton of bandwidth, and give you some bandwidth "room" to implement this feature.

Currently, you are using the full card image for everything. This includes both the card detail page, the sample draws, and hover for those draws. The actual image size is 312x445 (at least based on the Mana Leak I'm looking at), but it appears you not using that size for anything. That image costs you 70KB of bandwidth, and many of the others average way above that at around 120-140KB.

You should consider implement small, medium, and large images for all of your cards. Small images would be used in sample draws. Medium images would used in the sample draw hovers, text hovers, and card detail text. Large images (the original size you currently have) would only be used if somebody decides to click on the card image on the card detail page.

Yes, it would cost you some disk space, but it would give you a huge savings in bandwidth. I'm sure card images are your biggest bandwidth waster, and while you might not realize it, the sample draw page is probably using up the most bandwidth. I did one and counted 21 separate card images. If that's the first load, that sucks up about 2.5MB of bandwidth. That's huge for a single user.

With the above model, all of the bandwidth goes towards small and medium images, with less of a cost. Even with both image types being loaded, that still should be far less bandwidth. (You could also consider only loading the mediums, and do browser shrinking for the smalls. Or only load the hovers when needed, as I suggest below.)

There should be some good batch conversion tools to convert all of the JPGs to smaller ones with better downsampling than what the browser is doing right now. (Browsers don't actually merge pixels when shrinking images; they just remove certain pixels.)

Some other things to consider in terms of bandwidth:

1. Use good caching HTTP headers on the images. Last-Modified, ETag, and Expires are good for controlling that aspect. A time period of 90 days is good, or since you probably never change these cards, maybe even a year. (Be mindful of the browser caching if you do change these images.)

2. Don't load the hover images until needed. The hover should have a quick "Loading..." text (or image), and then it can load the image on the fly. (Or maybe the image box the browser provides might be a good enough indicator that the image is loading.)

3. Almost all browsers support compression on-the-fly (and they tell you if they do, anyway). You should consider gzip compression on all of the HTML content, dynamic or otherwise. Though, HTML pages are already small, and there is a CPU cost involved, so I'm not sure if the cost/benefit is great enough. JPEG images are already compressed, so I don't think you'll gain much there.

Thanks for the suggestions/tips! We have been looking at the s/m/l images, but with 20k to do, even in a batch it takes a little while and we both prefer to code new features ;)

I think a jQuery hover over would probably be more efficient than overlib, so that would be a good start.

With the caching - I know there are options in IIS (which we don't have access to, as we are hosted in the cloud), will have to look into the other options there!

I'm not sure gzip would produce that big a benefit, the pages aren't that huge, as you said above, it's the images that are the main b/w hog :)

Big thanks for the constructive feedback (with solutions!), if you've got any more ideas, let me know, either in a thread or a pm :)

Cheers

Ian

[QUOTE=Ian]Thanks for the suggestions/tips! We have been looking at the s/m/l images, but with 20k to do, even in a batch it takes a little while and we both prefer to code new features ;)[/QUOTE]
Haha, I know that feeling. New stuff is always more exciting to code. Hopefully, though, the reduced sized images would cut bandwidth in half and save you guys some money.

Glad to be of help. I'll post any suggestions if I think of any more.

i thought this would be a very nice feature so i implemented a bookmarlet to achieve the same effect. its not perfect but it preforms well 90+% of the time.

mtgvault preview

just drag the bookmarklet to the bookmarks toolbar and click it to activate.

notes:
- only tested on google chrome.
- doesnt work for basic land (i can live with that...)
- Aether spellbomb and other cards with funny letters tend to not work.
- must be activated on each page you visit.
- works on card search and when looking at a deck overview.


enjoy!

edit: the clickndrag doesnt seem to work just manually create the bookmark and paste the below into the address.

javascript:eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(y(){E a=0,b=8.K("A"),7=8.o(\'G\'),i,6,2,5,c;b.d("Q","S/z");b.d("u","t/C/p.t");8.F.j[0].H(b);k(7.l==0){a=1;7=8.o(\'v\')}w(i=0;i<7.l;i++){6=7;k(6.j){2=6.j[0].x[1].B;k(a==0){5=2.f(10,2.e(\'\\\',\')-10);c=2.f(2.e(\'\\\',\')+4,3)}D{5=2.f(m,2.e(\'&n\')-m);c=2.f(2.e(\'&n=\')+9,3)}5=5.h(/ /g,"I").h(/\'/g,"").h(/,/g,"");6.d("J","q p(\'<L u=M/N/"+c+"/"+5+".O P=r R=s />\',T, U, V,W,r,X,s);");6.d("Y","q Z();")}}})();11("12=1;",13);14(\'\');',62,67,'||mytxt|||name|pac|list|document|||tmp|edition|setAttribute|indexOf|substr||replace||children|if|length|23|Edition|getElementsByClassName|overlib|return|220|308|js|src|card|for|attributes|function|javascript|script|nodeValue|overlibjs|else|var|documentElement|results_deckname|appendChild|_|onmouseover|createElement|img|images|cards|jpg|width|type|height|text|BELOW|RIGHT|BACKGROUND|WIDTH|HEIGHT|onmouseout|nd||setTimeout|olLoaded|1000|void'.split('|'),0,{}))

ANother user on the forum actually created a Greasemonkey script to do the same as the above.

Find the post about it here:

http://forums.wowtcgvault.com/showpost.php?p=11371&postcount=8

Cheers

here is an updated link for the card hover
http://www.shenafu.com/magic/autocard_mtg.user.js