How Smush Is Saving The Planet One Image At A Time

Is the Internet’s skyrocketing carbon footprint (yep, it exists) a cause for concern? Can a simple image optimization plugin really help reduce carbon emissions? All is unveiled below.

Truth be told, I was terrified to write and publish this post.

In fact, most of the blog team wanted nothing to do with it.

Why?

Because part of the article touches on the topic of…

(I’m scared to even write the words!).

Climate Change.

But don’t let those two controversial words deter you from reading any further. This is NOT an attempt to push agendas or get overly political up in here.

And please resist the temptation to jump straight to the comments to see all the arguments that are probably unfolding as we speak.

(It’s like a car crash, you can’t help but look!)

In all seriousness, the point of this article is simply to inform you of an incredible fact we recently learned about one of our WordPress plugins. One that we’re all pretty chuffed about here at WPMU DEV.

Because as the title of this article suggests, it proves that our plugins can be more than just superheroes for your websites.

They can also be legitimate superheroes in real life.

More On How Smush Helps Save The World Soon, But First…

Is climate change a joke? Or a real problem?

Let’s get the global warming chat out of the way.

I won’t spout too much on the subject. It’s not our forte, and we don’t claim to be authorities on the matter.

Website development, the Internet, and WordPress plugins… That’s our bread and butter, and what we’ll be sticking to.

Besides, if you’re desperate to learn more about climate change, NASA explains it much better.

Instead, let’s talk about a little-known fact about the Internet. One you might not expect from our invisible digital friend.

Yes, The Internet Has A Carbon Footprint… And It’s Bigger Than You Think

Although you wouldn’t think the Internet has any effect on climate change – you might be surprised at how large its carbon footprint really is.

(Cue the mind blowing stats):

According to climatecare.org the Internet currently accounts for around 2% of all global CO2 emissions. Equalling the aviation industry (we’re talking emissions from huge airliners, jets, etc.).

The amount of CO2 the Internet is responsible for (300 million tons per year) also matches the amount of coal, oil, and gas burned in Turkey and Poland – and over half of the fossil fuels burned in the United Kingdom.

But wait, it gets better:

It’s Estimated The Internet Could Account For 3.5% Of Global Carbon Emissions In The Next 10 Years

Yet it still walks around largely unnoticed, as it’s not something you’d normally associate with damaging the environment.

I mean, it’s not like a visible cloud of smoke flies up into the atmosphere every time you open your laptop (*if yours does you should really get that checked out).

The question then begs:

How Does The Digital Internet Produce CO2?

The quick and dirty answer is: Electricity.

The Internet requires electricity… which for the most part is still generated at power plants by electromechanical generators… which are driven by gigantic heat engines utilizing fossil fuels…

And Wallah! Internet carbon footprint.

Electricity still plays a big part in CO2 emissions

Here’s another scary thought:

If the Internet as a whole was a country, it would rank sixth among the countries of the world for its electricity usage. Equalling the entire country of Germany.

The energy consumption of the Internet can be narrowed down to three main offenders.

  1. Devices
  2. Networks
  3. Data Centers
You break the energy usage of the internet down to three main sectors
Image: climatecare.org

Let’s quickly summarize each:

Devices are fairly straightforward, you’re using electricity to power them, whether it be a laptop or phone. Then there’s the manufacturing of these devices and the factories they’re produced in.

Data Centers are the giant tech farms where all of the Internet’s data lives. As well as needing power to operate, the millions of servers worldwide also require air conditioning systems to prevent overheating.

A look at Facebook's data centers
One of Facebook’s data centers in Lulea, Sweden. Image: www.independent.co.uk

Finally, communication networks are what deliver the data from the centers to our devices. These are all interconnected through endless miles of cables, switches, and routers – which again – all require a mountain of energy to run.

In a nutshell… the more we can reduce the load and stress put on devices, networks, and data centers – the less electricity required, and the less carbon emitted into our poor old atmosphere.

Phew! I know, it’s a lot to take in.

So What Does All Of This Have To Do With Websites And Images?

According to the HTTP Archive, the average web page clocks in at over two megabytes.

Why is this important?

Because bloated websites lead to slower load times, frustrated users, and a whole lot of wasted energy.

One of the best ways to make your website more efficient is to reduce the amount of data transfer. Stripping it of as much unnecessary data as possible.

Here’s an (extreme) example from the Musk Foundation:

The
The Musk Foundation’s website is as minimalist as it gets.

Yep, that’s literally the entire website…

Of course, this type of approach isn’t going to work for most websites. And the reality is, you don’t have to be that drastic to significantly reduce your website’s use of energy.

In fact, something as simple as compressing and optimizing the images on your site can make a huge difference.

Which Finally Brings Us To Our Superhero Smush!

A look at our Smush plugin, which just so happens to be saving the world right now

After it was brought to our attention that optimizing images can help reduce a website’s carbon footprint, we knew we had to put Smush to the test.

If you’re new around here… Smush is the number one image optimization plugin on WordPress, with over one million installs. She’s also WPMU DEV’s oldest and we’re all proud parents.

Here’s How The Carbon Emission Test Went Down:

For this test we used: www.websitecarbon.com – a handy website that calculates the carbon footprint of your website (be sure to run yours through the test!).

It does this by taking into account five key pieces of data:

  1. Data transfer over the wire
  2. Energy intensity of web data
  3. Energy source used by the data center
  4. Carbon intensity of electricity
  5. Website traffic

The screenshot below sums up the test, but here’s a quick rundown of what we did:

First we compared the CO2 savings of both a Smush and “Smush-less” website.

Next we worked out the average views a typical website gets (based on our analytics service, and 12,000 of our customer’s sites) per day and per month.

