SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with JPG file size?

    hendersonsaddle.com if you take a look, I believe because of the images on the site, it scrolls choppy, and is slow to load on slower computers. Is there a way to keep those images but perhaps shrink the file size so the browser can scroll smoother?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Those images are gignatic (like 3000px x 2000px) and are only appearing smaller thanks to the CSS rules that are setting a height and width for them. Ideally, resize the images before uploading them. You could use a program like Photoshop for this, but if you don't have that, there are lots of free equivalents.

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After I posted this thread, I found out how to resize those images in a photoshop type program! Thank you!

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Install Imagemagick. Then from the command line run
    Code:
    convert robin.jpg -resize 300x300 small-robin.jpg
    
    convert small-robin.jpg -quality 50% small-robin-50.jpg
    See http://www.imagemagick.org/Usage/resize/#resize and http://www.imagemagick.org/Usage/formats/#jpg

    See http://www.imagemagick.org/script/index.php for binaries for your os. For Linux distros, go through the repository.

    The above commands took your 3008x2000 image of size 299,694 bytes and resized to 300x199 of size 27,655 bytes. The quality 50% argument compressed the file further to 20,974. There is no obvious reduction in rendering quality. You might be able to compress even further, but that's your call.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Addict Beaumont's Avatar
    Join Date
    Mar 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The difference it will make in the file size is minor compared to resizing the images, but some graphics editors leave metadata in JPEGs that is just dead weight on the web. For example, cory.jpg has about 9k of useless metadata -- that's about 1/3 of the current file size. If your editor (which, judging by the metadata, appears to be Adobe Photoshop Elements 7.0 Windows) has an option or a method for saving the image without metadata, that's great. I personally use JPG Cleaner since Photoshop irritatingly includes the metadata unless you use Save for Web, which I dislike.

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use Photoshop Elements 8 and I like the "Save for web" option.

    1) you can select different file formats

    2) disable the inclusion of meta data (which is not needed for web display)

    3) you get a "real time" before and after window showing what your image looks like as you increase the jpg compression to an acceptable level.

    between downsizing a file's dimensions and compression you can normally get very small images, in terms of kB, without losing any noticable image quality for web displaying

    Off Topic:


    will be looking at getting PSE 9 soon as they have fiiiiiinally introduced layer msks for all layers and not for just adjustment layers.

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes the save for web and device option in photoshop is how i minimise the size of an image, so that it loads faster, without it loosing too much quality.


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
  •