WordPress How To: Website Image Tips
Reading Time: 8 minutes 
Images: Quality Over Quantity
The quality of the photos you use on your WordPress site can either enhance or detract from how your site displays and whether visitors perceive your business as tech-savvy and credible. The fact is that visual quality matters.
I often come across otherwise professional and legitimate business websites that use subpar clip art or low-resolution images. For those in the back — clip art looks tacky and unprofessional.
I also notice sites that lack an understanding of the variables involved in integrating photographic images into their themes. The photos are of poor quality, improperly sized, or oriented.
Since this is a visual medium, we need to take our choice of graphics and photos very seriously, making wise choices and formatting them correctly. You should use knowledge and forethought before integrating any images into your website.
Here are a few tips you need to consider and implement to ensure your WordPress site remains visually appealing.
WordPress Photo and Graphic Tips
Determine Theme Image Sizes
Once you decide on a theme for your site, one of the first things you want to do is understand the size of the images you need to use in the various widgetized areas. Every theme’s documentation will specify the recommended image sizes for use in specific areas for optimal results.
These areas include the top of the homepage hero graphics, sliders, featured areas, top of the post, featured post images, and more. Then, when choosing your photos, use those exact sizes. Consistently.
Once you choose your images, you need to resize them to the specified dimensions before uploading them to WordPress. Images are one of the primary resource hogs that slow down websites—there’s no need to upload images any larger than necessary.
Outside of theme-specific dimensions, for example, the homepage hero image, images must be the exact size specified to achieve the desired look, which is why you purchased that theme. Exceptions would be detailed diagrams and specs of product details where larger sizes are necessary.
Learning how to resize photos to the correct size on your website is critical to creating a polished presentation.
Image Formats
There are several formats you will use for website images. The rule of thumb is that animations and drawn images, such as logos, can be .gif. Photographic images are always in .jpg and/or .png formats. If you stick to these formats, you’ll have the best results.
.JPG is best for photographic images.
.GIF works for small animations, drawn logos, icons, or images without gradients. You can have a transparent background if needed.
NO CLIP ART: We want quality images. Stay away from cheesy clip-art graphics. I have used clip art — but that is the rare exception, not the rule. I will only use clip-art when the image is so spot on apropos to the topic at hand that it enhances my post rather than distracts from it.
.PNG is the best of both worlds—excellent photo-level resolution—for smaller files. Additionally, you can choose a colored or transparent background if needed. Add styles such as drop shadows to text, and PNG is the way to go. But PNGs tend to have larger file sizes, so be aware of that.
A Few More…
.SVG (Scalable Vector Graphic) is used primarily for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes.
.WEBP stands for Web Picture format and is increasingly supported, making it worth a look. WebP offers much better compression than PNG or JPEG, supporting higher color depths, animated frames, and transparency.
Photo and graphic file sizes are a significant factor in determining how quickly your site loads. Therefore, your primary goal should be to have the best-looking graphics with the smallest file size.
You can experiment to find the format that produces the best-looking image (e.g., JPG vs. PNG) with the smallest file size. In addition, graphic programs allow you to set the level of resolution quality — which, of course, will increase or decrease the file size.
Pro Tip: Check out Adobe’s Free Image Background Remover.
Online Resolution
You do not need to spend a lot of money on high-resolution photos. High resolution is required for print media, but not for online media. Photo sites will offer low-resolution versions, which are not suitable for print or offline use but are precisely what you can use on your site.
Low-res photos are also the least expensive. Paying big bucks for high-resolution images on your site is unnecessary. Only buy higher resolutions if you need a larger, physically sized image or intend to use it offline.
CAMERA RESOLUTION: When using your digital camera to take photos for your website, set it to a resolution of 1024×768. If you don’t know how — learn. Your camera does not need to be set unnecessarily at thousands of pixels for photos, with colossal file sizes, just to be used on your site.
Higher resolutions only increase the file size and physical size beyond what is needed for online use. Humongous file sizes also unnecessarily use server resources when photos are not resized to a reasonable size. If your files are in megabytes (2M) vs. kilobytes (100K), resize and compress them. More on that later.
Resize Carefully
When physically resizing photos, keep in mind that you can always reduce a photographic image’s size (e.g., 1000 x 1000 down to 500 x 500), but you cannot increase its size from the original size (e.g., 250 x 250 to 750 x 750). So, you can go smaller—but not larger.
Increasing a photo’s size from the original size results in a loss of resolution and a blurry image. And with every “save,” the file quality will degrade.
Yuck!
Homepage Sliders
Many Premium WordPress themes feature gallery sliders on the homepage, providing an opportunity to showcase a representative photo of a few featured posts or pages. While these galleries are visually appealing (I call them “eye-candy”), placing pictures in that space with poor resolution or the incorrect physical size for the gallery can leave a less-than-stellar impression.
Themes that use galleries will document precisely what size looks best in that space. Of course, you want to follow that lead; otherwise, you will not achieve the same elegant effect that the gallery is meant to convey. How do you ensure success?
Once you know the size of the space that an image will display, only use photos that you know will look good in that size and are of the same orientation.
So, for example, if you have a gallery set to display at 800 pixels in width by 300 pixels in height, you must use a graphic that looks great in that specific size. Do not deviate.
Copyright Matters
Ensure you have the necessary rights to use the selected photos. Just because you can right-click/save doesn’t mean you can use any graphic you find online. Likewise, just because you can view pictures in Google’s image search engine does not mean they are yours to take and use.
Large image houses now have teams of attorneys who specialize in tracking down copyright infringers and levying substantial fines for the unauthorized use of their images. You don’t want to wake up one morning with an email demanding past residuals ($$$) for using a photo you used illegally, for which you will be obligated to pay.
Ignoring copyright law will not be a valid excuse to avoid penalties. Not knowing who to ask or contact to use the graphic and then posting to your site anyway does not release you from this responsibility. Take my word for it — copyright Infringement is not something you want to have to deal with.
Graphic Compression Tools
I’ve mentioned several times that images slow down your site. Once you have resized your images to the correct size, further compression can reduce their file sizes even further. Here are some tools to consider: https://www.theistudio.com/shortpixel
Graphic Tutorials
Here are a few sites to help you hone your graphic resampling skills:
Notice the images on this site? I don’t use a complicated graphic program. I use Canva—images and tools to make your site look professional. Hundreds of fonts, thousands of images, and accents are included. Add text, manipulate, and effects. Plus, you can easily resize any website images for the correct social media sizes and presentations—I ♡ Canva.
Images and SEO
If you’ve read anything about search engine optimization, many little things add up to how your website gets ranked. Images are part of that.
A Word About Image Choices
Taking the time to choose or create the just-right image that conveys the intent and meaning of your content is as important as everything else. Rarely will just any image do. Your images should relate to the topic at hand and represent what you are sharing with your reader.
Yes, it is easy to upload images to your WordPress media library. However, ensuring that you upload quality, adequately sized, and properly formatted photos and graphics in the first place is what will really make your site look zippy and visually stunning.
At your service,
