Every website must have images. Images add depth, detail, colour, and meaning to an otherwise uniform website experience. Images highlight your point, draw the eye, funnel leads, and make the difference between one website page and another. When building a website with WordPress, the use of your images is especially important. WordPress makes it easy to use images in an appealing and customisable way. Your business can shape your brand based on the images you choose and how to use them. Let’s look at the WordPress Website Image Best Practices for SEO, Speed and Engagement.
Of course, mastering WordPress image optimisation isn’t automatic. It takes time and practice. Fortunately for you, WordPress is also a well-understood platform with pros at-the-ready to help you build the best possible company website. When it comes to your images, there are already more than a few best practices that you can apply to quickly optimise your images.
WordPress Website Image Best Practices for SEO, Speed and Engagement
The Three Goals of Image Optimisation
- Fast, Attractive Page Loading
- SEO Potential
- Appearance and Unity
You’re aiming for three things when optimising images for your WordPress website. The first is that your images load quickly, in an attractive way. Reduce page-load lag and reduce the amount of time it takes for the image to load on its own. You also want to ensure that as the image does load, it looks good. This is why many brands use the ‘blurry’ method, where an image is blurred while the details load, without that annoying ‘jump’ when an image suddenly inserts itself into a text block.
The next goal is SEO. Optimising the data connected to your images (metadata) allows you to gain more clicks from search results. In fact, with the right image metadata, you could start winning leads from image-searchers, possibly a new demographic for your brand.
The third goal is aesthetics. Not only should your images load correctly and win you a few SEO clicks, but they should also look good to your website visitors. make sure each image looks right, then use a few simple techniques to make all your images look visually unified.
Image Size vs File Size
- Image Size: height and width of the item in pixels
- File Size: number of bits necessary to store, access, or upload the image.
When we talk about the “size” of an image, two types of measurement could be meant. The Image Size designates how visually large the image is, usually measured in pixels. The File Size, however, marks how much space it takes to store or move the image. For example, a simple vector image can be very large in pixel count but very lightweight as a file. In reverse, a high-definition image can be a large file, even if the number of pixels is small.
JPG vs PNG vs SVG
Speaking of file size, let’s talk file types. There are three types of image files that you should use with a WordPress website.
JPGs
The first is JPG. This is a “lossy”, “raster” image type. That makes JPGs (aka jpegs) very lightweight when it comes to file size but also tends toward quality loss. “Lossy” means that when you compress a JPG file, it loses some detail of the images. “Raster” means that the image is made of one layer of coloured pixels. JPGs blur when scaled up and lose detail when scaled down.
PNGs
PNGs are also “raster” images but are larger, more detailed, and much cleaner. PNGs are not “lossy”, meaning they do not lose data when compressed and maintain better quality when expanded. As a result, PNGs are much larger files than JPGs, regardless of the pixel count. PNGs are higher quality and scale better but are heavier on your website and user browsers. PNGs also support transparency where JPGs do not.
SVGs
Then there are SVGs. This new type of image file uses vectors, not raster, to determine the image appearance. This means that the SVG places pixel colours based on a mathematical designation of coordinates. The best way to understand SVGs is with scale. Take an image of a black diagonal line. Zoom In close on a raster image, and you’ll see a saw-tooth of pixels forming the line. Zoom in on the SVG, and your computer will calculate that line again at the current zoom. for every pixel on your screen. No pixelisation and very small, easy-to-save files.
SVGs are great for digital images of layer-coloured pixels. However, SVGs cannot handle photographs and highly detailed or subtle images that can’t be created with the vector coordinate system.
Resizing and Compressing Your Images
When preparing your images for WordPress, remember that you don’t have to use the files as you originally found them. First, you can alter your image file types between one another, especially if you plan to scale. For example, a large (pixels) JPG could be saved as a PNG before scaling down so that your image remains flexible on all screen sizes.
You can make your base image-the one in your database- larger or smaller than the original. You can also compress, making the files smaller using specific methods for reducing the size without losing image quality.
Don’t Be Afraid to Crop
You also don’t have to use the whole image as you found or shot it. If you want a close-up of a person but have them in a portrait with a background, you would crop that photo. Do the same with any website image where it seems appropriate, crop to achieve the aspect ratios you need, and crop to focus on your favourite part of the image. Crop for effect, or crop to convey your message with a smaller, lighter-weight image.
Programmatic Image Sizes
Speaking of image sizes, it’s true that your images may not always be -saved- in size your website page or a user’s browser needs. This means that the website will need to scale images to fit into each page element automatically. Make sure that is programmed into the back-end of your WordPress website in a number of ways.
For example, programmatic image sizes for standard pages like products or blog posts can help your pages to look elegant and uniform. By designating the size of each image, you also make it easier to scale for mobile devices and visually unify your website’s entire design.
Responsive Scaling
Programmatic sizes leads us directly to responsive scaling. Responsive web design focuses on making websites resize themselves for the convenient browsing of phone and tablet users. Those with smaller screens need smaller images, as well. Ensure that your images are prepared and tested for responsive scaling.
This ensures that no matter where or how a user accesses your site, the images will effectively enhance their decision instead of disappearing or blowing off their page margins.
Set Up Browser Image Caching
Image loading is a big deal, especially as brands compete for more-and-more beautiful website designs. How do you provide huge, high-detail images without causing the page to lag every time it’s opened or refreshes? One clever and common answer is browser image caching. With this enabled, visitors to your website will download and store a local version of your big, heavy images that will then load automatically each time they open your website again.
Browser caching takes the weight of serving the image off of your web server and helps clients load your websites faster after the first visit. By offloading the image load to your users, you actually build a stronger long-term relationship with them through snappy website interactions.
Connect to a CDN to Host Your Images
A CDN is a Content Delivery Network. A CDN holds your website’s images on several distributed servers, and when a user accesses the site, those images are loaded from the nearest possible data hub. This way, each image load doesn’t tax your website’s server resources; the images will load faster because they are coming from a closer server.
In other words, you’re hosting your WordPress website images on the cloud. This is exactly how cloud-distributed servers work, put to use for quickly serving website images. You load your images onto the CDN cloud network, which is then served from any server hub within that network to your closest online clients.
Unify Style with Colour Filters and Borders
Don’t just use any image you find or shoot as it comes to you. Just as you can change file types, compress, crop, or re-size your images, you can also alter them to make them look more like a unified collection. Each image has its own subtle colour palette and composition. For example, photos taken in the afternoon look different from those taken in the evening and might not look like the same set.
Unifying a wide collection of images with a subtle colour filter (company colours or a complimentary cool colour) can make all your images look like they were taken in the same shoot. You can also add borders, the same way matching picture frames makes many photos look ‘together’.
All the Right Metadata
Finally, don’t forget your metadata. Metadata is the information that rides along with an image but isn’t the image itself. A file’s name and date of creation are the most basic metadata. You can also add “alt-text”, the tooltip that appears when your mouse hovers over. As it turns out, search engines can read that alt-text. It, along with the image title, is used to guide image searches and to provide SEO data for the page. Alt-text is also used as accessibility for the visually impaired.
So write your metadata accurately, using words that truly describe each image for the best results. Use descriptive titles instead of “image1a5h70”, and write short, helpful alt-text. In addition, or rather subtraction, take out any unnecessary metadata. For example, you can remove things like the date a photo was taken to save a little file space.
Optimising the images for your WordPress website can be easy, but only if you have the best practices memorised and do them without thinking. Don’t worry, you don’t have to become a pro at website design overnight. That’s what we’re for! Here at Pixel Fish, we look forward to helping brands build new WordPress websites or optimise the sites you have. Contact us today to begin your consultation!
Take your business to the next level with a Pixel Fish Website.
Check out some of our latest Website Design projects.
Further Reading:
Tips For Creating A Sitemap For Your Business Website
Read More
5 Ways Your Website Can Add Value to Your Business
Understanding the Importance of Website Maintenance
How to Create a Great First Impression in Business
Harness The Power Of Listening To Your Customers
Why your business needs to embrace WordPress for Web Design
5 Reasons to Regularly Review Your Business Website
SEO Keyword Research
Understanding Website Image File Formats: Which should you use?
How to Build a Perfect E-Commerce Product Page
5 Small Business Social Media Best Practices You Should Know
10 Key Signs That Your WordPress Site is Hosting Malware
5 Steps on How to Optimise Your Website Images for Online Success
