Whether you’re an experienced WordPress website designer, or you’re just starting, you probably have some experience with images. From choosing or creating the right one to loading it into your media gallery to placing it into your theme, builder, or code, it can be a tricky business. Images are not just important; they’re essential.
A website is nothing without high-quality, compelling images to keep visitors engaged and to keep the aesthetic flow of your web design moving, but it goes beyond that. Pictures can also affect website loading speed, search engine optimization (SEO), and speak volumes about company brand, in both positive and negative ways.
You cannot take this seriously enough; it’s that important.
Website Loading Speed
There are few things in this world as infuriating as a slow website. This is a part of website maintenance that too many people overlook, to their detriment. The entire digital landscape would be completely different if major companies and experienced website designers didn’t make this a priority. Can you imagine using Google, typing in your search criteria, and waiting two minutes for the results to pop up? No, because that would never happen. Google couldn’t survive if their load times were that slow. Beyond that, Google prioritizes load speeds and ranks faster sites higher on search engine results.
Images play a large part in that, because to house all those pixels, image files are large. Most of the time, they’re too large. The trick comes in finding the balance. You need a file size and picture quality that isn’t so big that it slows down your website, but also isn’t so small that the picture becomes blurry or grainy.
Don’t worry. There are many options for optimizing your images, so they don’t slow down your website.
Image Compression and Optimal Sizes
Image compression is the first step. Whether you’re buying stock images online, using the countless license-free online tools, or creating the images yourself, you’ll need to adjust the size. This could be as simple as popping them into Adobe Photoshop and decreasing the image size. If you don’t have Photoshop, there are plenty of other tools you can use.
Other editing tools include:
- Inkscape (a free software that allows you to do a lot of editing, including creating vector images).
- Gimp (another free software that allows you to edit photos, coloring, saturation, and contrast, as well as decreasing file size).
- Canva (a free online image editor with a lot of power).
- Phone Apps (like Snapseed or PIXLR, which pack quite a punch.
- And many, many more.
The options aren’t limited to just what you can do on your devices. WordPress also has plugins you can download, free and purchased, that compress all of the images on your website for you. Plugins like reSmush.it or WP Smush are just a couple of options at your disposal.
Of course, once you know how you’re going to compress your images, you need to know how far to shrink them. In general, the rule is to try to keep your image sizes as small as possible, preferably under 70 kb. That can be near impossible, though, for larger, full-screen images. So, for best practices, you’ll want to follow this guide.
Blog/Featured Images – 1200 x 630 pixels
Full-Screen Images – 2800 x 1200 pixels
Landscape/Portrait Images – 900 x 1200 pixels or 1200 x 900 pixels, depending on orientation.
Large Square Images – 1024 x 1024 pixels
Medium Square Images – 300 x 300 pixels
Thumbnails – 150 x 150 pixels
Image File Formats
We can go a step further, though, in ensuring that your image sizes are small by choosing the correct file format for your images. The three most popular file formats are PNG, JPEG, and GIF. PNG has become an increasingly popular alternative to GIF, as the resolution is very high, but file size is large. JPEG is a file format that maintains a lot of the original color and serves as a safe bet, but this format isn’t compatible with vector images. Lastly, GIF is a file format you should use for more simple images, like icons and thumbnails.
Regardless of what you’re doing, it is incredibly important to choose the right file format for both aesthetic reasons and file size.
Naming Your Images
You can’t talk about image optimization without talking about naming your files. The best option is to go with something short, descriptive, and to the point. If you can use a search engine keyword in your file name, that also helps, as it will provide a little more juice for search engine optimization.
Then, of course, there are meta tags and meta descriptions, which are similar, but have a lot of power and allow you to use multiple keywords. These are super important when talking about SEO because the correct tags can provide a huge boost and help you rank better in search engines.
Choosing the Right Image
Last, you always need to think about your brand. Whenever you’re choosing or creating an image for your WordPress website, ask yourself: does this image represent my company, my brand, and/or the section, product, or service I’m discussing? A picture tells a thousand words, but are those your words?
Of course, this brings up another critical point. Don’t just throw images into your website, especially decorative images, without giving it a few rounds of thought. They can be aesthetically pleasing, but can also bloat your site, and hurt your website loading speed. Choose your website images wisely.
Images Can Make or Break Your Website
These are just a few ways to optimize your images for your WordPress website, but this is absolutely essential for anyone with an online presence. Like we’ve said, it not only helps with website loading speeds, it also helps with brand identity and search engine optimization. Don’t allow this often overlooked aspect of web design become the thorn in your website’s side.
Marla DiCarlo is an accomplished business consultant with more than 28 years of professional accounting experience. As co-owner and CEO of Raincatcher, she helps business owners learn how to sell a business to get paid the maximum value for their company.
