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 best 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 500KB, with most smaller web graphics showing up at 100KB or less. Only a very large image like a full-screen background should be anything close to 1MB, but again, small as possible is best.
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. Other images should be saved in the size they'll display on the website, so an image displayed at 200 pixels wide should not be saved at 2000 pixels 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/
PicRezsize: https://picresize.com/
LEGAL USE OF IMAGES
Although it is 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
Pexels: https://www.pexels.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/