Image Size and Resolution
The size and quality of an image for use on a web page is determined by a variety of things.
The physical size of the image is information we need to know in order to determine how much “space” will the image occupy on a web page.
File size dictates the time it takes to load your page – the larger the file size, the longer it will take to load. Typically, large, high-quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower.
The resolution of the image dictates its clarity. The higher the resolution, the larger the file size, so you have to make a compromise between quality and file size.
Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file — but this is usually only done when a website is first set up. The other three types are used for general images:
- jpg (JPEG) is for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the “compression”).
- gif can be poor for photographs. It’s better for line art, like logos, with solid areas of the same color.
- png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs.
If you aren’t sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There’s more information in Sitepoint’s GIF-JPG-PNG What’s the Difference article.
The following graphics outline the physical sizes of the images used on the site.
Home Page Hero
Interior Page Header
Note: Make sure to select Parallax Header after uploading Header Images to ensure they display properly on the page.
Blog Post / Large Image
Logo / Headshot / Small Image
Note: To update Footer Logo, please contact the Property Site network administrator (email contact TBD).