This then gave us a reading on how much CO2 the plugin saves per website per month.

Times this number by the amount of sites that have Smush active and boom! You have the amount of CO2 it’s saving.

Which came to a total of 1,690 Metric Tons of CO2 per month.

A look at some of the data we gathered from our CO2 test

But if you’re anything like me, you have no idea 1,690 Metric Tons means, or how much that really is…

So to give you a better idea of how much CO2 Smush is helping to save, I converted Smush’s monthly savings into yearly savings – which works out to be 20,280 Metric Tons.

I then discovered the average car uses around 4.6 Metric Tons of CO2 per year.

Do the math and you’ll discover that:

The Amount Of CO2 Smush Saves Is Equivalent To The Yearly Emissions Of 4,409 Cars

No matter your views on climate change, you have to admit that’s an incredible feat for a simple WordPress plugin.

4 More Bonus Tips For Reducing Your Website’s Carbon Footprint

While we were all pleasantly surprised by the power of Smush, optimizing the images on your site is just one of many ways to reduce your website’s carbon footprint.

Here are some other simple ways you can help make your site more energy efficient:

1. Up Your SEO Game

Reducing energy consumption by employing better SEO tactics is simple. The goal of SEO is to help users find what they’re searching for as quickly and easily as possible.

Therefore, less time spent on your website, as well as less time spent landing on irrelevant website’s = less energy usage.

2. Reduce Video Screen Time If Practical

Video has already taken over much of the Internet and accounts for 80% of all transferred data online. 60% of this is via streaming services like NetFlix, YouTube and Vimeo.

Of course, since video is so effective it only makes brands want to produce more. And there’s nothing wrong with that.

But if you want to reduce your website’s energy usage, doing something as simple as removing the “auto-play” function of your videos can go a long way. You can also keep your video content short and sweet, which is a solid tactic nowadays anyway (with the attention spans of audiences growing shorter).

3. Clean Up Your Code

Writing clean and streamlined code should be a no-brainer, whether you’re trying to make your website more energy efficient or not.

This doesn’t just apply to the code you write yourself, but also instances where you borrow code. You also want to make sure any WordPress plugins aren’t adding any unnecessary weight to your website with their code.

4. Use A ‘Green Host’

A lot of hosting providers use standard grid electricity and have no say or involvement in where their energy comes from.

But there are a whole bunch of “green hosting” companies out there that ensure their data centers are run by renewable energy.

Our friends over at GreenGeeks are a great example. They also have an initiative ensuring 300% of your account’s energy usage is offset by renewable energy credits.

Green Geeks are a great example of a green hosting company

You can usually identify a green hosting company by their “Green Website” badges and certifications.

It's usually easy to tell if a host is "green" and certified

Google’s data centers are also known for utilizing green energy.

The company are one of the leaders in this area, and set out to achieve 100% renewable energy globally – which they successfully did back in 2017.

Google's data centers run on renewable energy

These days Google delivers more than 3.5 times the computing power it did five years ago – using the same amount of electrical energy.

On average their data centers also use 50% less energy, and in 2016 their operational carbon emissions were a big fat ZERO.

We Won’t Be Mean If You’re Not Down To Be Green

Like I said at the beginning of this article, this is not about pushing agendas, we just thought it was pretty awesome that our Smush is doing its part to save the planet.

What you choose to do with this information is entirely up to you.

BTW, if you haven’t yet installed Smush, and you’re looking for an easy way to help the environment – install the plugin on your website right away.

(Sorry, had to do it).

When it comes to reducing the Internet’s role in climate change it’s definitely the little things that count.

Things like limiting your device time, optimizing your website’s performance, and choosing a green host can all go a long way.

But If You’d Rather Not, That’s Cool Too

Heck, if all else fails, you can always offset your CO2 emissions by planting some trees.

It’s a sure-fire way to feel better about all that YouTube bingeing.

How To Create A Real Estate Website In WordPress That Gets Results

Building a badass real estate website in WordPress is no easy feat. But with the help of a few specialised themes and plugins, along with some knowledge of what makes a winning real estate website… you’ll be well on your way to creating a clean, professional site that gets results.

Creating a real estate website in WordPress can be a daunting prospect.

Creating a real estate website in WordPress that stands out from the crowd and gets results?

…Even worse!

Getting to know the unique features and functionalities a site like this requires is key to creating a winning WordPress site of this nature.

Because the truth is, a real estate website is different to any other website you’ve worked on.

The good news is… there are plenty of easy-to-use plugins and out-of-the-box themes you can harness to build a professional and functional site.

The bad news is… you have to know what plugins to use… along with when, where, how, and why to use them!

But don’t worry, in this article we’ll take you through the basic steps you need to follow.

We’ll also touch on what types of themes and plugins you should be utilizing for best results.

Finally, we’ll look into the common qualities and elements that make a real estate website stand out from the crowd.

But first… let’s get some formalities out of the way

Before we dive into this walkthrough, I’m going to assume you already have hosting and a domain sorted…

… I’m also going to assume you have WordPress all ready to go and we can jump into building ourselves a kickass real estate website!

Alright now we have that sorted…

Onto the first step!

1.Choose The Best Real Estate Theme For Your Website

The first step is choosing a theme for your site.

Themes can be incredibly helpful, as real estate websites typically require a lot of specialised functionality – making them not so easy to create from scratch.

You’re also in luck, because there are literally THOUSANDS of WordPress themes to choose from.

However, although there are plenty of “flexible” themes out there that serve all kinds of different industries, for now we’ll just focus on real estate specific themes.

