Why my aniamted GIF is so slow on browsers and mobile? i set my speed at 1/100 in fireworks but on browser is way sloer...how can make a fluid smooth animation to display as a loader? is the compression or some other tricks? using SVG maybe?
i've seen pretty smooth anumation out there so i'm wondering how can be done...
thanks
update
this is an example of fluid gif:
http://img-thumb.ffffound.com/static-data/assets/6/7462923e68408973396e8cafd5fccd9b414f73b3_s.gif
sounds like i found myself. and it may be a bug of Fireworks CS6 or what not
Basically I was saving with frame-rate at 1/100sec. per state. for soem reason this slow down the gif (maybe overloads the browser)
by saving at 3/100 for each state is enough to have a super fluid animation!
Related
So i am making a website, and its done exept that window sizing is not very optimized yet.
I have been using media query for css3 but its not working on all browsers
So im asking, can i do anything with my CSS that makes everything stay at the same size if someone resizes or are using a different resolution?
Here is my code:
http://pastebin.com/Z4EKAdVj
website:
http://www.hyperqube-game.tk
Thanks!
check mediaqueries.js for IE5+, its working fine, you just have to paste script in site.
https://code.google.com/p/css3-mediaqueries-js/
Then for example IE7 is rendering correct page size to resolution
I've been experimenting with pretty complicated SVG backgrounds (via CSS, fixed, 100% size) and it makes both FF and Webkit based browsers slow to a crawl, to the point it's impossible to scroll.
Would you have any idea how to improve the speed of it?
I investigated a big PNG (slow to load, not as "smooth" as SVG) and Canvas without much success.
The site in question was here. Now it incorporates canvas method.
All the elements on the site are vector-based so it can scale to whatever device there is.
So it seems that all popular browsers render page/scroll much faster when the complicated svg background is applied to an underlying canvas (or img) then if it was applied to the body element itself.
Still looking for suggestions how to make it work faster, but at least now it is usable.
This background is very complicated to render on the fly, so I believe that SVG is not feasible. You will have to consider one of the following solutions:
Use a pre-rendered background (i.e. a png background).
Use a simpler SVG, with less elements. In your current background the browser will have to render each line individually.
I often find myself in the need for matching up my webdesign to some reference-image. I used to use the PixelPerfect plugin for FireBug, to overlay an image on top of my design - however these days I mostly develop in Chrome, and there isn't a comparable tool to PixelPerfect.
My perfect tool would be some kind of HUD display that would overlay the entire screen, so I could use it disregarding whatever browser I'm currently working in.
How do you match up your webdesign to make it pixel perfect? Any tools and tips is highly appreciated.
How do you match up your webdesign to make it pixel perfect?
Don't, seriously.
There are so many devices and browsers and other factors that mean that, today more than ever, designs cannot be pixel perfect. To even try and make them so is going to cost a lot of time.
People don't compare websites between browsers so save yourself some valuable time and sanity!
A great way that I've seen done involves work on both ends, but it works nicely.
First, make sure that your designs fit a grid: repeating, same-sized columns with fixed width gutters. You can take that grid layer and turn it into a background image that you apply to your containers during development. That way, if anything doesn't line up with the grid, you'll see it immediately.
try online service like makiapp.com it just like pixelperfect for firebug.
I have a colourful background image that is 2000px x 1500px and because of the details I am saving it as a jpeg that renders at 1.1 MB. I am using the CSS background property to render the image. So being relatively new to web dev and working with a client/designer that's not open to a change of design at this point in the process, what should I do to help this image load blazingly fast. I don't know if it makes a difference but the site is using Joomla 1.5.9. This is something I've always wanted to understand but have had trouble uncovering solutions for... I hope someone can help!!
Thanks everyone!
There's no way to make images magically load faster. Sometimes, though, splitting an image in smaller images allows for surprising size gains; so if it's not out of question for your CSS layout (it typically is, though), you could try this.
Another possibility for you would be to use progressive JPEG images. They are encoded in such a way that enables browsers to display a progressively more precise image as it loads. This means that at first, the image appears blurry (or incomplete) but with full-dimensions, then it progressively gets sharper and better. It's well-suited for images meant to load slowly (or at least, images acknowledged to load slowly).
The best thing that you can do is try to shrink the file size to as small as possible. Let this be using some type of optimizer, smush.it for example. If you created the background image try saving it as progressive first, it loads a lower res version first then finishes loading. But the best thing is to try to shrink the size of the image width and height by finding a repeating pattern and cropping just that portion out and using it. Most about.me images are no larger than 100kb in size that are above 1200px wide.
you could immediatley call the image in the head by using
<script>
(new Image()).src = "IMAGE PATH";
</script>
and make sure you compress the image as much as you can with different programs, or if you have photoshop cs5 you can save it for a web device to strip out all of the extra junk, you can try yahoo's smush.it
http://www.smushit.com/ysmush.it/
or you could delay the loading of the site entirely for a few seconds, until you can be sure that the image is loading, you could try something like hiding all of the elements and fading them in upon a setTimeout something like
*CSS
body{
opacity:0;
}
*jQuery
setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);
although that may not be all that practical.
Would loading the background image after the rest of the page has loaded work for you? At least this way visitors will be able to use the rest of your site until the 1.1MB has loaded.
Something along the lines of setting the style attribute of the <body> to be background: url(image.jpg) within an onload function?
Delivering the image over a CDN will likely speed things up; the better ones are usually optimized to deliver the proper TCP packet size/MTU to the wide variety of clients out there and have generally done a lot of work in the details of delivering things quickly. Slow connections like cellphones will still hate you for it, but getting things like packet size right can make the most of the bandwidth that is available.
I want to put images of the 1024x768 as backgrounds and load quickly using css. I could use
background(url....)
in the CSS, but will that solve the issue, of downloading images quickl?
Thanks
Jean
If you have to use this technique, then remember to compress and cache the image, this will speed it up somewhat, but try and be creative with alternative solutions.
For example can the background repeat on the x-axis? If it can you'll be able to create a 1px wide version that you can repeat across the page.
Try searching for this. It helps cutting off a few KB of data. PNG Gauntlet is also a free software for PNG compression that also cuts Gama correction that causes problems with IE6 and IE7.
Body background images are usually saved with lower quality, thus reducing size.
If your backgrounds are changeable, preload them. It is done by putting divs of zero height at the beginning of the page, and assigning background-image style to each. The images are loaded at the beginning, so when the background of the body gets changed the user doesn't notice the lag.
Google started to count the load time already, so classic preloading causes problems with SEO. Loading with JS, after the page fully loads is an option, or even assigning styles with JS after certain actions are made is also a solution.
remember you can't change the user dsl speed. so css background would be good. Maybe start with take a higher JPEG compression to minimize the file
(btw. i hate (full size) background images at websites with my dsl light)