WordPress How To: Website Image Tips
Reading Time: 8 minutes 
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 run across otherwise professional and legitimate business websites that use crummy clip art. For those in the back — clip art looks tacky and unprofessional.
I also notice sites with no understanding of the variables involved in integrating photographic images into their themes. The photos are of poor quality, improperly sized, or orientated.
Since this is a visual medium, we need to take our choice of graphics and photos very seriously by correctly choosing wisely and formatting 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 note what size images should be used in specific areas for the best results.
These areas are the top of the homepage hero graphics, sliders, featured areas, top of the post, featured post images, etc. Then when choosing your images — you want to 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—no need to upload images any larger than we need.
Outside of theme-specific dimensions, for example, the homepage hero image, images never need to be larger than 1000 x 1000px. 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 and plugins is critical to creating a polished presentation.
Image Formats
There are three 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 .jpg and/or .png. 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 was so spot on apropos to the topic at hand that it enhanced my post rather than distracted from it.
.PNG is the best of both worlds—excellent photo-level resolution — for smaller files. In addition, you can have 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 and worth a look. WebP offers much better compression than PNG or JPEG, supporting higher color depths, animated frames, and transparency.
Photos/graphic file sizes are a huge factor in how fast your site loads. Therefore, your primary goal should be to have the best-looking graphics with the smallest file size.
You can play around to find the format that offers the best-looking image (JPG vs. PNG, for example) 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 big money on high-resolution photos. High resolution is required for print media but not online. Photo sites will offer low-resolution versions, which are not suitable for print or offline use but are exactly 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 at 1024×768 resolution. If you don’t know how — learn. Your camera need not be set unnecessarily at thousands of pixels for photos, with colossal file sizes just to be used on your site.
Higher resolutions only make the file and physical size larger than 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 the Megs (2M) vs. Ks (100K), resize and compress.
Resize Carefully
When physically resizing photos, keep in mind that you can always reduce a photographic image’s size (1000 x 1000 down to 500 x 500) but cannot increase in size from the original size (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 have gallery sliders on the homepage that provides the opportunity to have a representative photo of a few featured posts or pages. While these galleries are very cool looking (I call them “eye-candy”), putting photos in that space with poor resolution or not the correct 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, or you will not have the same elegant effect the gallery is meant to relay. How?
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 1000 pixels in width by 400 pixels in height, you must use a graphic that looks great in that specific size. Do not deviate.
Copyright Matters
Make sure you have the right to use the photos you select. Just because you can right-click/save doesn’t mean you can use any graphic you find online. Likewise, just because you can view photos in Google’s image search engine does not mean they are yours to take and use.
Big image houses now have teams of attorneys who do nothing but hunt down copyright infringers and levy considerable fines for illegal 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 that 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 remedy.
Graphic Compression Tools
I’ve mentioned several times about images slowing your site. Once you get your images to the correct size, further compression can make those file sizes even smaller. Here are some tools to consider:
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 and 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 just the right image that relays 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, making sure you are uploading quality, adequately sized, and formatted photos and graphics in the first place is what will really make your site zippy and visually stunning.
At your service,