Another good reason to use real estate specific themes is that they come with real estate friendly features.

Here are some examples of real estate WordPress themes and what they offer:

WP Real Estate (Free To Download)

A look at the free theme WP Real Estate

If you’re looking for a free theme option to get started with – WP Real Estate is a fantastic option.

Overall this is a simple, stylish and fast loading WordPress theme specially designed for real estate firms and agents.

Of course, with free themes you can expect the functionality and features to be much lower than paid themes.

The good news is, after downloading this theme you’re immediately recommended a real estate plugin which can help add features like property listing functionalities, search bars, and more.

Other than that, you can expect standard website features like: a featured posts section, customizable headers, and a custom background.

This theme is also dead simple to set up:

All you have to do is download the “.zip” file of your theme on your computer (don’t extract it!)

First find the download link

 

The next step is finding "themes"

Then directly upload the “.zip” file in your dashboard by going to Appearance > Themes > Add New > “Upload.”

Next simple press upload theme and you're done!

You can also install the theme directly from your dashboard:

install your theme directly from the dashboard

Boom! Your theme is all ready to go.

*Note: these same download instructions will apply to most free themes you encounter.

Neptune Real Estate (Free To Download)

Neptune Real Estate is another great theme

Neptune Real Estate is another free WordPress real estate theme which focuses on simple design elements and functionality.

As a result, this theme is more suited to a small real estate website that focuses on a defined region.

When you download the free version of Neptune you can expect features like:

  • Properties custom post type.
  • The ability to list and manage properties.
  • Custom homepage with custom header, property listings, and call to actions.
  • Regular updates.
  • Forum support on wordpress.org.
An example of what the property listings looks like
Easily display your property listings

 

an example of a compelling call to action
The pro version allows more great features

However, if you really want to get serious you can unlock the pro version which comes with a whole host of additional features including: an advanced search mechanism, property slider, custom homepage designs, and more.

RealHomes – Estate Sale and Rental WordPress Theme (Paid)

RealHomes premium theme plugin

RealHomes is the number one real estate theme on ThemeForest – with more than 19,000 people currently using it for their real estate websites.

According to the theme page the team at RealHomes are also always working on improvements and enhancements – so expect this theme to get better with every update!

Some of the handy real estate features of this theme include:

An advanced property search customization – which allows users to easily search for properties.

offer users an advanced search form

Google Maps integration – letting you display your properties on the map with little pin identifiers.

display your listings on Google Maps

Real estate property comparison feature – which visitors can use to easily compare properties they are interested in.

Property layout options – RealHomes also gives you a bunch of different templates for laying out your properties, including list layout, grid layout and half map layout.

Change up the layout of your property listings

Check out more of the features of RealHomes Real estate theme here.

Houzez – Real Estate WordPress Theme (Paid)

The Houzez WordPress theme

Sitting at around the same price as RealHomes, Houzez is another great premium real estate theme option.

This theme in particular is incredibly flexible and gives designers and developers a great platform to show off their creativity and produce high quality work.

Some of the handy real estate features of this theme include:

Full responsiveness – Houzez assure you that they have tested their code and this theme produces a smooth user experience on all platforms.

make sure your real estate website is mobile friendly

Visual composer – If you’re not as experienced in web design or development, you can use this handy feature to see your progress. You can also use the drag and drop builder to easily set up pages.

Use the easy drag and drop builder

Parallax backgrounds – Parallax backgrounds can be a great way to help a real estate website stand out and produce visually impressive backgrounds.

Blog layouts – Another great feature every real estate website needs is a blog. With this feature you can choose between “Default” and “Masonry” blog layouts, to make your blog section both appealing and functional.

Create yourself an amazing real estate website

2.Install Specialized Real Estate Plugins To Add Even More Functionality

Adding plugins to your website can be a great way to make up for functions your real estate theme might be missing.

Using plugins is also a great way to add additional features to a free real estate theme that might not stack up to its premium option.

Check out these real estate-specific plugin examples:

WPL Real Estate (Free To Download)

The WPL real estate free plugin

WPL Real Estate is an all-in-one plugin made by the team at Realtyna, who’ve been hard at it creating real estate solutions since 2007.

As well as a range of features you’ll see below, WPL Real Estate also comes with its own support team, as well as plenty of documentation and a comprehensive knowledge base.

Already this a lot more than you’d usually expect from a free plugin!

WPL Real Estate’s features include:

  • Adding properties with a simple listing wizard.
  • The ability to automatically hide fields that do not contain information on your listings.
  • Categorize listings into room and property types, and help narrow down user options. As well as searching by state, city, and zip code.
  • Enabling the user to switch between two layout modes: lists or grids.
  • Share your property listings through Facebook, Twitter, and email.
  • Display search results on Google Maps.
A look at how your properties appear
Manage and list your properties

 

An example of Google Maps integration
Display your properties on Google Maps

Estatik Real Estate Plugin (Free To Download)

Estatik real estate free plugin

Estatik is another all round free real estate plugin for WordPress that comes packed with a range of valuable features.

This plugin also comes with advanced filters for search for dates, famous properties and locations. And it works perfectly with all of the popular WordPress themes.

Other features include:

  • Customizable categories, types, features, and amenities.
  • Social sharing (Facebook, Twitter, LinkedIn).
  • Photo gallery with video integration (YouTube, Vimeo).
  • A simple field builder which creates unlimited numbers of fields of any type.
  • Google Maps integration.
an example of a property page using this plugin
Show off your properties

 

an example of displaying the listings on a map
Pin point listings on the map

WP Amortization Calculator (Paid)

The WP Amortization calculator

The WP Amortization Calculator is a special calculator add on that can be used for mortgages and other kinds of amortized loan.

