Website Images - Best Practices
Adding images to your WordPress media library is easy, but there are some best practices to keep in mind when selecting images for your website.
- Use .jpg files for images. GIF files do not hold enough information and tend to look pixelated. PNG files are generally larger (in terms of file size) than a JPG file of the same dimensions, which can affect the performance of your site. PNG files may be used if transparency is required in the image.
- The largest dimensions that an image should be are 2000 X 1200 pixels. Only images used for full-width header backgrounds should be this large; all others should be the dimensions they will be used on the page where they are added. For example, if you need an image that will only take up 500 X 500 pixels on a webpage, only use a 500 X 500 pixel .jpg file. Anything larger will cause your page to load more slowly and occupy more space in your media library.
- Don't upload images with filenames with periods or hyphens in the title. This can cause data problems. The only period in an image file should be before the .jpg itself.
Example: "filename.jpg" - Avoid uploading files with excessively long names. Extra-long file names, when combined with the image path, can exceed character limits, causing 404 errors. Try to keep file names below 56 characters, including the period and extension.
NOTE: Try to make the titles of your images match the content of the image. For example, if the image you are using is of Pounce in Hurt Park, change the image title to something like "pounce-in-hurt-park.jpg". This will keep the title short and help in SEO. - Don't upload any unshrunken screenshots to WordPress. If you need to add a screenshot to your site, take the screenshot and then shrink it to the actual size that you will need it to be on your site. Don't forget to change its name to something more concise and descriptive.
For example, change "Screen Shot 2024-11-30 at 4.17.21 PM.jpg" to "homepagescreen.jpg". - Don't upload files larger than 300 KB. You should compress your files before uploading them. Even 2000 x 1200-pixel .jpg files should be no larger than 300 KB. Anything larger will cause your page to load more slowly and occupy more space in your media library.
- Marquee images should be 16:9 ratio. Profile images should be square with a minimum size of 300 X 300.
- Alt text is required for images that are not simply decorative.
Alt text is a short written description added to an HTML image (alt="alt text goes here") that explains the image’s content for users who rely on screen readers or when the image cannot be displayed.To read more about whether your image requires alt text, read our article Does my image require alt text?
You can add alt text to images by going to the media library. Select the picture you'd like to use on your website, then add a quick description to the alt text section.
The website https://www.iloveimg.com/ is an excellent resource for resizing and compressing images.
Keywords: website images, wordpress media library, best practices, jpg files, png files, image optimization, image dimensions, seo, alt text, file size, image compression, website performance, file naming, screenshot resizing, 508 compliance, marquee images, profile images, wordpress best practices, media library management, decorative, informative