SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best Photo Format for Web Content

    Hi,

    We are on the stage of redesigning our website and inserting photos <snip>.

    We would like to have the photos optimized and with the best quality. We use Photoshop to convert and increase the resolution of the photos to JPEG and PNG.

    What is the best format that we could use to achieve the quality and resolution of the photos?

    We appreciate your response and feedback on this matter. Thanks.
    Last edited by Shyflower; Jan 6, 2013 at 17:23. Reason: removed unnecessary link to site

  2. #2
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    To my taste, the photos are OK.
    There is always a compromise between quality and file size.
    Maybe it would be better to use a bigger
    character set in arabic.

    Have a nice day, Olaf
    Last edited by Stevie D; Jan 6, 2013 at 05:06.

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by eis View Post
    Hello,
    To my taste, the photos are OK.
    There is always a compromise between quality and file size.
    Maybe it would be better to use a bigger
    character set in arabic.

    Have a nice day, Olaf

    What does a bigger character and language have to do with the format of a photo? Please keep your replies on topic.

    Deciding upon resolution is always trial and error. I generally prefer 96dpi for screen but some people probably still use 72dpi. As for file type that really is at your preference. I prefer png because it will hold transparency while jpeg will not. However, for just lowering the resolution of photos, I believe jpeg is = to png but results in smaller (quicker loading) files.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    Community Advisor silver trophy

    Join Date
    Nov 2006
    Location
    UK
    Posts
    2,514
    Mentioned
    37 Post(s)
    Tagged
    1 Thread(s)
    Jpeg generally works better on photographic images, png works better on images with a limited range of colours such as logos, illustration and icons

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is something which is hit and run and there is no official documentation from Google or Matt Cutts saying if the photo resolution has an impact on optimization or not.

    You can use 72 dpi or 96 dpi.

    The main thing you should keep in mind is when you save the image, it should be renamed as one of your keyword and not jshshshs.jpg

    You can also edit it using wordpress and add title as well as alternate text to the images for better optimization.

  6. #6
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,725
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    I've found that the resolution in dpi really doesn't matter for web, all that matters is the actual number of pixels wide by number of pixels tall. Yup, JPG is still the best format for photographs because the way that JPGs compress gives a more natural look than the compressions of GIF or PNG8. I remember reading somewhere that PNG24 is supposed to be good (or better) for photographs, but I'm not totally sure.

    Also, for me, I compress the JPGs to 9 in Photoshop and have had good results. 12 is almost lossless but the filesize is huge! I only use 10, 11 or 12 JPGs for printing. For web, mostly 9 but sometimes 7. Never less than 7 though.

    Also, make sure your colourspace is sRGB or you may find the colours of your JPGs changing quite a bit when you upload and view in a browser.
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  7. #7
    Non-Member
    Join Date
    Mar 2013
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by saudilawyers View Post
    Hi,

    We are on the stage of redesigning our website and inserting photos <snip>.

    We would like to have the photos optimized and with the best quality. We use Photoshop to convert and increase the resolution of the photos to JPEG and PNG.

    What is the best format that we could use to achieve the quality and resolution of the photos?

    We appreciate your response and feedback on this matter. Thanks.
    Every format has its own uses right? So Jpeg is the best, but why not try the png. It might produce quality results. As long as the pixels dont get damage.

  8. #8
    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)
    PNG-24 is superior to JPEG and PNG can contain transparency though it won't compete on filesize for photos. The PNG should be several times larger than a JPG (for most photos) anyway as it has to store all the colour spaces.

    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 possibly 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.

    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% quality.

    Although without a doubt PNG-24/32 is the superior format for quality when using RGB images. Though for online photographs - as part of a web page design - you'd nearly always choose JPG mainly due to a small filesize; "lossy compression" trade-off with perceived quality when viewed as part of a webpage.

  9. #9
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,725
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by debijg
    JPEG is the best your every type of web content
    Not really. PNGs are fantastic for graphics with big, solid colours. JPGs don't do so well with solid colours.

    And GIFs are the only supported files with "animation".
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  10. #10
    Non-Member
    Join Date
    Jun 2012
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For something so important as a template or layout for a web site, I would recommend keeping them as JPEG and the highest quality setting via Photoshop as you can. You want a high quality finish on your site to attract users.

  11. #11
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think JPGE or PNG/PNG-24 is not fact,but must be follow this step
    1:image quality is must be perfect.
    2:image size maximum 20-35kb is perfect.
    3:If you edit the image then kindly(if illustrator then save web content>JPEG format,if Photoshop then save JPG/JPEG>medium pixel size)
    4:If you upload image from your device then use caption and give one inbound link.
    5:If you upload image from URL then ignore this option
    6:always try to input image as feature image
    <snip />
    Last edited by cpradio; Mar 22, 2013 at 22:22. Reason: Removed link

  12. #12
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JPEG works just fine for the website content. You can always go to stockphotos.com for all sorts of sizes and choices.

  13. #13
    SitePoint Member keripik buah's Avatar
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i usually use PNG for logos and icons, and JPEG format for photo or gallery content
    we can make transparent picture with PNG format.

  14. #14
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Looks like all options have been discussed and the OP has not returned to comment.

    Thread Closed.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown


Tags for this Thread

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
  •