SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Thread: photos for web

  1. #1
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    photos for web

    I consider myself to be more scientific than artistic. Yet I do enjoy taking pictures. Maybe out of 50 I'll get 1 really nice one, a few that are OK, a lot that I might show to a captive audience (i.e. friends and family) and get away with it, and mostly "scrap". But that doesn't keep me from trying

    Anyway, I've always saved my photos as progressive jpgs with max quality/ min compression. But I have read that this adds uneccessary weight to the file for an insignificant gain in image quality.

    What compression ratio do you use for web photos?

    Also, I prefer my design to be "fluid"/"liquid", but images don't work this way. For example, the SitePoint member's "Pictures & Albums" says that the max dimensions are 600px by 600px or they will be resized.

    I'm wondering if these are generally acceptable dimensions.

    What size images do you prefer for the web?

    Does the file weight affect your decision?

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    It depends on how they are being used. If they are images within copy, I usually limit them to 350px max. If its in a photo gallery 600x600 is pretty good because with the browser toolbars and website banners, that's a good size. If they are much bigger than that it annoys some users. I usually set the compression to 6 or 7. The softer the image is the less it is effect by compression.

    The most important things with jpegs is to "save for web" in Photoshop because it strips out metadata and thumbnails etc.. The resulting file is often a fraction of the size of a regular save.

    Michael

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    For elastic or fluid layouts I actually make images a bit bigger than I need to accomodate various screen resolutions. To compensate for the bigger dimensions, I reduce the quality significantly.

    For JPEGs, I never use more than 60 (PS save for web panel). That is sufficient in most cases.

    If an image allows me to use the PNG format, I don't optimise in Photoshop at all but instead do it in Fireworks as there are plenty more and better possibilities to optimise images for the web, and the results in size are so much lower at times, it's absurd.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Currently I have a kind of "mini-logo" in the head that's 100px w x 75px h ~4KB

    I have photo "index pages" with thumbnails that are 125px w x 90px h ~ 10KB with from 9 up to a maximum of 22 thumbnails on a page.

    The "gallery" photos are 400px w x 300px h ~70KB

    On my dialup they don't load that slow, but slow enough that I'm wondering if I should revisit them. Not everyone will have the patience for my photos that I have for them

    I don't have Photoshop or Fireworks. I have an old OS and have been using PhotoRecall Deluxe - G&A Imaging Ltd. and MicroGrafx Picture Publisher 8

    I don't imagine they even come close to what's available now. But I can set different compression ratios, save for web (I've been doing that already), and save (export?) as png.

    So I'll definately revisit this soon. Hearing from some pros that the compression ratio can be higher without too much quality loss is reassuring. And png support is much better now than it was years ago so I'll look into that too.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    I did some quick experimenting.

    original 45KB
    png 237KB
    60 compression 12KB

    Direct Copy

    PNG Copy

    Compressed Copy


    I don't know why the png is actually much heavier, from everything I've read and heard I would have bet it would have been less not more.

    I am quite pleased with the higher compression. To my tired old eyes I can't see much difference unless I "zoom in". Then it looks blotchy.

    I also noticed an option for "interlacing" that I didn't (and have never) touched. Is that something worth playing with?

  6. #6
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,364
    Mentioned
    80 Post(s)
    Tagged
    3 Thread(s)
    I beleve png has more colours and so along with no compression the file size is larger.
    You coud strip out the EXIF data which includes a thumbnail to save image size.

    I use Gimp and Imagemagick which are both free and there are lots of other free programs.

  7. #7
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    I, too, use GIMP and highly recommend it. Since I am more of a developer than an artist I find myself often frustrated by Photoshop. It just doesn't "think" in the terms I do.

    Did you know Photoshop is available in an online edition?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Mittineague, your "experiment" with PNG is flawed...

    While you had such a high file size with yours, I managed to get the PNG down to a much more reasonable 78KB (without any effort).


  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    If you use interlacing it will make the file larger as it's supposed to be like interlaced GIF where it loads every other line first.

    I took a look at the three files you had as examples my machine reported:

    [1] Direct Copy [JPG] 44 KB (45,422 bytes)
    [2] PNG Copy [PNG] 27 KB (27,434 bytes)
    [3] Compressed Copy [JPG] 12 KB (12,056 bytes)

    The last version is pretty blocky and of fairly low quality and actually the [your] "PNG" didn't save as a valid PNG file and explains why it reported itself as 27 KB! - I suspect you uploaded the wrong file and the program just appended a *.png extension?

    Unless my browser has gone haywire the file [2] was a JPG and even the header said it was JPEG - it was not PNG.

    Thus I took a look at Alex's PNG (which was a valid PNG) and on my machine it said it was: [80,856 bytes] I just lossless saved it using the normal method I use for all web PNG and go it down to [70,856 bytes] without even editing it thus about a 13% reduction on Alex's version.

    The PNG should be several times larger than a JPG (for most photos) anyway as it has to store all the colour spaces and hence why Alex got the "FAKE" file to "increase" in size from: 27 KB to (["78KB"] quoting Alex).

    I assume those are the same files everyone else saw and I haven't had my browser cursed. Plus I am not quite sure what Alex did; so I apologise to him, if he used another method or file.
    Last edited by xhtmlcoder; May 22, 2010 at 06:45. Reason: Clarity on files being mentioned.

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Good catch. That certainly clears up some confusion. Because the forum's Attachments allows
    Valid file extensions: bmp conf doc gif jpe jpeg jpg pdf png psd txt zip
    I figured the Profile Album would deal with png files too - silly me. It does in fact change them to jpegs.

    direct copy ~ 89.9KB



    compression ratio 60 ~ 16.0KB



    websaved compression ratio 60 progressive ~ 15.3KB


    So using "web save" as I always have does help some.

    One program saves pngs as CompuServe and the other as Portable Network Graphic - I have no idea if there's any difference. But they're still larger than the jpgs. Although one app lets me change the dpi and that made some difference. 232KB vs. 206KB

    I trust your eyesight more than mine. I'm guessing that the blotchy I see only when I zoom in is noticeable for those with better vision. I had a feeling I was getting a little over-excited seeing the weight go from 45KB to 12KB. Short of my staying completely away from graphics because of my compromized vision, I would still like to use some compression factor to reduce the weight.

    So is their any "safe" compression ratio that even a blind man could use and trust that quality was not trashed? I have to be honest with myself and admit that I can't go near the "judgement required" zone.

    Also, is reducing the dpi a bit relatively "safe" or "risky"?
    Attached Images Attached Images

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Hmm, yeah I am only 'short-sighted' so I could see quite a huge difference between [1] and [3] for the first set of images (forest).

    For the 'MITTINEAGUE Park' I found it harder to read on [2] but didn't notice a lot of difference between [2] and [3]. As for [strpng.png] that is pretty dire and looks like 8-bit.

    <browser_talk>
    Hmm, a web browser has no concept of dpi thus it will appear different to say Photoshop (where you can see print and actual size, etc.) As far as the browser is likely to be concerned anything over 72 dpi is meaningless anyway (or for that matter so is 72 but that's another story).

    In reality the dpi 'Text Size' is a "Logical Inch" computed value. Don't confuse "logical inches" with "real inches" - very different concepts.

    For example we have three; 100px by 100px images, one at 72 dpi, 96 dpi and 300 dpi. It will look the exact same size within a web browser but when printed it will differ.

    Basically DPI does NOT apply to video screens; video systems know no concept of dpi at all or any concept of inches either. You should notice that the terms "dpi" or "ppi" simply do not appear in any user manual for any monitor or for any video board.
    </browser_talk>

    Hence why the file: strpng.png (400 x 300) is larger (File-size [KB]) than; strpng2.png (374 x 281) it is the dimensions you changed NOT the dpi (as such both are 2 dpi). Also you reduced them to 64 colours and into PNG-8 instead of PNG-24 - you physically altered dimensions not dpi.

    With the files: dircopy.jpg , str60.jpg and ws60p.jpg they are all (400 x 300) and (107 dpi).

    I think you have got yourself completely confused over DPI and colour depth and the fact that in image editors; they may handle re-sampling/sizing differently.

    It sounds like your Image Editor is a little peculiar. I suspect when it mentioned CompuServe what it actually did was convert the image into a GIF or at the very least reduce it to 256-color. That would explain why you had those 2 freaky results (and only 64 differing colours) on the last 2 PNG files.

    It's horses for courses, and PNG-24 would have a hell of a time trying to compete with JPG on a complex colour photo for file-size even if the JPG was saved at 100&#37; quality. You've probably seen this: http://www.sitepoint.com/forums/show...3&postcount=23 and how I managed to get PNG to beat JPG on a like-for-like photo (without colour reduction).

    Although without a doubt PNG-24/32 is the superior format for quality when using RGB images.

    I hope some of this makes sense.

  12. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Thanks. I think I understand dpi better, though not well enough to explain it to someone else.

    And I hadn't noticed the different dimensions between the png images (I don't know what happened there), but of course that would explain it. :d'oh:

    I'm beginning to see there is no "easy" "one-size fits all" answer regarding compression ratio. It all depends on colors, content, dimensions etc.

    I'll have to curb my desire to hack file weight too drastically and settle for minor tweaking.

    I'm guessing "blockiness" would be most apparent in a simple compostion containing diagonal parallel lines?

    I'll do more experimenting with staged compression increases and see when I first notice a difference. Then back-off some to allow for my poorer vision.

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, image editors like Photoshop usually refer to DPI because they are typically talking about PRINT sizes so when you change the DPI it will alter the hardcopy "print size".
    In some editors that will means they also re-sample the image and thus you may unwittingly change dimensions - like happened with your PNG files.
    I suspect that is why you wrongly thought you had altered dpi - between the two PNG files - they could have been 100000 dpi and still appeared the same size (dimension) in the browser. In contrast your image editor may have choked or drastically resized them.
    Really, my question should have been what type of OS and computer specification do you have?
    Since more than likely you could benefit from some different image manipulation tools and there are quite a few freeware or open source tools that may help with minor image edits, or image compression, etc.

  14. #14
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    My OS is a big problem that only continues to get bigger as time goes by.
    It severely limits my ability to upgrade existing apps and install new ones.

    Of course when I first bought it, it was "cutting edge" with "extras". But we all know how long that lasts

    I have Windows98 8GB. It's getting harder and harder to find apps that are compatible with it, yet unless I come into a windfall I don't see where I'll be able to upgrade my system any time soon

    I did take a look at ImageMagick. With a little trial and error I should be able to find a workable archived version.

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Mitt: Linux box?

  16. #16
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Mittineague View Post
    One program saves pngs as CompuServe and the other as Portable Network Graphic - I have no idea if there's any difference.
    PNG stands for "Portable Network Graphic" and CompuServe helped develop it (seems it was originally named GIF24). There is only one PNG format

    For those interested you can read about the history of the PNG format here: http://www.libpng.org/pub/png/pnghist.html
    Last edited by ScallioXTX; May 23, 2010 at 15:10. Reason: Added link to history of PNG article
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  17. #17
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,364
    Mentioned
    80 Post(s)
    Tagged
    3 Thread(s)
    Old IM versions :- http://sourceforge.net/projects/imagemagick/files/

    IM changes/improves every month and so there may be quite a few things you can not do with an old version.

    Examples of most of the operators around version 6.5.0 IM operator examples The pages are quite large.

  18. #18
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Ah, I had JavaScript disabled in the previous post and hence the lack of whitespace between paragraphs.

    Windows 98 and 8 GB (I expected you to say something a little more modern like; Win Me and 20 GB). Yes, I was running a system with that OS and same hard-disk size still in 2006. Even in those days it was "nightmare" processing and waiting for certain applications to load - I understand your pain.

    Have you tried Irfanview: http://en.wikipedia.org/wiki/IrfanView it's an image viewer but may help with some editing or PNGOUT for compressing PNG there will be Win98 versions archived on the net.

    We have discussed; JPG will in nearly all cases produce a 'smaller-photograph' but always 'loses quality' when "lossy" saving.

    So for the "final" web photo it basically will have to be JPG (filesize comparisons) although of course you may edit the file as a PNG or some other "lossless format" to keep integrity/quality during the 'editing process'.

    However, obviously PNG-8 will nearly always produce a smaller file than GIF so typically you should never have any need for the GIF format assuming you only want static images.

    Good Luck!

  19. #19
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,364
    Mentioned
    80 Post(s)
    Tagged
    3 Thread(s)
    Out of interest there is a 8bit version of IM as well as the 16bit.

  20. #20
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    I did some more experimenting. Normally for such a simple graphic I would NOT use jpg, but I wanted to test compression vs. noticeable artifacts.

    I made a simple 400x300 image in Micrografx and got these weights at these compression amounts
    Code:
    compression 1	74KB	100&#37;
    compression 5	53KB	72%
    compression 10	41KB	55%
    compression 15	34KB	46%
    compression 20	30KB	41%
    compression 25	26KB	35%
    compression 30	24KB	32%
    compression 40	21KB	28%
    compression 50	19KB	26%
    compression 60	16KB	22%
    png		15KB	20%
    I notice that the relative amount of weight reduction drops off considerably at higher compressions. That is 28% for the first 5 but only an additional 17% for the next 5 and only another 9% for the next, etc.

    Most of them, even I could see "dirt" in the white areas, first noticeable (to me) at compression 10 and getting progressively worse. But 5 looks good to me and as that's where a larger amount of weight is saved and none of my photos are as "simple" (easier to hide the "dirt") I'm happy.

    But I can sure see where png has it's place - for this simple black and white 15KB - 20% of the jpg weight!

    Now to try some new apps
    Attached Images Attached Images

  21. #21
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    While I've stored photos as PNGs to prevent loss, I've never put them online as pngs except a few times as indexes thumbnails.

    I want to benefit from lossy on the web. But, any text on a photo must be readable, so my lower limit on some photos re quality is 85%. That sounds a lot higher than what others are mentioning here, but the Mittineague park sign photos, I can't read them, and the text is a main feature of the photo. I would have saved it higher for readability.

  22. #22
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I notice that the relative amount of weight reduction drops off considerably at higher compressions. That is 28% for the first 5 but only an additional 17% for the next 5 and only another 9% for the next, etc.

    Most of them, even I could see "dirt" in the white areas, first noticeable (to me) at compression 10 and getting progressively worse.
    Which can all be explained by the Rate-distortion theory
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  23. #23
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Got your png.png from (15,260 bytes) down to (13,504 bytes) thus (88&#37 reduction using the method I mentioned. Obviously that "test image" would beat JPG hands-down; it's PNG-8, eight colours and there is less close randomised colour gradients or "low-contrast transitions with noise" as often seen in photos.

    Yes, you should certainly always consider PNG-8 for simple non-photographic images. PNG is also a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions.

    Possibly another factor apart from you having to wear corrective lenses; your PC being a little aged it is not as capable at displaying high-resolution images and greater colour depth, as a more modern machine.

    Could be why you couldn't detect some of the artefacts (in the earlier photos) that us more modern hardware equipped people noticed.

    Notice: if you saved my Avatar (yes, that ugly thing) which is PNG at a fairly high JPG quality the JPG would be larger than the original PNG file - try it out for yourself if you want. ;-)
    Last edited by xhtmlcoder; May 26, 2010 at 07:41. Reason: Grammar.

  24. #24
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    I got the png.png down from 15,260 to 5,979 (39%) using PNGQuant.

    Code:
    pngquant.exe 7 png.png
    Thus forcing the PNG to 7 colors. Anything less and they black becomes grey for some reason.

    Using PNGRewrite I got it to 9,148 (60%)

    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Aha! A new contest idea! Not a design contest, but
    See Who Can Shrink the PNG The Most! : )


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
  •