How to reduce the size of a large (ish) image to load a web page

Question

I have a website that uses a large image as a background. This is a jpeg that is 134 KB in size - I still can't get it below. I saved it for websites in Photoshop on a low-level jpeg setting. Its dimensions are 1920 x 1028.

How to reduce the size?

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

It kills my page speed. Please help - any advice is appreciated.

Answer 1

Without knowing the picture, I can provide different ways:

1) If you do not want your photo to be too noticeable in the background, try blurring it (it may be a lot depending on the image!) → then you can increase the compression ratio by not seeing artifacts too much.

2) depending on your image, try reducing it to certain color ranges (which you use the maximum number of colors) → using this method you can end up using a .png or gif file, photoshop will show you which is better.

Last thought: Since this is a BACKGROUND image, try saving it in the “back” - this way you can try and modify (destroy) the image in such a way as to reduce colors! On the other hand, try using smaller images (800x600) and let css scale them, again - depending on your intentions.

I use a 1280x1024px bg image with a speed of about 55 kb.

hope this helps.

Answer 2

Try to lure him out http://www.smushit.com/ysmush.it/

Answer 3

Yes, you can use a smaller image. Your main parameters

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

If it is a uniform background (pattern or similar), the tile probably looks better because scaling the image will degrade its visual quality. If this is an image, you will have to scale it.

Answer 4

I definitely recommend resizing the image, but keeping the aspect ratio. Less is better. Keep in mind, however, that the less you go (less than 1: 1), the lower the image quality. Having said that, usually image quality is not necessary in order to be super high for most backgrounds.

Answer 5

use Photoshop to resize and make it according to your needs, such as 1024 * 800 or whatever you want, then save it for the web and device and reduce the optimized jpg value, hoping that it will work.

Answer 6

If you do not want to reduce the resolution of the image pixel (for example, suggested by @sleske), there is probably no way to get the image size much higher than what you have now. The JPG export filter for Photoshop is the top of the line in terms of quality and file size.

The only possible method can be to split the image into sub-images and compress them with various settings (“slicing”). Large, homogeneous areas can be maintained with significantly reduced quality without noticeable loss, while detailed areas can maintain higher quality. I think Photoshop has ImageReady for this.

Answer 7

If possible, save it as a GIF. GIFs are usually smaller than Jpeg.

Answer 8

you can use this online tool to reduce image size from MB to KBs http://www.jpegmini.com/

Answer 9

I found a simple solution. This is to use the 2010 office photo editor. just launch the application, go to the directory with images and just click edit photos on the right, and then compress the pictures. Choose which type you want, I have chosen a website. Successfully reduced jpg size from 5 to 50 kb.

Answer 10

Before sending to the htaccess file, you may have gzip images on the server. (Assuming you are running Apache)

If you have a lot of images, this can be intense on your server processor.