Best Practices for Website Images

IMAGE FILE SIZE, RESOLUTION, AND DIMENSIONS 

File size refers to how much space an image takes up on a hard drive. Smaller file sizes are better for web graphics as they will allow the website to load more quickly. This is important for many of the people who are accessing the web from a slower internet connection, an old computer, or their phone. 

When you take a photo with a digital camera or your phone, the images can be quite large, often several megabytes. Ideally, your images should be no larger than 1MB, with most smaller web graphics showing up at 100kb or less. And only a very large image like a full-screen background should be anything close to 1MB. 

Image resolution is essentially irrelevant when it comes to on-screen web use. It is measured in PPI (pixels per inch) and determines how large/dense an image is printed on paper. However, this has no effect on the size it’s displayed on-screen. Likewise, the resolution has no effect on file size. So an 800px by 600px image @ 300ppi will be displayed the same as an 800px by 600px image @ 72dpi — and both will have the same filesize. 

To properly size an image for on-screen use, you need to adjust the image’s pixel dimensions. It is best to work in pixel dimensions, rather than non-screen dimensions (such as inches). 

BEST PRACTICES 

Mostly use the .jpg file format for images on a website. 

For images with solid pixel, transparency or animations use .gif. 

For images with an alpha transparency, use .png. 

Never use .tiff or any other image format for the web. 

ALWAYS name photos/PDF/files according to what they are - Helps in locating photos in the media library and keep images organized.  ie: Photo of a cat = cat.jpg  / Photo referencing something specific = event_2018.jpg

IMAGE WIDTH 

Slider images should be a maximum of 1500px wide. 

IMAGING EDITORS 

Photoshop has a built-in feature called “save for web.” This feature allows you to save the file in one of the three acceptable web formats with different quality presets built-in. 

There are also free alternatives such as Pixlr that can allow you to correct, resize, and optimally save your images for use on your website. 

Pixlr: http://pixlr.com

Befunky: https://www.befunky.com/create/

LEGAL USE OF IMAGES 

Although it is super easy to find images on the internet, that does not mean that you are allowed to legally use these images. Using a standard Google image search, or simply downloading and using images from any random source on the web, can easily land you in legal and financial trouble.

If you don’t have any good original photos of your own, you may want to consider acquiring some stock photography as an alternative to simply "borrowing" images you find on the web. Some of the images do have commercial usage limitations, so please make sure to read the licensing for any image you plan on using. 

Pixabay: https://pixabay.com

Unsplash: https://unsplash.com

Gratisography: http://gratisography.com

PicJumbo: https://picjumbo.com/

Little Visuals: http://littlevisuals.co/

Every Stock Photo: http://www.everystockphoto.com/

Photo Pin: http://photopin.com

New Old Stock: http://nos.twnsnd.co/

Creative Commons Search: https://search.creativecommons.org/

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.