Pin Me

HTML Photo Tricks

written by: S. R. Obbayi•edited by: Amber Neely•updated: 10/8/2010

Why HTML photo tricks? What else could you possibly do with photos other then just post them up on your gallery straight from the camera. I can assure you there is more to having a great photo posted on your website. Keep reading to find out what.

  • slide 1 of 7

    Introduction

    Large Format Camera Lens Photos found on websites need not look unappealing. You can use a few HTML photo tricks to get your photos to be the best they can ever be by just applying some of the filters and styles that already come built-into HTML.

  • slide 2 of 7

    Photo Spacing

    The spacing around photos plays a huge role in the way the presentation appeals to the user. By default when placing images into a web page in HTML there is no space between the image and surrounding elements. This can leave a very ugly looking layout. HTML provides a way of handling this problem by using the <img> attribute HSPACE for determining the horizontal space between the photo and the elements on the left and right of it. VSPACE does the same as HSPACE but this time it regulates the vertical space. You can also use the CSS margin and padding constructs to achieve the same results.

  • slide 3 of 7

    Using CSS Borders

    Placing border around photos to emulate a frame when being displayed in a web page can greatly enhance the photographs and make them more aesthetically appealing. You can place borders of varied thicknesses, styles and colors to the match the contrast and the feel of the surrounding theme, elements or color scheme. The border styles you can choose from include solid, dotted, dashed, double-lined and dashed & dotted. You can find out more in detail about placing borders around photos in this article on border ideas in web design.

  • slide 4 of 7

    Placing Shadows Around An Image

    Another Interesting HTML photo trick you can use is to place a background shadow around a photo. This can be done by using a few CSS styling techniques.

    Supposing you have a photograph with the following style:

    .photo{position: absolute;left: 0;top: 0;z-index: 100; /* z-index should be greater than that of shadow's below */width: 480px; height: 320px}

    then to place a shadow behind it I would use the following style on another empty container such as a <DIV>.

    .photoshadow{ position: absolute;left: 5;top: 5;z-index: 99; /*z-index for shadow*/background: black;opacity:0.3;}

    The left and the right properties of the photoshadow style is the offset in which the shadow appears under the photo. That would be five pixels off to the right and fix pixels below the image. The z-index of 99 in relation to the photos z-index of 100 ensures the shadow appears underneath the photo. Setting the color black obviously lets us in on the color of the shade effect usually caused by light falling on an object. The Opacity makes the shadow semi-transparent. By setting the level between 0 and 1.0 you can set how transparent the shadow can be.

  • slide 5 of 7

    Avoid Up Scaling images

    Photos scaled upwards become pixelated and therefore it is a bad idea to scale photos upwards to any degree. If you must scale photos for one or more reasons using HTML then it is better off to scale them downwards. The final scaling must never be smaller than ten percent of their original size. Also if you must re-size images make sure they are re-sized in the same axis evenly. One HTML photo trick to do this is to set the photo size on the width only. The height of the photo will adjust accordingly.

  • slide 6 of 7

    Non-HTML Photo Tricks

    There are some non-HTML Photo Tricks that are worth mentioning. These can only be done if you have a copy of a photo editor like, Photoshop, Photo studio, Gimp and Corel Paintshop Pro among others. A quick way to improve image quality is to use the sharpen filter to remove the blur that you get on most photos.

    Keep your photo quality between seventy and eighty percent when saving, always select the “save for web” options and choose optimized. These tricks safely remove extra data that is not handled by web browsers from the file thus making it much lighter and faster to download.

    Always re-size photos to the size you need before uploading. Always remember to scale down and not up. Scaling must also be constrained. The scaling ratio of X to Y axis must remain the same.

    If photos are too under exposed you can always brighten them up and correct the contrast of the photograph to ensure it can be seen well.

    Here are some CSS background image tips worth looking at. You can combine them with the HTML photo tricks learned here to design better, faster and more aesthetically appealing web pages.

  • slide 7 of 7

    Image Credits

    http://commons.wikimedia.org/wiki/File:Large_format_camera_lens.jpg