Does using png images (photographs) for banners significantly slow download time for viewers? What do most photographers use? In other words, is there ever an advantage to using png rather than jpegs for banners and page backgrounds to preserve best quality?
I’m using latest version of everything - RW7, High Sierra, etc. Thanks!
This Stack Overflow post (accepted answer) is spot on :
PNG is better for crisp images with a low number of colours,
JPG is better for a low-bandwidth image - however, it is not as crisp and therefore not very good for GUI.
Generally, JPG is for photos and pictures, whereas PNG (or GIF) is for layout.
Most banners and backgrounds don’t need to be high quality, as that’s probably not where you want the users to focus. There are exceptions to that, but for the most part, having them lighter in weight because of the large size of the images I use a jpeg.
In fact, I would probably suggest you soften the image first with your favorite photo editor, and then compress it. Soft photos compress much better than sharper images.
since the compression is lossless no detail will ever be lost from the image. this means every pixel is guaranteed to look perfect. there will never be blur added or colors faded.
PNG supports alpha channel transparency. this means that every pixel in the image can be completely transparent or completely opaque or anything in between – so gradient transparency, cutouts, blends all work great.
CON:
larger file sizes. most images don’t compress very well. images with large blocks of flat color tend to work best.
slower. with maximal compression on a large image will make the network bandwidth a bit smaller, but will tax the CPU of the browser.
transparency is slow. if you add lots of transparent images to things the browser must render all the elements underneath the picture. for images that cover a large space (like backgrounds) this can make a page run very slow.
Bottom line:
Use PNG for small elements like buttons and icons where transparency and fidelity are important.
Don’t use PNG for photos.
JPEG
PRO:
Small. By carefully choosing your compression amount you can usually reduce a photo’s size significantly and still maintain acceptable quality for the application.
Fast. Most devices come with JPEG decompression as a built in part of the OS that is super efficient, even on large images.
CON:
Noisy. JPEG compression introduces a sort of digital “noise”. Add enough compression and the image looks glitchy and strange.
Color changes. JPEG will shift colors small amounts to improve compressibility of the image. In most cases this is not a big deal, but if you are trying to match a color with another color in your site or a background image/color then JPEG will probably not work.
No transparency. JPEG doesn’t support any sort of transparency.
Bottom line:
Use JPEG for photos and large images. Images that can be blurred or where noise will go unnoticed look great as JPEGs.
Don’t use JPEG for UI elements that need transparency or color accuracy.
GIF
PRO:
animated. with the right tools you can great small animations using the gif format. this is not a video – it’s just successive images that get drawn one after another.
transparency – sort of. gif supports mask-transparency. this allows every pixel in the image to either be 100% transparent or 100% opaque. in some circumstances (ok, very few – but still) this can be very useful.
small (sometimes). GIF limits the color palette to 256 colors. while this will tend to reduce the quality of the image, it also reduces the size. (warning: a large animated gif will be absolutely huge – there is no video compression here – each frame of the image is stored as-is)
CON:
poor quality. the limited color palette and limited transparency mean gifs tend to look pretty bad.
transparency almost useless. because the transparency tends to make things look very pixelated, it is useless except in very limited situations.
animated gifs are huge.
Bottom line:
Use GIFs when you need the animation.
They’re pretty terrible images otherwise – use anything else if you don’t need it to move.