| ... | ... | @@ -88,3 +88,24 @@ If you use commercial photos, be sure that you have the appropriate rights and l |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Optimizing Images for Web**
|
|
|
|
|
|
|
|
|
|
|
|
If your image sizes are too large, your page will load more slowly, which can hurt your Search Engine Optimization (SEO) ranking, particularly if your page isn’t optimized for mobile. If your page loads too slowly, your customer’s experience will also be hurt. Be sure to optimize your site’s images: they should be the smallest possible file size that maintains high quality (e.g. without pixelation or compression artifacts).
|
|
|
|
Optimization Checklist
|
|
|
|
|
|
|
|
**Do**
|
|
|
|
- Remove any unneeded images
|
|
|
|
- Include keyword optimized alternative (Alt) text. Be sure your description is meaningful and clear
|
|
|
|
- Ensure appropriate color contrast particularly for charts or graphs
|
|
|
|
- Use SVGs for vector images to reduce file size and avoid pixelation, especially for logos and icons
|
|
|
|
- Use PNGs and JPEGs for rasterized images (e.g., photographs)
|
|
|
|
- Use two different versions of the same image for mobile and desktop; a smaller image for mobile, and a larger image for desktop (this will allow mobile pages to load more quickly)
|
|
|
|
- Compress images to the smallest possible file size while maintaining image quality
|
|
|
|
|
|
|
|
**Don't**
|
|
|
|
- Don’t use low resolution and blurry images
|
|
|
|
- Don’t use oversized images
|
|
|
|
- Don’t allow images to be “squished” horizontally or vertically. Maintain the image’s original proportions
|
|
|
|
- Don’t use color alone to convey meaning, particularly for charts or graphs (please be mindful of end users who are visually challenged)
|
|
|
|
- Don’t use fast flickering or flashing images |
|
|
\ No newline at end of file |
