SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to reduce image size as much as possible?

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

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,627
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    With photoshop $ or gimp free

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.

  4. #4
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are the actual steps for photoshop and gimp? Just go to save for web in PS and choose quality 50% and save it?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by godfather999 View Post
    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.)

  6. #6
    Non-Member davidwilliamny's Avatar
    Join Date
    Jul 2013
    Location
    New York City
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Non-Member
    Join Date
    Jun 2012
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member AidanShy's Avatar
    Join Date
    Aug 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    London
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Best way would be converting to gif, which is way smaller in size than other formats.

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,376
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by vjproduction View Post
    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.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ 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.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,737
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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.

  15. #15
    Non-Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird, I have only been able to find on vision (apparently the light one) ;-) 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).

  16. #16
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,376
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    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.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  17. #17
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    See also this post 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 spriteme 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.

    • 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 this page 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.

  18. #18
    SitePoint Member fthtpr's Avatar
    Join Date
    Nov 2013
    Location
    Turkey
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lightroom is also the useful software for adding and resizing photos

  19. #19
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe try some online tool like http://jpeg-optimizer.com/ or http://www.imageoptimizer.net/

  20. #20
    Non-Member
    Join Date
    Dec 2013
    Location
    dhaka
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    There are many ways but i think thats possible by photoshop $ or gimp free ...

  21. #21
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,478
    Mentioned
    162 Post(s)
    Tagged
    1 Thread(s)
    Thanks evryone

    This thread is old and I'm sure the OP has made a decision by now

    Thread Closed


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •