Best Practices for Using Images on Websites: Optimising for Performance and SEO
Images are essential for creating visually appealing and engaging websites. However, improper use of images can negatively impact page loading times and search engine optimisation (SEO). By following best practices, you can maintain an attractive design while ensuring your site is fast and optimized for search engines.
Choose the Right Image Format
Selecting the right file format is crucial for balancing quality and file size:
- JPEG: Best for photographs and images with many colors.
- PNG: Ideal for images requiring transparency.
- SVG: Perfect for icons, logos, and simple illustrations.
- WebP: Offers high-quality compression for both photos and graphics, reducing file size significantly.
Compress Images Without Sacrificing Quality
Compression reduces image file sizes, improving loading times without noticeably affecting quality.
Tools like Imagify, ShortPixel, TinyPNG, PhotoShop and many others can help with ensuring your images are web optmised.
Add Descriptive Alt Text
Descriptive alt text improves accessibility and helps search engines understand the content of the image. Ensure the alt text is relevant to the image and context.
Name Image Files Properly
Use descriptive, keyword-rich filenames rather than generic names like image123.jpg.
For example, use image-banner-home-teamphoto.jpg instead of img01.jpg
Standard Image Sizes, File Sizes, and Use Cases
Understanding common image dimensions and file size recommendations helps ensure proper display without unnecessary resizing or distortion:
Website Banners and Hero Images:
- Typically between 1200×600 px to 1920×1080 px with recommended file sizes under 200-500 KB.
Thumbnails:
- Commonly around 150×150 px to 300×300 px with file sizes between 50-150 KB.
Blog Post Images:
- Recommended size is 800×600 px or larger depending on layout, keeping file sizes under 200 KB.
Icons:
- Usually around 32×32 px, 64×64 px, or 128×128 px with file sizes ideally under 50 KB.
Social Media Platforms:
- Facebook: Cover photo (820×312 px, under 150 KB), shared image (1200×630 px, under 200 KB).
- Instagram: Square posts (1080×1080 px, under 500 KB), portrait (1080×1350 px, under 500 KB).
- Twitter: Header image (1500×500 px, under 300 KB), shared image (1200×675 px, under 250 KB).
- LinkedIn: Banner image (1584×396 px, under 200 KB), post image (1200×627 px, under 250 KB).
Avoid Storing Unused Images
Over time, WordPress sites accumulate a large number of unused or redundant images, which can take up unnecessary storage space, slow down website backups, and affect performance. Here’s how you can efficiently manage and clean up unused images in your WordPress Media Library.
Why Removing Unused Images is Important:
- Improves Performance: Reducing the number of images decreases database load and server storage use.
- Faster Backups & Restores: Large media libraries slow down backups, making it harder to restore your website.
- Better Organization: A clutter-free media library makes it easier to find relevant images when you need them.
- Reduces Hosting Costs: If your hosting provider charges based on storage usage, reducing unnecessary images can save costs.
If you’re unsure whether an image is still needed, consider moving it to a temporary archive:
- Download and save old images to a local folder or cloud storage.
- Delete them from WordPress.
- Monitor your site for any missing images before permanently deleting them.