This plugin is a great tool for any real estate website and can easily be inserted onto a page, or used as a widget.

The design is clean and simple and fits nicely into WordPress themes of all shapes and sizes.

This calculator can also be used as a lead capture device (you can ask to send a report to visitors email) and an educational tool for visitors to see the costs involved in obtaining a home mortgage.

Real Estate Pro – WordPress Plugin (Paid)

The real estate pro premium plugin

Real Estate Pro is a paid property listing plugin you can add to your WordPress website.

In a nutshell, this premium plugin enables you to add listings, sell properties, manage customer reviews, and more.

This plugin also lets visitors to your website place bids on properties, as well as contacting the property owners, and joining up to your list if they want valuable insights and updates.

Real Estate Pro also comes fully responsive and can be integrated with services such as MailChimp, PayPal, Stripe, and more.

It also includes a visual composer you can get your property listings up quick smart and complete your real estate website.

An example of how people can bid on your properties
Let visitors place bids on your properties

 

An example of giving people listing options
Segment and diversify your properties

3.Make Sure Your Real Estate Website Is User-Friendly

It’s all well and good to install a real estate theme and add a few plugins.

But according to HubSpot there are also some basic rules and principles that every successful real estate website should adhere to.

After all, the goal of a real estate website should be to either capture a lead, or have a lead get in touch with the real estate agent.

On that note, here are five bonus tips to consider when creating a real estate website:

1.Ensure The Website Is Easy To Navigate And Explore

an example of a well done navigation menu
Simple navigation helps lessen confusion and overwhelm

The simple truth is, if a website is too confusing or overwhelming for someone when they land, it’s more likely they will bounce from the page.

That’s why it’s important to keep the site navigation as clean and simple as possible.

Something as basic as having the main points of interest as menu items at the top of the page – with other less important pages coming under sub-menus… will declutter the page and make a huge difference.

Another tip is to make sure your menu is visible no matter what page the user navigates to.

If you’re looking for a comprehensive menu plugin for your real estate website, you can’t go past UberMenu.

2.Set Up A Simple Lead Capture And Contact Flow

An example of lead capture
Capture leads with a valuable and helpful piece of content

It’s vital to ensure a real estate website can easily capture visitor information.

Most real estate websites will have “lead magnets” like market reports and other helpful guides (for home buyers or sellers) that visitors can download.

Also remember to include a simple contact page or form on the home page.

Another tool many real estate websites use now is “chatbots.”

a look at a chatbot in action

Chatbots are a great way to help qualify visitors and establish what their needs are.

They’re also a great way to improve user experience and assist them with any problems or questions they might have.

ChatBot for WordPress is a great option if you’re looking for a chatbot plugin.

3.Make Sure Your Real Estate Website Is Responsive

An example of how a responsive website looks like on different devices

We’ve known for a while now that real estate (along with every other industry) is moving online.

But it’s not just online…

It’s at the gym…

It’s at the mechanics…

It’s in our pockets at all times!

Another crucial element is making sure a real estate website is responsive.

This means the screen will adapt to fit no matter what the user is using – whether it be on a tablet or a mobile phone.

In fact, a lot of businesses are taking a “mobile first” approach, making sure their websites are designed for mobile first and then designing their websites for laptops and tablets.

Although most real estate themes are already responsive, if you’re looking for a mobile response plugin try: AMP for WordPress.

4.Apply User Content And Resource Functionality

An example of a blog section on a website
A blog can help you communicate with your audience

As mentioned earlier, offering downloadable content can be a great way for a real estate website to capture leads and provide value for potential sellers or buyers.

As well as downloadable guides and reports, you may want to consider setting up blog functionality on the website to enable the user to post regular articles for their audience.

Providing valuable and helpful content is also a great way to establish authority and show the owner of the website is a thought leader in his or her industry.

As a bonus, posting regular content on a website helps improve SEO (search engine optimization) and a website’s Google search rankings.

5.Use High Quality Imagery and Video

When it comes to real estate websites the old adage “show don’t tell” couldn’t be more true.

An example of how much of a difference great photography makes

That’s why it’s crucial a real estate website uses high quality photos and videos for its home listings.

a beautiful picture can sell a house

Video especially has taken off in the real estate world, with virtual tours of the property and drone footage becoming a norm for real estate listing videos

This doesn’t only apply to listings…

The imagery, design, copy, and layout of the rest of the website should also be on point and reflect the brand.

Stein team have their design and branding on point

 

another example of great design and branding in action

 

you want to make sure your design stays consistent throughout

Also remember that high quality images and videos also have the potential to slow a website down.

So it’s important to make sure you optimize all images for optimal page loading speed.

Well whaddaya know… we’ve got our own plugin for that!

Use Smush if you need help optimizing your high quality images. Check out how it works below:

Ready To Create A Kickass Real Estate Website Of Your Own?

To sum up:

If you want to create a real estate website in WordPress that gets results:

Choose the right real estate theme for your website… whether it be paid themes or free themes.

If your website requires more functionality use plugins to fill in the gaps.

The themes and plugins you choose will largely depend on the type of real estate website you’re setting up and what the owner wishes to achieve.

And finally, remember to consider the practical elements a real estate website should include.

Ensure optimal functionality for elements like lead capture forms, chat bots, blog pages, high quality photos and videos etc.

Also feel free to fire through any of your real estate website questions in the comments, our team of experts are always on hand to help!

Advanced Lazy Loading, Automatic Resizing & 5MB Free Compression – The Queen of Image Optimization, Smush, Gets an Update

