Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Advice on sizing Jpegs (image files) for web?

  • 09-02-2018 9:51am
    #1
    Registered Users, Registered Users 2 Posts: 3,420 ✭✭✭


    Are there any standard guidelines as to sizing Jpegs for use on the web?

    I've been sizing my photographs to 1024 on the long side, and saving them as maximum quality (level 12 in Photoshop) sRGB Jpegs.

    Is this too big in terms of subsequent viewing speed and user experience on a website?

    Occasionally, I save images from other sites and they can be as small as 512 on the long side, but look ok.

    Images on my site vary in download speed, depending on time of day and method of viewing (e.g. iPhone vs computer).

    Any advice appreciated.

    Thanks.

    D.


Comments

  • Moderators, Computer Games Moderators Posts: 10,462 Mod ✭✭✭✭Axwell


    What is the purpose of the website? If I was a photographer and had a portfolio or gallery i would want high quality, if its just a generic brochure website then I wouldnt be as bothered, so it depends on the purpose of the website and does the user care about the quality of the image being hi res or just medium quality.


  • Registered Users, Registered Users 2 Posts: 3,420 ✭✭✭Dinarius


    Axwell wrote: »
    What is the purpose of the website? If I was a photographer and had a portfolio or gallery i would want high quality, if its just a generic brochure website then I wouldnt be as bothered, so it depends on the purpose of the website and does the user care about the quality of the image being hi res or just medium quality.

    I’m a photographer. I’m finding that 1024/size 12 JPEG produces a file that is maybe too big for easy viewing, while size 8 is too small. Size 10 feels about right.

    D.


  • Registered Users, Registered Users 2 Posts: 396 ✭✭M.T.D


    If you display a thumbnail or other smaller size and click (link) to see full size image then having both sizes on the website would be best.
    Display the smaller size on the site say 300px wide with link to larger size your 1024 would be quite adequate for viewing.
    Use compression on your jpegs. for speed 70% on the small images and 75-80% for the larger full size ones.

    If you have a WordPress site this would be reasonably well taken care of automatically. Make sure the small size you choose is a size set in your media preferences else the full size image will be loaded and scaled, slowing down the page load considerably.

    Quality setting should not affect the size of the image. Set the size in pixel that you want the image to be and the quality to reduce the file size.


  • Registered Users, Registered Users 2 Posts: 3 big_fella


    For images, I always use tinypng (cant insert URL as I'm a newbie on this forum. but it has a .com at the end of it :-)

    You want to display the best quality images possible but do not want to slow your site down - especially on mobile devices.

    For example: Take a 3MB image size 2500px x 1663px and run it through tinypng. You end up with a file size of 365KB. This is still too big for a webpage but when you resize it in photoshop and scale it to say 1024 x 663 (which is still plenty big for a webpage ) and a quality score of 10 you end up with a file size of 134KB.

    This process keeps the image quality but doesn't slow your site down.

    Site speed is huge for Google, especially on mobile. If you want to share high res images then follow the process above but provide a link to download the larger image from somewhere like Google Drive etc..


Advertisement