How to reduce image size as much as possible?

How to reduce image size as much as possible so that website loads much faster?

With photoshop $ or gimp free

Yep, the Adobe tools (Photoshop / Fireworks) are great for doing that. Go to Save for Web and choose a middling quality like 50–60%. You can also get great results (for retina) by doubling the width and height of the image, saving at a much lower quality, and then adjusting the image size with HTML and/or CSS.

What are the actual steps for photoshop and gimp? Just go to save for web in PS and choose quality 50% and save it?

Yep, that’s it for Photoshop. (I haven’t used Gimp.)

There are different ways you can reduce the image size like you can use Adobe Photoshop, Paint, Pixler, Photo Editor and there are lot of many other websites and softwares who are offering photo edit. You can reduce the size easily using this…

To reduce image size with Photoshop refer this link http://www.photoshopessentials.com/essentials/image-resizing/ for more detailed information. I t will show you how to reduce images size as per pixels and percentage.

To reduce image size with Gimp refer this link http://www.ehow.com/how_6399524_reduce-image-size-gimp.html

Just go to Photoshop and under Image Size, you can constraint the proportions while reducing by pixel amount or percentage.
I recommend you use percentage to keep it simple.

There are many ways but i think with the usage of adobe tools it is quite easy to reduce the image size to its extent.
I have some good experiences.
You also can try it.

In photoshop there’s a ‘save for web’ function which allows you to try different settings, compression, etc and preview the results. i.e. some levels of compression in the file size might not actually be visible in the final image. This will let you play around with that, while showing you the final file size too, and then save your chosen file.

Hope this helps.

S

Best way would be converting to gif, which is way smaller in size than other formats.

You’re not suggesting all images should be converted to gif, are you? Surely you’ll get a smaller filesize for photos by optimising a jpeg, as already stated, rather than converting to gif.

^ not all, just the simple ones. If OP doesn’t know about gifs already, he should definitely try it out and play with converting options depending on the image.

It just not that simple… and that’s the first thing people must accept.

Here are some guidelines you MUST consider with EACH image.

  1. Useage: is this a bg image? can it be tiled?

  2. Resolution: similar to above. Do you really need a 1200 x2400 px image? reduce your image size to the dimesions size possible. This may be beyond some people, but try not to severe the same image for everybody… i mean it would seem that a 500px X 500px image is reasonable, but for smart phone with a screen size of 480 x 360 , it’s pretty big. If you have the capability to know the device used, take advantage of that!

  3. composition… for large areas of flat colors ( not to be confused with subtle gradients) use GIFs/PNG-8 for complex images JPG/PNG

  4. Support Not really a big issue, but if for some reason you have to deal with ANCIENT IE versions, PNG may be out of the question

  5. Transparency if you need transparency… you need GIF/PNG

  6. Palette and quality this literally will vary with each picture. With GIF you could edit the pallette manually; it does take a good eye to not over posterize , but it can be done. Adding an amount of blur to a JPEG before saving sometimes help. Obviously you can set the quality to some extremely low # , but beware that that will cause artifacts in your image

  7. Color mode. If you have B/W photos … you can save a few KB by making sure you are not on RGB mode. ( seems obvious, but you will be surprised how often it’s overlooked)

  8. With PNG-24, you can drop unused channels.

Tools for the steps above: Photoshop, Fireworks, GIMP and PNG crush.

Hope that helps.

Weird, I have only been able to find on vision (apparently the light one) :wink: I still use the light version though and it’s great. I haven’t used it as much as I wanted too (actually not done anything productive for a couple of weeks now due to my MacBook being sent away for repairing).

To add to the above, you can also save a few kb by not saving the EXIF data with a JPEG, and in GIMP, if not others, by unchecking the “Save thumbnail” option.

See also [U]this post[/U] in an other topic (some things are doubling).

  • Not yet mentioned: css-sprite
    If possible, put (background) images together in a css-sprite (by hand or by tool, for instance [U]spriteme[/U] for an existing web page) to get some less overhead in the image file, but at most: to reduce the time eating amount of http-requests.

  • Not yet mentioned: remove transparency
    If you have a transparent png image overlay over another image (f.i. the general background image or bg-color), look to the possibility to combine them. If the transparent image doesn’t have to move over the other one, the transparency is not needed! Take a screenshot of both, save it, and the png can loose his alpha channel - and lots of kB’s. It will be seamless in the page: nobody can see it is not transparent. :slight_smile:

  • Not yet mentioned: preload next page images
    With javascript you can (after rendering of the page) fill an invisible “preload-box” with images of the (probably) next page the visitor will click.
    In [U]this page[/U] not only the enlargement image is only called if clicked on a thumbnail, in the meantime the [next >] and the [<previous] enlarged images are downloaded already, and instantly present if you click the buttons (and then the next next will be invisible downloaded already, and so on).
    Here it is all done in 1 page, but it can be applied for multiple pages as well.

Lightroom is also the useful software for adding and resizing photos

maybe try some online tool like http://jpeg-optimizer.com/ or http://www.imageoptimizer.net/

Thanks.
There are many ways but i think thats possible by photoshop $ or gimp free …