This is a rather simple topic but I thought it was worth addressing because many people make mistakes when they add photos to their websites. There are a few basic concepts to keep in mind and, since a picture is worth a thousand words, I will include some examples.
The Importance of Aspect Ratio
You should always maintain your photo’s aspect ratio, whether you use the original image or crop or resize it to suit your needs. You should never, ever resize an image in such a way that you stretch one side or the other and change it’s original proportions.
This is the original image
This is a cropped image
This image is distorted
You can resize and crop images using premium photo-editing software like Photoshop or you can just as easily use a free but relatively powerful graphics program like IrfanView (for the PC. I am sure there are similar applications available for the Mac).
When Smaller is Better
This is not something I can demonstrate visually within this post because I do not want to bog it down but we can look at the issue in a little more detail. Take a look at a photo’s height and width. If you are going to upload the image to the web, it does not have to be more than 1,920 pixels wide. If your image is, say, 3,000 pixels wide, you should scale it down maintaining its original aspect ratio.
You also do not have to upload a high resolution image to your website. Why use a 300 dpi image when 72 dpi, will suffice? The large sizes and high resolutions are for other uses like printing an image on a large banner. My trusty laptop has a 4K screen and yet a properly sized lower resolution web image does not look grainy on it.
You can save money when licensing pictures for web use by opting for one of the lower resolution, smaller sized versions.
Both Photoshop and the previously mentioned IrfanView have options to save images for use on the web. You should this feature if your photo editing software offers it but remember that this does not automatically change the height/width dimensions of your photo.
Much as I like PNGs because they support transparent backgrounds, when working with “solid” images, I will usually use the JPG format because the resulting files are smaller. Note that, you can also use animated GIFs on your website but you should be mindful of file sizes.
I would recommend that you make sure that any image you use on your website should be under 300KB. It would be even better if you can get them under 100KB. And still better if you can get them under 50KB… and so forth.
Wrapping Text Around Images
If an image is not as wide as the paragraphs of text above and below it, wrap the text around the image so there are no empty white spaces on your pages.
This photo of a bashful gorilla holding a handful of flowers looks adorable on desktop screens when the text – relevant to the photo at hand, of course – is wrapped around the image. Whether you choose to left or right justify the image will depend on the layout of your page. If your website is responsive, the photo and text will naturally stack one on top of the other when you view it on a mobile device.
This is not something you would normally have to take into consideration if your image is wide enough (Remember, no more than 1,920 pixels wide) to cover the entire width of your page.
The puppy above is probably feeling embarrassed because hers is an orphan image with a lot of “ugly” white space to the right of it.
If you must use a photo by itself, first try to find a version of it that will scale across your page. If this is not possible, at least center it like this:
Though not formatted properly for desktops, the pictures of both these dogs may look fine on mobile devices because this is a responsive blog page.
When wrapping text around an image, remember to add some padding to the image so the text does not abut it. Here there’s a comfortable gap between the right edge of the image and the text. This is the right way to do it when the image is left-justified. If the image were right-justified, as in the case of the gorilla above, you will want to make sure there is some padding between the left edge of the picture and the text around it.
I am not going to include an example where the text touches the photo because it offends my sensibilities too much. You have quite likely seen example of this across the web.
Printing vs Web Use
Finally, since I mentioned printed banners earlier in this post, I wanted to quickly point out that images that are printed use a different color mode (CMYK – short for Cyan, Magenta, Yellow, blacK). Online images are RGB (short for Red, Green, Blue). When you are getting ready to send images for printing to a professional shop, whether it be for business cards, a banner or a t-shirt, you will notice that they will ask you to give them CMYK artwork. You can easily switch color modes with Photoshop.