Best Practices for Images
First Step when Adding an Image
The first step is to search the media library to see if a suitable image already exists. This will save space and will keep the site from having duplicate images. We are actively adding titles and alt text to images in the media library to make them more searchable.
The primary goal of formatting your images is to find the balance between the lowest file size and acceptable quality. There is more than one way to perform almost all of these optimizations. One of the most popular ways is to simply compress them before uploading to WordPress. Usually, this can be done in a tool like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins.
The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.
As a general rule, If your image is packed with colors and has different textures and gradients, save it as a JPEG. If it’s a logo, text, or has flat colors, save it as a PNG.
Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:
- JPEG – Best for photos: uses lossy and lossless. You can adjust the quality level for a good balance of quality and file size. Compatible with all browsers.
- GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression. Compatible with all browsers.
- PNG – Best for graphics: produces higher quality images, but also has a larger file size. PNGs are capable of a transparent background. This format was created as a lossless image format, although it can also be lossy. Using PNG-8 for most graphics will produce a small file with great results in quality. Compatible with all browsers.
- WebP – employing both lossy and lossless compression. It is currently developed by Google and is capable of a transparent background. open standard for lossy compressed true-color graphics on the web, producing smaller files of comparable image quality to the older JPEG scheme. Compatible with modern browsers.
WordPress Image Dimensions
The predetermined image sizes that WordPress uses are:
- Thumbnail size (150px square)
- Medium size (maximum 300px width and height)
- Large size (maximum 1024px width and height)
- Full size (full/original image size you uploaded)
Recommended Max Image Sizes for WordPress Content
If you decide that the image sizes WordPress automatically generates when uploading new media don’t fit with what you need, here are some recommended sizes for content to look at its best on any device.
- Blog posts: 1200 x 630px or smaller
- Hero images (full screen images): 2880 x 1500px
- Landscape feature image: 900 x 1200px
- Portrait feature image: 1200 x 900
- Fullscreen slideshow: 2800 x 1500px
- Gallery images: 1500px x auto width
Recommended File Sizes
It’s a great practice to keep file sizes to a minimum. This can alleviate strain on your server and speed the loading of your page. Web optimized images should be reduced to under 1 MB and as a general rule 500 Kbs or less for most images unless you are using a CDN (content delivery network).
Wether you’re on a PC or a Mac, here are some ways to resize your images.
Each image should have an alt text. Not just for SEO purposes, but also because blind and visually impaired people won’t otherwise know what the image is about. A title attribute is not required, but will show as hover text and is used to search for images in the WordPress database. Therefore, it is best practice for images that may be reused by others, to include the alt text and the title text. These fields can be identical. Here is an article on image tagging.
These are external links to some great references.