Help Hub

Home » Help Hub » Images and Visuals

Images and Visuals

While you don’t want to overwhelm people with visual designs, videos, animations, and pictures, a few images and visuals are great for your website. Keep in mind the following guidelines:

  • Use JPg or PNG formats. Delivery them as WebP formats (quality servers can convert this for you free of charge).
  • Use JPG for photos/pictures and PNG for logos or text-rich images.
  • Avoid using text on images whenever possible. It’s best practice to use plain images with text overlays designed in HTML.
  • Logos in headers should be no taller than 125px, but usually are 75px or 90px in height.
  • Keep images less than 100kb for large sizes and less than 50kb for small sizes. Use larger images (up to 200kb) sparingly.
  • Large images should be no larger than 1440px in width, but usually less than 900px in width (unless looking to be on Google Discover, then width=1200 to 1440px).
  • Most images (such as those within content) should be less than 600px in width.
  • Edit the image to the exact size that will be used on the page.
  • Use an external video hosting service (i.e. YouTube or Vimeo).
  • Use pop-up or video view pages rather than direct embed.
  • Defer the loading. If you directly embed video on a webpage, use an image placeholder so the video doesn’t load with the page.
  • Use lazy loading for images and videos.