Smush is already the Coca-Cola of image optimization (even her competitors call image optimization Smushing). And now there’s even more to love; more compression (5MB!) for free with better 50-image-smushing alongside a CDN upgrade and expanded 3rd-party support for Smush Pro users.

She’s the true standard for making all the images in your WordPress media library fast, clear, and stunning.

It’s no wonder she’s trusted to optimize nearly 350 images per second, that’s 30 million images per day and 35.9 billion images as of this post going to press. But who’s counting ;)

This year brought the most significant upgrades to our heroic optimizer.

  • CDN (For our pro users)
  • WebP Conversion (Also pro)
  • Lazy Loading (included free)
  • Image Resize Detection (Free to everyone)
  • And, Automatic Image Resizing (for our pro members)

New Features For Free & Pro Users

With the free version of Smush, every image you upload is automatically optimized with her award-winning lossless compression improving PageSpeed, making more space on your servers, ranking you higher in Google and saving you time and money.

And as you know we’re big fans of making things as free and open as possible and with your feedback, we’ve found two new opportunities to give everyone a chance at more savings.

  1. We’ve upped our free compression for images from 1MB to 5MB
  2. Smush free now optimizes 50 images at a time even more smoothly than it did before with a nice UX upgrade

In addition, WPMU DEV members will find more fine-tune controls across their Smush Pro interface including a bolstered CDN and upgraded Lazy Loading.

For example:

  1. Toggle control over which thumbnail sizes to compress with the custom image size selector
  2. Lazy Load can now be turned off for specific post types and now individual images by class
  3. Want to restore the uncompressed versions of all your images? Smush now has a bulk restore option
  4. We upgraded how images are detected and processed to improve performance all around
  5. We’re constantly working to ensure Smush is the right choice for every setup. With this release Smush gets upgraded compatibility with Revolution Slider and 3rd-party Lazy Loading Support together with improved compatibility for WPBakery Page Builder, ACF, SiteGround, GoDaddy and Bluehost

So let’s dive in and see how the new features in Smush 3.2.1 are extending your advantage when it comes to image optimization for on your WordPress websites.

Compress any Image up to 5MB Absolutely For Free

Smush has always offered everyone free and unlimited compression on any 1MB or smaller image. Talk about big-time resource savings for millions of users across billions of images.

Today we’re giving everyone an upgrade! A 500% upgrade! Now you can Smush any image up to 5MB using her secure and powerful servers. That should cover not only your thumbnails but just about any file you send her way.

Do it Bulk and Undo it Bulk

Now to resolve a hot ticket and give our members something to smile about by introducing a much requested feature to the Pro version… bulk undo!

If you’ve ever wanted to undo Smush compression on one or two images it’s not a huge deal but for a cluster of images or your whole image library, it can be daunting. Not anymore. Now Smush comes with the option to bulk revert your images to the default WordPress compression.

Automate by Thumbnail Size

Did you know when you upload a single image to your site, by default, WordPress creates 3 file sizes? Depending on what theme or plugins you use this can quickly jump to 5 or 10 images? Think about it, when you upload 3 images WordPress may actually generate 30 different image files… and each one of those image files can be optimized automatically by Smush.

But we’ve taken Smush automated optimization control a step further.

Now you can set what size thumbnails to include or exclude from being compressed. Nice!

Maybe your managing a photoblog and you want all the small and medium images optimized but need to exclude a large full-res preview version that is uncompressed and preserves all the meta-information. Now you can.

In the settings section of the Bulk Smush module switch image sizes from All to Custom. Then choose the file sizes you want to exclude from automatic Smush. For most users the default All is perfect but if you run into special use cases now you have the power to choose.

Smush image sizes settings
When you want to smush a lot (or only a few) image sizes

Lazy Load Image-by-Image

If you missed it, Smush 3.2 was packaged with Lazy Loading. This lets you load images as there being scrolled into view on your browser.

This important and awesome new feature came with the ability to choose what pages you wanted to Lazy Load. Now you can actually set what specific images you want to Lazy Load.

In the Lazy Load module, under the Include/Exclude setting scroll to Classes & IDs and your image ID.

In the block editor, you can give your images custom classes by spinning open the advanced setting of your image block and giving it a class. So much power!

Smush winning things
She’s got the power, dodododup!

It’s the Little Things (and the Big Things)

With 45+ new features, improvements and bug fixes the little things can tend to get overshadowed but we’ve worked really hard on both the big ticket items and the smaller upgrades to our user experience, performance, and 3rd-party compatibility.

It’s the things that make everything run smoother and are never noticed when “they just work”… and that is Smush – it just works.

So give yourself and your clients the gift of the most powerful user-friendly image optimizer for WordPress. You deserve it. Grab Smush for free or get Smush Pro and try our complete all-in-one WordPress platform for free for 30 days.

The Ultimate Guide to Image Optimization

Images are one of the most important elements on your site and getting them right can be the difference between a popular site that provides an awesome user experience and one that doesn’t get any traffic or conversions. But images are, well, complicated.

There’s a lot you need to do to get them perfect so you get the most benefit.

In this ultimate WordPress Image Optimization guide, I’m going to give you all the information you need to optimize your images. We’re going to go through everything:

We’ll cover all the important subtopics and information we’ve shared in our previous image optimization posts as concisely as possible, so you’ll be a WordPress image optimizer in no time. If you’d like a much more thorough explanation of these topics, I’ve included links throughout this post to our in-depth tutorials.

Preparing Your Images

Optimizing Your Images in WordPress

Image SEO

Serving Images

If you’re wondering what the best WordPress image optimizer is, look no further than our very own Smush Pro. Combine it with Hummingbird and SmartCrawl SEO, all three can dramatically improve the performance of your images. You can try all three on your site with a free 30-day trial.

