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 use images in appealing and customisable way. Your business can shape your brand based on the images you choose and how to use them.
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
There are three things you're aiming for 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. By optimising the data connected to your images (metadata) you can then 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, it should also look good for 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, there are two types of measurement that 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. A simple vector image can, for example, be very large in pixel-count but very lightweight as a file. In the 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.
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 are also "raster" images, but they 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, no matter what the pixel count may be. PNGs are higher quality and scale better, but are heavier on your website and user browsers. PNGs also support transparency where JPGs do not.
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. A large (pixels) JPG, for example, 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 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 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, 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 the size that your website page or a user's browser -needs-. This means that the website will need to automatically scale images to fit into each page element. 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 to visually unify the entire design of your website.
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 brand 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 the images of your website 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 and, on top of that, 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 it's own subtle colour palette and composition. For example, photos taken in the afternoon look different from photos taken in the evening, and they might not look like the same set.
To unify a wide collection of images with a subtle colour-filter (company colours or a complimentary cool colour) can make all your images look as if 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 hen 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 best results. Use descriptive titles instead of "image1a5h70", and write short, helpful alt-text. In addition, or rather subtraction, take out any unnecessary metadata. You can remove things like the data a photo was taken, for example, 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!
Tips For Creating A Sitemap For Your Business Website