Tag Info

Hot answers tagged

13

JPEGs are not always smaller in size than PNGs. Each format has its uses. JPEGs are great for complex images like photographs and will have a smaller file size than PNGs when compressing a photo. PNGs are great for logos or buttons and will be smaller than a JPEG when compressing those kinds of images. JPEGs do not support transparency so what you're ...


11

Here's StatCounter's public data on browser usage. It should be rounder than W3Schools', which is based on their own logs. The people who go to W3Schools, read: developers, are generally not the best cross-section for basing this kind of thing on. You can also break down the StatCounter data by geographical area, if that's any sort of consideration. Set the ...


10

PNG almost always gives better compression than GIF but you need to make sure you're saving the image as an 8-bit PNG. Often graphics programs will save as a 24-bit PNG which may be why you're seeing the results you are. If you say what program you are using we may be able to advise how to save as an 8-bit PNG. You can also run the resulting file through ...


7

According to W3Schools' Browser Stats, about 98.2% of browsers are IE 7+, FF, Chrome or Opera, which all support PNG format with transparency. So, not quite 99.9%, but pretty close. The stats say about 0.6% of uses have IE6, which suppports PNG without transparency (transparent PNGs in IE6 just have a solid white background).


7

There is a jQuery plugin for it here, or the following script also does a good job (just call it in your <body onload="">; function fixPNG(){ var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (version < 7) && (document.body.filters)) ...


6

Do not re-save as JPG (or do once as much, at hi quality). Every time you do it, you add new quality loss. Work in PNG format, and only if you need it, save last version as JPG. tweakPNG tool allows you to remove extra data, but beware not removing essential data(this is not a compressing tool). For compressing it well, I agree on using PNGcrush. I my ...


6

JPG for photos or high color differences PNG for images with gradual transparency (fade from 1 color to clear) GIF for images with small color palettes Obviously give each image a try and see what comes out to the smallest file size. The smaller the size the better. Also don't worry about transparency in IE6 for your PNG's, grandma isn't as concerned how ...


5

"On adding alpha channels to JPEG images" requires you to embedded the PNG alpha layer into the JPEG image as metadata, and then use Javascript to convert the <img> tag to <canvas> and process that alpha layer. His example works in Firefox and Webkit browsers, but not in my IE8. Given the amount of work (preparing a JPEG file with PNG alpha ...


4

Here's what Fiddler reports for that image: HTTP/1.1 Cache-Control Header is present: public, max-age=2529648 public: This response MAY be cached by any cache. max-age: This resource will expire in 29.28 days. [2529648 sec] So, you TOLD Rackspace to cache the image for 30 days on their CDN. That's what they're doing, which is why you are seeing ...


4

IE has had PNG support since at least IE4, the Mozilla suite had it back before Firefox came around. Opera, minority player that it is, has had it for about as long. Netscape 4.7 I think does not. So I'm pretty sure we're over 97% right now. At least, on my web-sites. I don't know anything about mobile/phone browsers, though.


3

All the newer versions (and older versions of many) of the major players support it. Something you'll want to look for is full Alpha and transparency support. There are hacks you have to perform to get even major browsers to recognize these, some times it's just not possible. Check here for a listing of png support status in browsers, major and minor. ...


2

You could try pngcrush, which is a command line tool to optimize PNG file sizes. Its main purpose is to reduce the size of the PNG IDAT datastream by trying various compression levels and PNG filter methods Again, this is a lossless compressor, and I believe is actually what smush.it (mentioned in mvark's answer) uses behind the scenes.


2

You might be able to make an apng image, although there is limited support (no webkit browsers or IE). An alternative may be using JavaScript for the animation somehow. This looks like an interesting implementation.


2

I was about to post PNG are cannot be animated but then a quick search ... argh! Wikipedia mentions an extension for chrome, and has a link to this test - your - APNG - support page The page seems to kind of work in Firefox and Opera, but it's not very informative and seems in a sort of experimental state still. Then animations are not the most exciting ...


1

You should also change the order from lowest resolution, to highest. Since the browsers will use the last instance that they can use. Your: <link rel="icon" type="image/png" href="favicon.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="apple-touch-icon" href="favicon.png"> Should be: <link rel="shortcut icon" ...


1

JPEG compression artefacts would mean that a lot of pixels you might expect to be #d67fff aren't - unless you use lossless JPEG, in which case you're not getting the compression benefits you expressly want. In the future you may be able to do this with CSS clip, but at the moment arbitrary polygons don't see to be supported. The best way to achieve this ...


1

Here is my setup: The list of all theme images does exist and it is called the css file. The css file references images in a folder called images and content images are kept elsewhere in a content folder. To get a list of the images referenced in the css you can use command line 'grep' to list all of the lines containing 'url'. As for PSD originals, ...


1

Use the format that works best for you. Each format has its strengths and weaknesses but when multiple formats offer you the same image quality then let size be the determining factor. In this case GIF wins. Just keep in mind this won't always be the case so you should always check to see which one suits the current image best and don't lock yourself into ...


1

Without using any special tools, you can reduce a PNG's file size by making sure it's not interlaced. Additionally, you can use indexed colors and reduce the color palette (always use a local palette rather than a standard palette). Depending on the type of image it is, you could reduce it to 256 colors or even less without much perceptible difference (for ...


1

If you're OK with GIF-like transparency (in IE6 only), then use PNG8+Alpha (paletted, but with semitransparencies). It gives full alpha in all other browsers. Does not require slow and finicky DX Filters (on which all IE6 PNG24 fixes are based on). Fireworks and pngnq/pngquant can save this format (I wrote Mac GUI for them). Adobe Photoshop is the only ...



Only top voted, non community-wiki answers of a minimum length are eligible