Why do simple animated gif images take so long to load before they start animating smoothly in a browser, even when the file size is smaller than the cumulative file size of other non-animated image files that have already loaded on the same page?
Simpleton, check out this link, it seems to be a common issue: http://code.google.com/p/chromium/issues/detail?id=295 and: http://forums.mozillazine.org/viewtopic.php?f=38&t=478663&start=0
From skimming these two links, it seems that 1) either the design of the browser limits the FPS of gifs or 2) your browser uses a webkit that loads gifs slowly, and switching to a different browser may speed it up.
Related
I am building a small app with nodejs/expressjs. I made an upload wizard for GIF and JPG images... Depend on images' extension I will classify them into Animated Images or Normal Images...
GIF --> Animated Images
JPG --> Normal Images
But I got a problem, images in JPG can be animated. So how can I detect animated JPG images?
Demo animated JPG: http://picforest.net/pic/0237bbca82954e74902a4afba66df221
I think you can find out that information using EXIF information.
For instance, here's the EXIF info of the image that you have provided:
http://regex.info/exif.cgi?imgurl=http%3A%2F%2Fcdn.picforest.net%2Fupload%2F2015%2F17%2F0237bbca82954e74902a4afba66df221.jpg
It says that it's a GIF image.
There's a node module for exif called https://github.com/gomfunkel/node-exif. Perhaps that may help you out
As it was pointed in comments, there is no such thing as animated JPEGs (except this obscure proposal). Unfortunately this not mean that you can rely on image extension. Extension is just part of file name, it suggest file type, but not determines it. For example image you shared has .jpg extension, but in reality it's GIF and every major browser will treat it as one. In order to detect animated image you must inspect it's content. For example in case of GIF images you could check if first 6 bytes of file is GIF89a or GIF87a, but doing so you will know only that image is a GIF, not that image is an animated GIF. If you want to detect only animated GIFs you must check if they have multiple Image Descriptor Blocks, and it's a little bit more complicated.
It's also worth to mention that currently there are 3 supported by browsers image formats which could contain animation:
GIF - it's rather obvious;
APNG - it's supported by Firefox and Safari, other browsers displays these images as ordinary PNGs;
SVG - SMIL animations are supported by all major browsers except IE and Edge, and there are also CSS and ECMAScript animations.
If you want to detect first two types of animation you can use my node.js library - is-animated, it's rather simple to use:
const isAnimated = require('is-animated');
isAnimated(someBuffer); // -> true/false
Unfortunately currently it doesn't support detecting animated SVGs.
I've been playing with jssor sliders, specifically with different-size-photo-slider. It works when I run the demo version, but when I add my own jpegs, generated by Aperture on OS X from RAW format, those images never finish loading. The loading animated icon just stays forever. The files and pixel sizes are not different from the jssor images. It looks like my jpegs fail to be resized. I tried both Safari and Firefox. Any ideas?
Thanks.
It looks like when I export from Aperture with the default colormap, which is sRGB IEC611966-2.1, javascript has problems resizing the picture. Using, or maybe just changing to, Adobe 1998 or Generic RGB makes things work fine. BTW. the source is Nikon raw file with sRGB color map.
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
In dreamweaver is there a way to scale a page down from 1000px wide to 800px without exporting new images?
There is not. You can set the size of each image in the template, but that is more data that needs to be loaded then required. For example, you set the size to 800px, well the web browser still downloads 1000px of data (image file), this making your theme slower then it should be.
Your best bet it is resize, (and optimize) the images in Adobe Photoshop.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: