Good looking images are one of the main things that make your website look good. You can have a great layout but without nice photos and graphics your site isn't going to look great. This article is all about how to create images that look good on your website.
1. Distortion
Stretching an image disproportionately wide or tall will cause it to be distorted. This can be prevented by resizing an image using a fixed aspect ratio. Which means the width and height will stay in proportion with each other as the image is resized.
2. Cropping
Cropping an image is the removal of parts of the image. Applying cropping while resizing is a good way to avoid the unpleasant appearance of stretching an image. It keeps the focus of your image within the aspect ratio and the part that fall outside the aspect ratio are not visible.
3. Resolution
One of the most common problems with images on the web is a lack of resolution. Images need to be of a certain resolution to avoid looking blurry or pixelated. Resolution is closely tied to file size since higher resolutions generally mean larger file sizes. Those larger file sizes can in turn cause your pages to load more slowly. Fortunately WebStarts has an integrated compression method that improves the resolution while keeping the file size small.
4. File Size
File size refers to the number of kilobytes or megabytes of the image. If an image has a large file size it takes longer to load, this can slow the pages of your website from loading and make for a bad experience. So finding the right balance between image resolution and file size can be tricky.
5. Aspect Ratios
Aspect ratios are the relationship between the height and width of an image. Images with a wide aspect ratio would tend to be vertically short in proportion to their width while images with a tall aspect ratio would be proportionately tall when compared to their width. Being mindful of aspect ratios can be especially helpful when dealing with things like product images.
6. Shape
Your image shape should be influenced by your design. Similar to aspect ratios image shape once again has to do with the relationships between the width and height of your image. In WebStarts you can set images to by perfect squares, rectangles, and even circles.
7. Effects
Applying an effect to an image can communicate a specific look and feel. However a great design will require images have similar filters and effects throughout your website to create a truly professional look.
8. Styles
Styles can be used in conjuction with images to give them borders, shadows, padding, and other visual attributes. Again you'll want to be mindful of your styles when working with images across your website. Having many different styles applied to your images is going to break up continuity and make your site look sloppy.
9. Color
The colors of your images should ideally be complimentary to the theme of your website. That's not to say your images should be limited to specific colors in your logo or anything like that. It just means images with the same color grade are going to look good on your site.
10. Lighting
Lighting just refers to the exposure, brightness, and contract of your images. Your images will look better if they look like they belong in a set. And selecting images that were shot in similar lighting is one of the ways you can do that. Of course you can always tweak the lighting of an image in a photo editing software as well.