开发者

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

开发者 https://www.devze.com 2023-01-31 12:22 出处:网络
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

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 extremel开发者_运维问答y 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.


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.


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


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.


I would definitely recommend resizing the image but keeping the aspect ratio. The smaller the better. Keep in mind however, that the smaller you go (less than 1:1), will reduce image quality. Having said that, generally image quality isn't mandatory to be super high for most backgrounds.


use Photoshop for resizing and make it according to your need such as 1024*800 or whatever u want,and then save it for web and device and there reduce the Optimized value of jpg hope it will work.


Unless you're willing to reduce the image's pixel resolution (like suggested by @sleske), there is probably no way to get image size much beyond what you have now. Photoshop's JPG export filter is top of the line in terms of quality vs. file size.

The only possible method could be splitting the image into sub-images, and compressing them with different settings ("slicing"). Large homogeneous areas can be saved at massively reduced quality without much visible loss, while detailed areas can retain higher quality. I think Photoshop has ImageReady for that.


If possible, save it as a GIF. GIFs are generally smaller than Jpegs.


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


I found a simple solution. It is to use office photo editor 2010 . just launch the application navigate to the directory with the images and simply click edit pictures on the right and then compress pictures . select what type you want i chose website. Successfully reduced size of jpg from 5mb to 50kb .


I tried many online image compressors but I liked this one most: http://compressimage.toolur.com/. You can play with various things like quality, compression methods etc.


You could have your server gzip images before sending in an htaccess file. (Assuming you run Apache)

If you have a lot of images, it could be intensive on your server's processor though.

0

精彩评论

暂无评论...
验证码 换一张
取 消