Images within HTML page

OwenFOwenF Registered Users Posts: 8 Beginner grinner
edited April 12, 2012 in Finishing School
Hi all, new to the forum. I hope this is in the right place and someone can help me.

I am trying to produce some small images (150 wide by 450 tall) for a html page , but my results are grainy and unsightly...nothing like the original images.

The way I am doing it is:

- create a 150x450 canvas (working in GIMP btw)
- open a jpg of approximately the right size (this is one of the custom image sizes saved from
smugmug's 'get link' feature. I have done this so I don't need to resize the image myself)
- copy the jpg onto my blank canvas and centre as necessary
- layer over some text
- save as jpg again

I have the feeling my poor image quality coming from the image file ultimately going from RAW > JPG > JPG, but I cant think of another way to achieve what I want.

FYI, this is the kind of look I am trying to get: http://www.nikhilshahi.com/galleries

Has anyone got any better methods for producing crisp looking images at these dimensions?

Many thanks,

Owen

Comments

  • OwenFOwenF Registered Users Posts: 8 Beginner grinner
    edited April 12, 2012
    Help - loosing image quality
    Hi all, new to the forum. I hope this is in the right place and someone can help me. Accidently posted this in two places :(
    .
    .
    .
    .
    Many thanks,

    Owen


    MOD EDIT: I merged two duplicate threads together to combine answers into one thread.
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited April 12, 2012
    I'm not surprised you are getting bad results from uploading tiny images. You should upload full-sized images in the aspect ratio that you want to use on your HTML-only page. You can then use custom sizes in smug to generate the size images you want on that page. Keep in mind that although custom sizes specify both height and width, your image will not be cropped. It will be a smaller version of the image that you uploaded, maintaining the aspect ratio of the uploaded image.

    See help page at http://help.smugmug.com/customer/portal/articles/93264.

    --- Denise
  • PeanoPeano Registered Users Posts: 268 Major grins
    edited April 12, 2012
    OwenF wrote: »
    The way I am doing it is:

    - create a 150x450 canvas (working in GIMP btw)
    - open a jpg of approximately the right size (this is one of the custom image sizes saved from
    smugmug's 'get link' feature. I have done this so I don't need to resize the image myself)

    My approach would be to start with the raw file and ...

    1. Edit according to your preferences (color, etc)
    2. Crop to the output aspect ratio (1:3)
    3. Downsize to the exact web size (450 px on the long side)
    4. Add text

    I would do all of this in the image editor. Don't let an online host resize your images.
  • OverfocusedOverfocused Registered Users Posts: 1,068 Major grins
    edited April 12, 2012
    Peano wrote: »
    My approach would be to start with the raw file and ...

    1. Edit according to your preferences (color, etc)
    2. Crop to the output aspect ratio (1:3)
    3. Downsize to the exact web size (450 px on the long side)
    4. Add text

    I would do all of this in the image editor. Don't let an online host resize your images.


    +1 to not using images from online hosts. That kills IQ.
Sign In or Register to comment.