The Front-End
SEO
Images

Images

The loading speed of videos and images varies significantly depending on the type of device, network connection, and location.

Resolution

Use images with a resolution that matches their display size on the website. For example, if an image is displayed at a maximum of 300 pixels wide, the source image does not need to be larger than 300 pixels wide. Some examples:

  • Thumbnails: 150x150 pixels
  • Hero images: 1920x1080 pixels

File Size

Keep image file sizes under 100 KB whenever possible. For larger images like hero images, try to keep them under 500 KB. Compression and using modern formats like WebP can help reduce file size without quality loss.

  • Small resolution images: File size < 100 KB
  • Large resolution images: File size < 500 KB

Use .png or .webp formats.

Compressing Images: Use Compress JPEG (opens in a new tab) to compress jpeg, jpg, png, gif, and pdf files or to convert these extensions to .webp.

Alt-Text

Good alt text accurately and concisely describes the content and context of the image so that it is understandable to people using visual aids. Avoid unnecessary words and use relevant keywords without overdoing it. Google considers this for both accessibility and SEO.

KeywordsVideo's