Here are a few guidlines for image naming and sizing. This will help your site have a better presence on the web in the long run.
- Keep original images in their own folder.
- Create folders for copies of the originals.
- The copies will have names and a smaller size.
- Choose a relevant name for the image. Use terms that are searchable.
- Names can have up to 6 words, keep it relevant
Amazon-Colibri-cloudforest-endangered-flora -
- notice only Amazon and Colibri are capitalized
- Avoid using articles
a, an, the, it - Capitalize word only when necessary
- Never use all caps
- Use dashes
-instead of underscores_
Image sizes affect loading times. Loading times are important for Users of the site and SEO. The faster the site, the easier it is to visit and the quicker the site becomes indexed. This will make it show up at the top of relevant searches. Images can have a huge impact on how long a page takes to load. When an image is very large 2200px X 2000px, yet displayed on the site very small 110px X 100px, the entire image still has to be loaded. Images also affect weather a crawler or web librarian will catagorize the site based on relevancy. If the image is too large - it will be ignored and the site's relevancy will be lowered.
- Remember to save a copy of the original image before cropping
- Create a system where the cropped image can easily correlate with the original image
-
- (i.e. the original images folder contains a 'Cropped' folder)
- Crop images to span the whole page such as headers at 1200px 200 resolution
- Make sure icon and line art images are not larger than 1200px
-
- Line art and text images need to be vectored - more on this will be added later
- Crop images to 1200px width and 200 resolution at the same time in Photoshop
- Do not crop the images at 1200px and then change the resolution, it needs to be done at the same time to avoid image loss
-
- later I will add better details on how to 'Save for Web' in Photoshop.
File > Save for Web
Save for web in Photoshop is a nifty feature that allows images to be saved with a better size and quality while retaining a decent looking image on the web. It does this by reducing the quality and stripping out unnecessary metadata.
For logo images or small line drawings, GIF or PNG are better choices because they are lossless, which means they do not loose visual quality when the size is changed.
JPEG is a lossy format. The compression process removes visual details of the image.
- Logo images and line drawings should be GIF or PNG
- Logos, line drawings and images with text need to be vector images - Use InDesign to vectorize
- Use RGB color and not CMYK
example line image:
The following sites can be used to test how images are doing on your site.
| Name | Purpose | SITE |
|---|---|---|
| Web Speed Test | Website Speed Test Image Analysis Tool | https://webspeedtest.cloudinary.com/ |
| GiftOfSpeed | Image Optimization Test | https://www.giftofspeed.com/image-delivery/ |
| Pingdom Website Speed Test | Website Speed Test | https://tools.pingdom.com/ |