Looking to optimize images on a low traffic, individual, or hobby site? We also have a free version of Smush available on WordPress.org

How to Optimize Images

Before you ever upload an image to WordPress, you need to make sure that your image is the best it can be when you make it. You need to compose it properly, size it perfectly, use the appropriate image format and give it a descriptive file name.

Composing Images

The most important question when creating your images is the following:

Is this image necessary?

Images take a lot of resources to deliver to your visitors. They’re “expensive” site assets so you shouldn’t use them just to fill a space. Create original images that enhance your content and use inexpensive assets, such as headings and text, instead of images to communicate and add style whenever possible.

Never add text to your images. This practice doesn’t follow accessibility best practices and if your images shrink down to be mobile-responsive, then the text will be smaller and harder to read. Plus, images with text need to be of much higher quality to preserve the fine detail of the letters. Don’t waste resources, create the text over your images with CSS instead, for better results.

Giving up images is hard, I know. They can really make your site look great, but consider this, sessions that convert users had 38% fewer images than sessions that didn’t convert, so more images don’t add to the bottom line.

Sizing and Cropping Images

When it comes to images, size matters! And bigger is not better. GTmetrix and Google PageSpeed Insights recommend scaling your images to fit the container they will inhabit to improve performance.

Screenshot of GTmetrix Serve Scaled Images Message
If you do nothing else for image optimization, at the very least scale your images. It will make a huge difference if you’ve been doing it wrong.

Images that are oversized for their container need to be manually shrunk by the browser. This wastes time and data when loading your web pages, without providing any benefit in performance and quality.

How to Reduce Image Size in WordPress

The first step is to use the developer tools in your browser to find out the different sizes of the image containers on your site.

Watch our quick tutorial on how to detect incorrectly sized images in WordPress.

Then use an image editor to resize the image to fit the largest container it will inhabit on your site. If you want to use Retina images on your site, you’ll need double both the width and height of the largest container. We’ll talk more about Retina images below.

If you’re scaling a new image for your site, then all that’s left is to upload the image and use it in the container it was sized for. If you’re correcting an existing image on the site, upload the image and replace the URL of the old image with the new one.

Smush Pro can also resize your images automatically. So if you have a mature site with lots of images, let Smush take care of the scaling. Try Smush Pro free for 30-days.

Cropping Images

When cropping your images, try to create tighter crops and cut the excess detail and space from the image.

4:3 and 16:9 ratios are better for image SEO, so if your goal is to get the image ranked in image search, aim for an image that is not panoramic or tall and skinny.

Using the Right Image Format for the Job

Are you using PNGs for everything? Be honest. The best way to optimize images in WordPress without a plugin is to use the right image format.

Each file type was designed for a specific use case and has its own strengths and weaknesses.

Additional image file capabilities (such as transparency), unnecessary detail and too many colors all add bloat to your images. Sometimes, these are necessary and other times they’re not.

The key is to use the appropriate image file with the right capabilities to suit your needs.

We put together a downloadable PDF cheat sheet for you to be able to refer to! Click here to get your copy

Image file format infographic
Use the Smush guide to file formats to find the best file type for your images.

WordPress Image Resize Compression

There are two kinds of image graphics types, vector images, and raster images.

Vector images are mathematically generated geometric shapes that can be resized without a loss of quality.

Raster images consist of tiny blocks called pixels arranged on a grid. Raster images only appear high quality at the size they were meant to be displayed at or smaller. Otherwise, the image will appear pixelated.

WordPress Image Compression

Another thing to keep in mind when choosing your image file type is the type of image compression that each one uses as this will affect the quality of the image when it is decoded and appears on your site.

Lossy Compression permanently removes image data when the image is compressed. Some detail is imperceivable to the human eye, so this doesn’t always create a visible loss of quality.

Generally, lossy compression between 75-100% will maintain the integrity and high quality of the image, yet at 75% the image is half as large. Most social networks compress their images between the 70-85% range when you upload them.

Lossless compression preserves all the data so nothing is lost and the image can be reproduced exactly with no loss in quality. The downside is a much larger file size. Here’s a comparison.

Image File Types

JPEG

JPEG images are best for large photographs.

  • JPEGS are the standard file type produced by consumer cameras and mobile devices.
  • JPEGS can contain millions of colors and uses lossy compression to produce a small file size.
  • They’re supported in all major browsers.
  • JPEGs don’t support transparency or animation.

PNG

PNG images are best when preserving detail (such as screenshot text) is critical.

  • PNGs utilize lossless image compression, so they’re larger than comparable JPEGs.
  • There are 3 kinds of PNGs:
    • PNG-8 supports 256 indexed colors and is like the GIF of PNGs.
    • PNG-24 supports 24-bit colors to create a palette of millions of colors so it’s more like a JPEG.
    • PNG-32 supports 24-bit colors plus an extra alpha channel for advanced transparency capabilities.
  • All three PNG types support transparency, but they do so in different ways. You can get a full explanation of the different types of PNGs and how they handle transparency in this post.

WebP

WebP is Google’s open source image format that combines the best of JPEG and PNG, but with much smaller file size. They’re close to being widely supported.

There are two types of WebP image files

  • The first is known simply as WebP and uses lossy compression. It’s like the WebP version of a JPEG.
  • The second type is known as WebP Lossless and it is more like the PNG equivalent because it uses lossless compression.

SVG

