Go faster! Be more engaging! Our never-ending quest to enhance our WordPress website’s user experience invariably takes us to the images. This is part of our Plan Your WordPress Site series because it’s best to get out in front of how images will be used by creating a guide.

Choose a “Look & Feel” for your WordPress Images

Broadly speaking, you should have a strategy for how for how images will compliment your WordPress blog posts, products, static pages, etc. A strategy will help you identify what your goals are and give you a consistent appearance.

wordpress-images_trumaniType: I often use vectors because I can use my website’s colors scheme and they are often smaller, but I have to be careful to break them up with photos so that my home page banner in particular isn’t awash in purples, blue and pink. I’m also cognizant that changing my WordPress website’s color scheme will mean that most of my images won’t match.

Frequency: I will deploy about 2-3 images for a post or product depending on the breadth and depth of the content. One image will be featured in landscape for blogs, square or portrait for products. One or two supporting images will be added within the paragraph text or gallery to further contextualize the content.

Naming: I try to insert the title of my WordPress website into the name of my product images. I separate name components (e.g. website title, product name, post name, post idea) with underscores and the words within each component with dashes so that there are no spaces. I then copy that name into the alt text field for improved UX and SEO.

Behavior: You may see a means of increasing internal link counts by linking your images to other relevant content. Or you may have a need for a lightbox effect where users can see a zoomed in version. Unlike us, perhaps you have a fun WordPress site that should employ animations like fade in, swipe left, etc. Here’s a video tutorial that adds a simple image hover effect for the Divi Builder.

Choose a Size

Before I upload my photo, I use a quick and dirty client application like PhotoScape to resize and crop my image. I have thresholds for size in pixels and Bytes. My images are for a WordPress site, not to print as a poster. For me, they shouldn’t exceed 1080 pixels and 500KBs for featured images and 500 pixels and 100KBs for supporting images.

When you upload a photo, WordPress creates several variants, such as a thumbnail. I only use the full-size version because I know the size I want before I upload the photo. If you do select a variant like thumbnail and insert it into your editor for example, be careful not to then enlarge the photo because the quality has been reduced and the image will become pixelated.

Choose a Compression Service

Appropriately sized and compressed can considerably reduce your page bloat. There are merits to both using a web service or a WordPress plugin. My preference is to upload my photos to a service called TinyPNG. It’s free because my photos never exceed 5MBs and I only upload a few at time and I can upload JPGs on the same page. I can’t tell a difference in pixel quality between the original and the lossy compressed version.

A WordPress image compression plugin on the other hand will is likely to cost you a monthly fee, even if it starts out free. On the upside, you save a step because you don’t need to upload/download the image using the free service first. These plugins are great for people who have a bunch of images they’re uploading. But I like to be as lean as I can. I only upload a few photos a week and I try to avoid adding more and more plugins when I can achieve the desired result another way.

Put it all together and you have an effective process for adding images to your WordPress site.