Optimising Images for Website

radderfire

radderfire

radderfire

Soldato
Joined
24 Sep 2007
Posts
5,180
It's a while since I looked at best practice for optimising images for the web, and since then broadband speeds have generally improved. What are current standards for adding product images (photos) to a website and e-commerce store?

What is the maximum acceptable file size these days?

What are recommended pixel dimensions for product images?

Is it better to use .jpg or is there something to be said for .png?

Thanks
 
PNG is better for solid colour, smooth gradients, rasterised vector graphics and anything that doesn't contain much noise. Use it for border graphics, logos and other shared graphics that'll be re-used several times throughout the site.

JPG is better for product images, photographs and anything noisy. There's no all size fits all recommended image dimensions, it just needs to be enough to show whatever is in the image clearly. Use well compressed thumbnails (<100KB) and offer a higher quality image on mouseover/click.
 
Definitely not PNG unless it's a vector or otherwise simple image. PNG is utterly terrible for complex imagery.

JPG all the way. Crop your images for thumbnails, maximum quality, load full size images if clicked on. You're trying to sell those products, so don't shoot yourself in the foot with crap images.
 
For vector graphics I use SVG (using a sprite system and fallback polyfill). I optimise each SVG with SVGO GUI.

For vector art with gradients, using SVG outside of a sprite can work, or just use a PNG.

JPEG for photographs.

You can run raster images through optimisers. A free web based one is https://kraken.io/web-interface but has limitations. There's plenty out there, both software and websites.

I also let the CMS handle images that customers upload (products, galleries etc) that will create somewhat optimised thumbnails and larger images plus handle caching automatically to keep server load down.
 
Nope. Are you new to the web and computing in general?

https://www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/ said:
JPEGs are for photographs and realistic images. PNGs are for line art, text-heavy images, and images with few colors.
Click to expand...

http://www.differencebetween.com/difference-between-png-and-vs-jpeg/ said:
JPEG images are best for photographic images with smooth transitions of colours, but PNG format is good for images with sudden changes in colour and contrast, such as text and cartoons.
Click to expand...

https://stackoverflow.com/a/7752936/306901 said:
[JPEG is] Good for: Photographs. Also, gradients.
...
PNG-8 can only store 256 colours, like GIFs.
...
A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image.
Click to expand...

https://www.webopedia.com/DidYouKnow/Internet/JPG_GIF_PNG.asp said:
JPG images support 16 million colors and are best suited for photographs and complex graphics.
Click to expand...

https://www.turnkeylinux.org/blog/png-vs-jpg said:
Bottom line: PNG optimization is a poor substitute for JPG. We concluded that it was better to modify the web design and compromise on that than accept a 3X increase in load time for the front page.
...
PNG works best for vector type graphics with hard lines. JPG works best for anything with complex gradients (e.g., a photo).
Click to expand...

... the list goes on.
 
Png are good not for vectors, but for vectors converted to Raster / Bitmap Images. At which point they aren't vectors anymore. That is NOT clear from how you phrased your reply.

As others have said Jpeg are photos and similar where noise isn't an issue. Most people just use Jpeg for everything as neither they or 95% of their users can tell the difference.
 
PNG v JPG depends what your end goal is - if bandwidth is a consideration in website load time over anything else then JPG will own all over PNG - you get at least 4x smaller files with minimal loss of fidelity and can get as much as ~18x times smaller files without completely destroying the image. If its CPU load time then PNG has options to reduce the impact of that via interlacing, etc.

If you have ultra high res images where you want to preserve all the detail though JPG isn't a good option over PNG especially if its part of something like a logo, media pack or similar where people will be reusing/editing the images.

OspreyO said:
Are you joking?

https://en.wikipedia.org/wiki/Portable_Network_Graphics#JPEG
Click to expand...

The compression is terrible for images with high frequency noise which is what he was getting at - the actual fidelity is obviously perfectly preserved.

In a lot of cases personally I'd make judicious use of PNGs where possible even with photos, etc. and fall back to JPG where appropriate.
 
You must log in or register to reply here.
Back
Top Bottom