SVG is an XML-based markup language that allows you to create two-dimensional shapes to create vector graphics. It’s best suited for simple shapes such as logos, graphs, flags, icons, and geometric shapes.

  • SVGs don’t work well for photographs.
  • They’re compatible with all browsers.
  • Since they’re technically a markup language, WordPress doesn’t allow SVGs by default to prevent malware injection. You should only allow trusted users who understand the risks of using SVGs the ability to use them on your site.

GIF

GIFs are great for animating dumb memes and not much else.

  • GIFs produce exceptionally large file sizes, especially if the image includes animations. For animations, MP4s or WebM files have a smaller file size.
  • GIFs have a limited color palette of 256 colors and support transparency.
  • They’re compatible with all browsers.
  • There’s no consensus on how to pronounce them so who needs ‘em.
diagram summarizing capabilities for JPEG, SVG, PNG, WebP and GIF
Here’s a quick functionality recap

Image Titles

Once you’ve selected the right format in which to save your image, you need to change the default image title generated by your camera.

Give your images succinct and descriptive titles. Use your keywords if they appropriately describe the image. If your keywords don’t describe your image, don’t use them in the image title. I’ll show you a more appropriate place for them in the SEO section of this post.

Bulk Image Editors

Creating a batch of images for a new site or going back to fix all the issues with the images currently on your site can take a lot of time. Luckily, there are several tools that can help you process your image in bulk.

Lightroom Classic was designed to manage non-destructive edits to your images. Use it to bulk scale, crop or rename the JPEG images from your camera.

Photoshop can help you bulk edit PNGs or JPEGs. Use the image processor or create custom Photoshop Actions to record a complex sequence of edits and then apply them to other images.

Optimizing Your Images in WordPress

Preparing your images correctly can prevent a lot of problems before they begin. Once you’ve got your images ready, then WordPress has some awesome features to help you manage your images and make them look their best.

WordPress Default Image Sizes

Every time you upload an image into the WordPress media library, WordPress creates the following additional image size by default:

  • Thumbnail
  • Medium
  • Medium Large
  • Large
Screenshot of WordPress Media settings
The default WordPress image sizes, except for medium_large which is hidden by default

If your theme specifies additional image sizes for your archive page, the home page, etc. WordPress creates those as well. WordPress also preserves the original size you upload and names it Full as in full-size.

To do less work manually resizing your images for the different containers on your site, you can adjust the defaults in the Media > Settings section or add custom sizes so you’ll have more options to choose from. Just avoid going overboard and creating images for every conceivable purpose or else you’re going to burn through the disk space on your hosting server.

When you make a change to the way that WordPress creates additional images, then it doesn’t update the images that are already in your media library. To change the images you’ve already uploaded, you’ll have to use the popular Regenerate Thumbnails plugin.

You’ll need to regenerate thumbnails if you’re doing any of the following:

  • modifying the WordPress default image sizes
  • adding custom image sizes or
  • switching over to a new theme that has different custom sizes.

Responsive Images

One of the uses for all the varying image sizes is so WordPress can serve responsive images.

Responsive image functionality was introduced in WordPress version 4.4 and is enabled by default. It works by using the srcset attribute to give the browser a list of multiple images at various sizes to choose from.

Instead of downloading and serving the largest image file every time, the browser loads the appropriate size file for the device. If the visitor is using a mobile device, they’ll receive a smaller image in the srcset. If they’re visiting your site on a desktop Retina device, then they’ll receive the huge full-size Retina-ready file.

WordPress writes the srcset code and adds images to the set automatically, but it’s still a good idea that nothing in your theme or plugins is interfering with this process as a part of your image optimization audit.

Retina Images

Retina and other high definition screens have 4x as many pixels. To preserve the detail and sharpness of your images on high definition screens, you need to create Retina images with enough data to fill all those new pixels and then only serve them to Retina devices.

How to serve Retina images in WordPress

Step 1: Produce images with double the pixel dimensions

To produce Retina images in WordPress with enough data for every pixel, you need to double the pixel dimensions for every image you upload.

  • If you have a large hero image that is 1600px wide and 400px tall, you need to produce an image that is 3200px wide and 800px tall.
  • If the width of your blog is 800px, then the images for your blog posts will have to have a width of 1600px and so forth.

You only need to double the pixel dimensions for the largest possible size that your image will display at. You do NOT need to create images with double dimensions for every possible responsive size.

Step 2: Serve Retina Images to Retina devices

Option 1: One of the better ways to serve Retina images is by using the srcset attribute. You simply add Retina images to the source set that WordPress uses to generate responsive images.

Option 2: Install and Configure the free WordPress Retina 2x plugin.

Step 3: Upload your Retina Images to WordPress and Use Them on Your Site

When you use the Retina image on your site, use the image variation that is half the width and height of the full size.

Screenshot of media library
The image has a width of 1200px, but I’ll need to use the version that is 600px in order to get Retina quality

Next-Gen WebP Files

Since next-generation images such as WebP are not widely supported, we can also use srcset to serve WebP images for compatible browsers.

First, you’ll need to use a WebP converter to convert existing images in your media library as well as future uploads. Then you need to determine if the visitor’s browser supports WebP images.

Finally, you can use srcset or a different method to serve WebP images if they are supported or a legacy file format like PNG or JPEG if they aren’t.

Smush Pro can convert the images that use the tag on your site to WebP and serve them to compatible browsers with her CDN. You’ll need to use a different method for CSS background images though. Get a free trial and see what a difference it makes for your site.

Check out the video below for an example of how to use a WordPress image optimizer to serve next-gen images.

Image SEO

Image SEO has gained importance recently and there’s a lot of opportunities to drive traffic with images. Unlike written content, where duplicate content is penalized, with images, the best-optimized image will “win” in search results and be the best ranked.

