SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Images Too Large?

    I finally uploaded a first website for my wife, and the photos open much too slowly. How do I redo them to get them to open quicker.

    The website: TheInquisitiveEye.com

    Please be kind to my first attempt at this.... I am learning.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    What graphics programs do you already have on your computer to use to create the copies of the photos to use on the web? How you edit the images to make the files smaller will depend on the graphics program you use.

    If you haven't got a suitable program then the GIMP is a free download that can do everything you will need.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,432
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You are resizing your images using width="550" height="375". I checked the sizes for one of your pictures and I got width 3456px height 2304px and size 1.33MB.

    You goal is to bring down the image sizes from that 1.33MB to less then 100KB. Then your images would load faster. To accomplish that you have to reduce the image width and height proportionally so they dont look bad. Best would be using photoshop. If you dont have that you may try what Stephen suggested. Or you may search online for any photo resize tool.

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have Photoshop Elements 6. That is what I used to edit my photos. If anyone can help with this I would appreciate it.

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hoping that the current format (view of thumbnails) will remain the same, but if I am off base please tell me...

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try Image > Resize > Image Size. Set "resolution" to 72 pixels per inch. Set the height and width to the desired size.

  7. #7
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use Elements - try going to File > Save for Web and then add the size you want the photo to appear in the two image size box, make sure that the format is set to jpg and then fiddle around with the quality slider until you get a decent file size versus image quality. Start around 40&#37; and work upwards until the quality is bearable. I usually end up somewhere in the 50%s.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  8. #8
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help....I am currently working on the changes your offered.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use photoshop. i tend to reduce the resolution to 72 pixels per inch then resise the image to the desired size. then use the save for web option and choose either gif or jpeg depending on the type of picture. yoiu can then mess around with the quality settings even more to get an acceptable file size whilst still retaining image quality.

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help...finally got them resized. Will know better next time.

    One last question...one particular photo does not have a border around it, and not sure why? I was able to put borders on every other single photo, but the one on the bio page just doesn't work for whatever reason. Any suggestions?

  11. #11
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay I lied...another question. I noticed the banner on first page (index) looks fine on my 22 inch monitor, but part of it is hidden on smaller monitor. How do I adjust this one page to fit smaller resolution/screen size?

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you are trying to put the border round it in photoshop i guess the easiest way is to use the stroke comand. i think its under edit ( i may be wrong i'm not on my pc which has photoshop on it at the moment. plus mine is an old version. if you can't fing it look for it in the help files. anyway this should let you easily put a border round it set to whatever colour you want and whatever pixel thickness.

    if you want to do it in the html just add the border attribute to your img tag

    eg.

    <img border=15 src="mypicture.gif">

    change the size to whatever you want

  13. #13
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what I have, and I cannot get it put a border around the image. The background is black.

    <center><img src="images/craterlakeshooting.jpg" width="485" height="345" img border=4 border color="white"></center>

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't think need the img infront of the border attribute. img is the tag name

  15. #15
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <center><img src="images/craterlakeshooting.jpg" width="485" height="345" img border=4 border color="white"></center>

    sorry i was going to put an example but got called into a meeting.
    don't think you can use the attribute border color either thats for tables. i'd use a style and if you are not using style sheets you can put it as an attribute. (sorry if this is the may be the wrong terminology any experts reading). so try the html below.

    <center><img src="images/craterlakeshooting.jpg" width="485" height="345" border="4" style="border-color: white"></center>

    hope this works


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
  •