I'm looking into using CSS to transform a YouTube video on my site.
I'm aware this is possible as I've began to do so in jsFiddle, but will this slow down page speeds, or what hindrances may occur because of this, if any?
My example using...
transform: scale(0.8) rotate(2deg);
http://jsfiddle.net/Liamatvenn/Vh6C7/
Okay, first the transformations you are doing are 2D not 3D, I've submitted an edit that fixes this in your title.
As for your question, any transformations will obviously slow down the load speed of your page, but 2D transformations are not as intensive as 3D. However, 3D transformations will actually use the GPU(some people will write a non-consequential 3D transform in order to force the GPU to render, resulting in faster speeds) to render, so if you end up doing a lot of tranformations, switch to using 3D transforms.
NEVER use web-filters (blurs, sepia, b/w, contrast, etc) on your videos or embedded content, those will definitely slow down load speed as well as become extremely buggy and glitchy looking. web-filters do not work well with videos.
While your example only has one YouTube video, I'm assuming that you want to put multiple on the same page arranged in a cool way. I would not recommend loading more than 3 or 4, as loading multiple embedded YouTube videos can be way more taxing on your load time than the transformations themselves. I would link to each individual video through a preview image if you are able to.
Related
I have already read
What is the difference between SVG and HTML5 Canvas?
&&
https://en.wikipedia.org/wiki/Canvas_element#Canvas_versus_Scalable_Vector_Graphics_.28SVG.29
So i am aware of the basic differences, but i was wondering if anyone had encountered any practical difference between the two within the context of ggvis and shiny apart from SVG inability to deal with NA's in the data
The short answer:
SVG would be easier for you, since selection and moving it around is already built in. SVG objects are DOM objects, so they have "click" handlers, etc.
DIVs are okay but clunky and have awful performance loading at large numbers.
Canvas has the best performance hands-down, but you have to implement all concepts of managed state (object selection, etc) yourself, or use a library.
The long answer:
HTML5 Canvas is simply a drawing surface for a bit-map. You set up to draw (Say with a color and line thickness), draw that thing, and then the Canvas has no knowledge of that thing: It doesn't know where it is or what it is that you've just drawn, it's just pixels. If you want to draw rectangles and have them move around or be selectable then you have to code all of that from scratch, including the code to remember that you drew them.
SVG on the other hand must maintain references to each object that it renders. Every SVG/VML element you create is a real element in the DOM. By default this allows you to keep much better track of the elements you create and makes dealing with things like mouse events easier by default, but it slows down significantly when there are a large number of objects
Those SVG DOM references mean that some of the footwork of dealing with the things you draw is done for you. And SVG is faster when rendering really large objects, but slower when rendering many objects.
A game would probably be faster in Canvas. A huge map program would probably be faster in SVG. If you do want to use Canvas, I have some tutorials on getting movable objects up and running here.
Canvas would be better for faster things and heavy bitmap manipulation (like animation), but will take more code if you want lots of interactivity.
I've run a bunch of numbers on HTML DIV-made drawing versus Canvas-made drawing. I could make a huge post about the benefits of each, but I will give some of the relevant results of my tests to consider for your specific application:
I made Canvas and HTML DIV test pages, both had movable "nodes." Canvas nodes were objects I created and kept track of in Javascript. HTML nodes were movable Divs.
I added 100,000 nodes to each of my two tests. They performed quite differently:
The HTML test tab took forever to load (timed at slightly under 5 minutes, chrome asked to kill the page the first time). Chrome's task manager says that tab is taking up 168MB. It takes up 12-13% CPU time when I am looking at it, 0% when I am not looking.
The Canvas tab loaded in one second and takes up 30MB. It also takes up 13% of CPU time all of the time, regardless of whether or not one is looking at it. (2013 edit: They've mostly fixed that)
Dragging on the HTML page is smoother, which is expected by the design, since the current setup is to redraw EVERYTHING every 30 milliseconds in the Canvas test. There are plenty of optimizations to be had for Canvas for this. (canvas invalidation being the easiest, also clipping regions, selective redrawing, etc.. just depends on how much you feel like implementing)
There is no doubt you could get Canvas to be faster at object manipulation as the divs in that simple test, and of course far faster in the load time. Drawing/loading is faster in Canvas and has far more room for optimizations, too (ie, excluding things that are off-screen is very easy).
Conclusion:
SVG is probably better for applications and apps with few items (less than 1000? Depends really)
Canvas is better for thousands of objects and careful manipulation, but a lot more code (or a library) is needed to get it off the ground.
HTML Divs are clunky and do not scale, making a circle is only possible with rounded corners, making complex shapes is possible but involves hundreds of tiny tiny pixel-wide divs. Madness ensues.
I have past content from the following link.
Please see this link for more details
HTML5 Canvas vs. SVG vs. div
I'm developing an application which involves a slides translating into view as the primary navigation mechanism. The first slide to come in involves several super-imposed PNGs at roughly 2000px squared with transparencies, and there's a notable framerate stutter as the images come into view.
Using Chrome Dev Tools' Timeline feature I've established that while most of the individual Paint tasks take under 5 milliseconds each, the significant outliers are those Paint events whose subtasks include decoding the PNGs, which take between 50 and 100 milliseconds one after the other, seemingly at the moment the images come into view.
Ideally I would like to decode the bitmaps ahead of time, but I can't think of a way of forcing this behaviour without actually rendering them in view. Any ideas?
If the bottleneck is decoding, then pre-render your images to a canvas, and then either draw those pre-rendered canvases to your view canvas or translate them in using CSS.
Currently, I'm scaling a 118x118 pixel PNG graphic to 19x19 and it looks terrible in IE7.
Just to note, I'm utilizing -ms-interpolation-mode: bicubic;
** Does IE generally not work as intended with PNGs?
Thanks
In general, trying to deliver a 120-ish pixel image and display it to the user at 20-ish pixels is not the best idea. You're going to have high overhead from the loading of the image that you don't really need, plus it's nearly always going to scale at a much lower quality than you could get from a rasterized image (and you're sending vector)
It's also not the best idea to be doing things so proprietary as using Microsoft's "special" functions. Yes, they work. But again, you're sending additional overhead to support one browser that's losing market share by the day. Insist on w3 standard functionality to do your work and everyone will be happier in the long run....especially the person who picks up your legacy code.
If you HAVE to do it this way, make use of an image manipulation library like GD or ImageMagick. Or, more simply, take the time to properly format your image or icon down with Photoshop, Gimp, or the like. For 2-3 minutes' worth of work, you'll have a happier user and be able to move on to more important things.
I'm experimenting with CSS transforms and I noticed that embedded videos (like for instances the ones from youtube) don't behave as expected when a CSS transformation is applied to them.
I've tested this in the latest Chrome, Firefox and IE and none of them was able to display transformed videos.
Is this a bug of sort, or are videos not supposed to obey to CSS transformations? Not even using html5 in Chrome solved the issue.
They do of course. I created a few examples on my book's website HTML5 Multimedia: Develop and Design under 'chapter 7'.
Here's a video undergoing a 3d rotation (Chrome and Safari only - hover over it).
It's highly unlikely you can transform video due to the complexity and processing overhead it would introduce. Computers like to display video in nice rectangular areas which can be reserved and passed directly to display hardware.
The same applies to plugins like Flash and Java.
In short, even if you could do this it's unlikely the result would be watchable except on very high end PCs.
It's possible that one day WebGL will allow mapping video into 3D spaces using hardware acceleration but I wouldn't hold my breath waiting for a solution.
BTW, if you video is simple enough you might find converting the video to an animated GIF solves the issue.
How do you approach the use of image sprites in css?
Should I take all the images in my website and combine them to one image sprite? Is it really that beneficial?
How hard is it to maintain those images and change them later on?
Should I take all the images in my website and combine them to one image sprite?
Of course not. You're taking it too literal.
I find sprites are best used for groups of similar images. Examples include:
All states of a graphical button
States of icons
All permutations of a background (unless it needs to tile two ways)
Is it really that beneficial?
If you have a lot of them on a busy site, very. It saves a request for each image, saving the user time and your server a whole bunch of concurrent connections.
How hard is it to maintain those images and change them later on?
If you've used them logically, pretty simple. If you need to add another navigation item, you open up your nav sprite and expand it. For things like navigation it can actually be easier to maintain because you have like comparisons right next to you in the same document.
Edit, having seen one of the more extreme examples, I'll add that I would never go that far because:
It's 60k to download. Not huge but on slow connections, that's 60k that has to be downloaded before anything shows. If all your visual assets are tied up, it can make the load time seem longer.
Your CSS becomes a nonsensical mish-mash of background-position commands. If you do want to make changes you have to go back to the sprite and measure everything. Again and again and again.
God have mercy on your soul if you need to enlarge something in the top-left of the sprite. You'd probably just add a new sprite below the current ones.
And that might lead to bloat. Indeed, just loading all these images might be loading a whole lot of material that some users will never actually see. Loading unused data is probably worse than a connection overhead (considering how easily static content can be served by multiple cheap servers or a CDN)
The other examples are a lot more simple and worthwhile (IMO).
Sprites are a great way of cutting down load-time on graphics (sometimes), and always a way of cutting down requests to the server. Generally speaking, they may take some serious planning as you don't simply want to drop a bunch of images onto a canvas and export as a jpeg. I would suggest you study some sprites currently in use by larger companies like Amazon. Get an idea for how they layout their elements, and what types of images they even consider for use in sprites.
You'll also want to evaluate your site and be sure whether you can successfully implement them or not. If you weren't planning on using them to begin with, it may require a lot of back-tracking and updating to prepare for them.
Amazon Sprite
Ebay Sprite
Current.com Sprite (Whoa)
Google
Sprites work well when you’ve got an element with at least one fixed dimension (width or height), and you want it to have a different background image in different circumstances.
When I’ve tried it, I’ve found that sprite image files tend to be smaller than the total size of the individual images files they’re made from, so you can get bandwidth savings as well as the other two benefits:
fewer HTTP requests
no delay waiting for another image to download when an image state changes on hover
That does depend on the contents of the images though.
Personally, I wouldn’t put unrelated images together in one sprite image, as I think it makes maintenance too non-obvious. Also, as mentioned in To Sprite Or Not To Sprite, really big sprite images can use quite a bit of browser memory. (Whether this is actually a bad thing depends on the context.)
The idea is to avoid unnecessary HTTP requests. This is especially an issue if you have a lot of small icons (say, for a WYSIWYG editor like the one used on this site). If you have twenty 16x16 pixel icons, that won't amount to much bandwidth, but it will still mean twenty extra requests each time the page is loaded.
Other candidates for sprites are button states and anything that's purely decorative but part of the layout.
If you use roll-over background image changes, you'll also find that you'll either have to preload the roll-over state image (either with JS or with silly hardcoding) or you'll encounter some latency as the browser requests the previously unused image. Sprites can alleviate that.
Things you probably shouldn't be making sprites of are pictures that are NOT just graphical elements (e.g. graphs, illustrations, avatars, ads) or that will change a lot (e.g. avatars or ads).
It's not impossible to change sprites, but depending on how much thought you put into the arrangement of the sprite sheet, it may be very hard to do. There's nothing forcing you to make the sprite sheet ultra-condensed, but it's obviously better for the file size if there's not much unnecessary whitespace in it (see Google).
Note that the extra requests may not be a problem for you if you have a relatively low traffic site (which almost everybody has, unless you're Google or Amazon). Sprites may still improve performance for mobile devices, though, as it means less chances for errors and thus lower latency.