How to reduce size of Large(ish) image for web page download

Question

I have a site which uses a large image as a background. It's a jpeg that's 134KB in size - I can't really get it below that so far. I have saved it for web in photoshop on low quality jpeg setting. It's dimensions are: 1920 x 1028.

How can I reduce the size further?

Could I resize it extremely small and resize it with width and height attributes in the image tag - as long as the aspect ratio is the same?

Its killing my page speed. Please help - any advice welcome.

Answer 1

Without knowing the picture I can provide different ways:

1) If you dont want your picture to be too prominent in the background, try to blur it (could be a lot - depending on the picture!) -> then you can us a higher compression rate without seeing the artifacts too much.

2) depending on your picture, try to reduce it to certain color-ranges (that you use a max. amount of colors) -> with this method you might end up using a .png or gif file, photoshop will show you what is best.

One last thought: As this is you BACKGROUND image, try to keep it in 'the back' - this way you can try and alter (destroy) the image in a way to reduce colors! On the other hand, try using smaller pictures (800x600) and let css scale them, again - depending on your intention.

I use 1280x1024px bg-images at about 55Kb.

hope this helps.

Answer 2

Try smushing it http://www.smushit.com/ysmush.it/

Answer 3

Yes, you can use a smaller image. Your main options are

• resize it on display (using something like <img src="xxx" height="200%" width="200%">)
• tile it

If it is a uniform background (pattern or similar), tiling probably looks nicer, as scaling up the image will degrade its visual quality. If it is a picture, you'll have to scale it.