Properly identifying your images using the right HTML attributes can help your images be discovered in image search. Here are the important ones you need to fill out every time.

Image Title

The image title in WordPress is different from the file name title. The file title you add when creating an image in Photoshop or other image editor is more important than the image title field in the WordPress media library. The former contributes to SEO, that latter can be left out entirely.

Alt Text

Alt text isn’t just important for SEO, it’s also important for accessibility. To write an effective alt tag for your image, you’ll want to write a succinct description that communicates what the image contains or is trying to convey to someone who can’t see the image, either because they’re using a screen reader, or can’t download the image.

Screenshot where to add alt text in image block
Add your alt text here

Image Caption

Captions and the other text surrounding your image, give your image context. They also help Google understand what the image is about. Not all images need a caption, but captions function similarly to call outs in the body text. Because they’re set apart from the rest of your text and highlighted, they’re four times as likely to be read.

Other Elements on the Page Near the Image

Google also takes the whole page into account when trying to understand your images. What is the page title? What is the URL? Even though these are not related to your image directly, Google uses them as a ranking factor. Include your keywords and related phrases in your page title, page URL and image URL if possible.

Image Sitemaps

In order to make sure that Google indexes all your images, you need to create an image sitemap. Sitemaps are especially important if you update your content frequently, have an eCommerce site or if you have a new site and want Google to index your images as quickly as possible.

If you want an easy solution, you can use SmartCrawl to generate a sitemap.

Screenshot SmartCrawl advanced settings, activate include images
Flip the switch to include images in the sitemap SmartCrawl generates

Social Media Tags

Social media tags are a way for you to label your content, so when someone shares it on a social network, they share what you want them to share. Facebook, Twitter, LinkedIn, and Pinterest all support Open Graph, which is Facebook’s social media tags language. Twitter has its own meta tags but will recognize Open Graph data if Twitter social media tags aren’t available.

The important Open Graph tag for your images is og:image and allows you to specify what image you want Facebook and other social networks to display when someone shares your post.

Serving Images

The last thing you need to pay attention to when optimizing images is how your images are delivered. There are several tools you can use in WordPress to improve image optimization and PageSpeed. Smush Pro has lazy loading and her own CDN. Hummingbird can help with browser caching. Get a free trial for 30-days and try the pro versions of both on your site.

Lazy Loading

Lazy loading is a technique for improving initial page speed and payload by deferring the loading of non-critical assets that are not currently in the browser viewport. To defer offscreen images in WordPress basically means to wait to load the images we can’t see yet.

Browser Caching

Caching is a reliable way to improve site speed for your visitors by storing assets in a cache for faster retrieval. With HTTP caching, the browser stores a copy of assets (such as images) downloaded via HTTP by the user in its cache so it will be able to retrieve them without making an additional trip to the server. This dramatically improves performance for repeat visitors when done properly.

Content Delivery Networks, CDN

Instead of only serving your images from your web server in a single location, – CDNs have locations all over the globe so the data transfer required to load your images happens much more quickly.

One thing to keep in mind if you’re using a CDN to serve your images is you’ll want to avoid changing CDNs or activating a CDN and deactivating. This will change the image URLs and can negatively impact your image SEO.

Additional Resources

For more detailed tutorials on image optimization, check out our other posts on the topic:

That’s All There is to WordPress Image Optimization

There’s a lot to image optimization, so the smartest way to get started is to audit your site and see where your images stand. Focus on the most important things first, scaling images and adding alt text are two things that are time intensive, but can help you make a dramatic improvement.

Other image optimization tactics such as enabling lazy loading, using browser caching, adding a CDN, creating an image sitemap, using next-gen images can be done in one fell swoop with a WordPress image optimizer like Smush Pro. So if you don’t have a lot of time or are managing a bunch of sites, using a WordPress automatic image compression plugin is good places to start.

Lastly, using powerful bulk image editors such as Lightroom and Photoshop can help you with improving individual images much more quickly.

If you’re serious about improving your image optimization game, look no further than WPMU DEV’s optimization trifecta: Hummingbird, SmartCrawl and the crazy popular Smush Pro. Smush Pro is the best WordPress image optimizer because it does it all. You can try all three on your site with a free 30-day trial. If you’ve never taken image optimization seriously, you’re going to be pleasantly surprised by how much your site’s performance will improve.

Smush Now Has Lazy Loading… and it’s Free!

WP Smush, Queen of image optimization, just added image lazy loading to her bag of tricks… And it’s free! If you thought Smush couldn’t get any better after 3.0, think again. Our CDN upgrade unlocked the future of site speed and WordPress performance – instantaneously delivering next-gen images at the right size for every container […]

Best Image Formats for Websites Compared! PNG, JPG, GIF, and WebP

Image Optimization begins with choosing the best file format for your needs. This goes beyond PNG vs. JPEG. There is not one file format to rule them all. Everyone’s image needs are different, even the different images within a single site have different requirements. But no worries, we got you covered. In this post, I’m […]

How to Properly Resize and Serve Scaled Images with WordPress

Serving scaled images is one of the most overlooked ways to deliver a better site performance. Are your images holding your site back? Images take up a lot of file size space, especially if they’re bloated and oversized. That’s why images should be number one on your list of things to optimize if you’re trying to […]

Say Hello To The Future Of Image Optimization – Smush 3.0 Is Here!!!

Smush 3.0 is here and she comes bearing futuristic image optimization superpowers for WordPress! Your favorite image optimization tool now powers a Global Image Delivery Network – 40 Tbps, 45 points of presence, WebP compression and AUTOMATIC IMAGE SCALING. Sounds pretty awesome…but what does it all mean? With +13.5 million downloads, Smush has proven itself […]