Web Image Upload Requirements

Owned by
Faith Bakewell (Deactivated)
Last updated: Mar 02, 2023
2 min read

Preferred Image Format 

  • PNG: Produces better quality images but comes with larger file size. Usually better for graphics with fewer than 16 colors. PNGs are also used for images with clear backgrounds and are good for vector images.  

  • JPEG: May lose image quality, but can adjust the quality level to find a good balance. Usually better for photographs. 

  • Other formats allowed: BMP, GIF, WebP, SVG 

 

Image Compression 

  • Non-WordPress CMS: Photoshop, Squoosh 

  • WordPress CMS: Smush 

 

Image Size 

  • 100 KB (100,000 bytes) is the recommended image size for the web  

  • Larger image sizes can slow down the load time of the page which negatively impacts SEO 

  • If the page takes longer to load, a user is more likely to bounce and go to a competitor site that does not take long to load.   

 

Image File Name Customization 

  • Image file names alert search engine crawlers to the subject matter of the image 

  • Create descriptive image file names to improve the SEO value  

 

Image Alt-Text/Alt-Tags 

  • Alt-tags are a text alternative used to describe the contents of an image file when a browser can’t properly render the image 

  • Alt-text is required for ADA compliance for individuals who are unable to see images 

  • The alt-text can act as the anchor text of an internal link when the image links to a different page on the site.  

 

Image User Experience 

  • Don’t embed text inside images, especially important text elements like page headings and menu items. Not all users can access them so keep text in HTML to comply with ADA. 

  • Make sure that visual content is relevant to the topic of the page  

  • Whenever possible, place images near relevant text 

  • Consider placing the most important image near the top of the page 

 

Image CSS Sprites 

  • Use CSS Sprites to create a template for images that are used frequently on your sites like buttons and icons.  

  • CSS Sprites combine your images into one large image that loads all at once (which means fewer HTTP requests) and then display only the sections you want to show. This means you are saving load time by not making users wait for multiple images to load 

 

Image URLs 

  • Create a good URL structure for your images as Google uses the URL path as well as the file name to help it understand your images.  

 

Image Structured Data 

  • Google images can display your web images as rich results which give users relevant information about your web page and can drive better-targeted traffic to your site. Google images supports structured data for: 

 

Additional Resources