Home » The Blog » WordPress » WordPress How To: Website Image Tips

WordPress How To: Website Image Tips

Your choice of website images reflect on your credibility and trust factors.

The quality of the photos you use on your WordPress site can either enhance or detract from not only how your site displays but whether visitors perceive your business as tech-savvy and credible. The fact is that visual quality matters.

All too often, I 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.

Being this is a visual medium, we need to take our choice of graphics and photos very seriously by 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 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.

In general, outside of theme-specific dimensions, for example, the homepage hero image, images never need to be larger than around 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. 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 files 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, having the best-looking graphics with the smallest file size should be your primary goal.

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.

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 you low-resolution versions, which are not suitable for print or off-line 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 to use on your site is not necessary. Only buy higher resolutions if you need a larger physically sized image or also intend to use off-line.

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 gargantuan 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 it comes to physically resizing photos, keep in mind 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 loss of resolution and a blurry image. And with every “save,” the file quality will degrade.


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 are 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?

  • Using vertically tall graphics when the gallery uses horizontally aligned images will cause images to be cropped.
  • Use smaller graphics, and they won’t fill the space.
  • Integrate larger than needed graphics, and the result may be skewed or blurry.
  • Use the wrong size, and you have whitespace where you shouldn’t.

Once you know the size of the space that an image will display in, 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 that is 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.

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 that 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.

Ignorance of copyright law will not be a valid excuse to avoid any penalties. Not knowing who to ask or who to 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.

  • When you find a graphic you would like to use on your site, you must ask the creator or site owner.
  • If you do not get an answer — do not use the graphic.
  • Are you unsure if the graphic or photo is free and clear for you to use? Do not use it.

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 files 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 included. Add text, manipulate, 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, it’s many little things that all add up to how your website gets ranked. Images are part of that.

  • Physical size no larger than needed to display to not hinder performance.
  • Named to be representative of where and why they are used — with a keyphrase.
  • Accurate Alt and Title tags are completed in your Media Library so that those are included in the code when images are inserted.

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,

Judith: WordPress Consultant and Business Coach