Back Home

Open Designs

Community. Driven.

Designer Talk: JPEG Optimization

Bottom of Page

1 to 12 of 12

  1.  
  1.  
    For a template I'm working on, i have a HUGE background image. I know, it's not good web design practice but I think the template will turn out nice.

    Heres the link to the image.

    What would be the best way to optimize this for the web? I don't have Photoshop.

    Any suggestions?
    •  
      CommentAuthorauhsoj
    • CommentTimeMar 26th 2008
     
    I don't know what to tell you [seeing as I breathe Adobe products in place of actual oxygen], but the image looks like you have an extremely appealing idea coming together. If you plan to build the web site using Adobe Flash, you could use the built-in optimizer for JPEG images; but keep in mind that either way you do this -- with Photoshop or another image optimizer -- watch for noise in the photo. [I'm sure you don't want static in place of the actual picture.]
  3.  
    Do you have fireworks? 1 thing also... Not only does it not fill my large screen but its not even big enough to fill a 1024*768 window... so you will also have to take that into consideration. I also recomemnd image slicing... this may not reduce the combined size of the image but it will all load faster.. THe file is currently 602 KB not good... I reduced it to about 100... I did it for you
    •  
      CommentAuthoricyone
    • CommentTimeMar 26th 2008 edited by icyone on the 27th March 2008 at 20:21:00 EDT
     
    you can also optimize in corel paintshop pro. Both paintshop pro and photoshop offer free trials in a pinch by the way. *edit-removed image
    •  
      CommentAuthorauhsoj
    • CommentTimeMar 26th 2008
     
    Flip between icyone's version and the original to see what I mean about noise. The image looks a little clearer from a distance, but when you're at average sitting distance from the computer it looks like static - not paper.

    No offense to you Icyone, cos for a 72Kb optimization- that's pretty good. bakie
    •  
      CommentAuthoricyone
    • CommentTimeMar 26th 2008 edited by icyone on the 26th March 2008 at 23:48:11 EDT
     
    No offense taken...I did mention it was losing crispness hehe bigsmile

    When ever I wonder if the file is small enough I often go to our old work computer with dial up and see if the static is worth it over loading time...

    But it looks like static paper at least...bakie
    •  
      CommentAuthorkirby145
    • CommentTimeMar 26th 2008
     
    Posted By: icyone

    When ever I wonder if the file is small enough I often go to our old work computer with dial up and see if the static is worth it over loading time...


    Hasn't anyone made a program where you can limit your bandwidth for testing... The whole using different computers for testing every detail is annoying.
    •  
      CommentAuthorkirby145
    • CommentTimeMar 26th 2008 edited by kirby145 on the 26th March 2008 at 23:54:48 EDT
     
    p.s.
    Posted By: acousticsam I don't have Photoshop.

    Paint.NET
    • CommentAuthorXSQueen
    • CommentTimeMar 27th 2008 edited by XSQueen on the 27th March 2008 at 07:01:25 EDT
     
    GREAT image idea - what size screen resolution are you optimizing for?

    Check out this CNET article on Adobe Photoshop Express . It lets you edit and optimize photos online ... As a flash alternative, check out SWISH. I have coworkers who swear by it ...
    • CommentAuthorwundertype
    • CommentTimeMar 27th 2008
     
    Before jpg-ing, you might want to smooth the right and bottom edges and make a matching background tile for screens wider than 1000px. Otherwise you would have a small background margin even on 1024px.

    Maybe you also like / check / build it on this template by
    freecsstemplates.org
  11.  
    auhsoj - I'd breathe Adobe too, if I could. I don't have any Adobe products, no flash, fireworks, etc... That said, if anyone wants to take a stab at making a flash site from this image, I'd be more than happy to give you a copy of the full-resolution image. Just let me know.

    conartistdesigns - Thanks a lot, the optimized image looks great! Screen resolutions are always tough to work with for fixed-width and fixed-height templates (I seem to have a liking for them, though, I don't know why). I wanted to design this for a minimum screen size of 1024*768. Hmm yeah slicing might be a good idea, I don't know exactly how I'm going to code this yet...

    kirby145 - Yes, I swear by Paint.NET. It's great for most things, but I can never seem to optimize my images very well. Unless you know of a plugin that does it well?

    XSQueen - Yes! I was waiting for Photoshop Express to be taken out of closed beta! This is awesome! Again, as far as flash goes, I won't be touching it, but if anyone else wants to take a shot, contact me for the original photograph.
  12.  
    Try Gimp http://www.gimp.org/
    Reduce the dpi to 72 and re-save. Gimp will let choose the compression quality and method.

1 to 12 of 12

  1.