The success of your business depends on 3 major factors. Team Product Market Fit You can’t succeed if your business isn’t running properly or nobody knows about it… of course. But even if you’re an efficiency machine with a killer marketing strategy, you’ll never succeed if the product/market fit just isn’t there. I might be […]
Gamesgratisthuis.nl is an eCommerce business based in Netherlands that sells second-hand games and gaming consoles. The shop’s name is built around its benefits – games and consoles delivered free at home.
The eCommerce firm A/B tested the color of their top-bar and increased revenue per visitor from €0.81 to €1.66. That’s a 104% increase in Revenue Per Visitor (RPV).
It is unbelievable! It’s also true.
Reasons For A/B Testing Color Scheme
Recently, the eCommerce shop had ditched its old non-responsive design in favor of a clean responsive design. Sales through mobile increased almost instantly, but there was a decline in web sales compared to the older non-responsive version.
They analyzed the website to find out what was going wrong.
The primary target audience for the games shop was youngsters in their 20s. The website had to look vibrant, youthful. But, the new website was visibly duller than before. The standard color scheme for the top bar was grim and dark.
Before they made any changes to the site, they wanted to A/B test the color schemes and see which color scheme would increase conversions best.
The A/B Test Hypothesis
They zeroed in on 5 different color schemes to A/B test.
Control – with the dark grey color scheme
Variation 1 – a dark-blue scheme that would stand out from the rest of the page
Variation 2 – with a light blue color scheme similar to the twitter share button on the page
Variation 3 – another shade of blue that was already used in other parts of the site
Variation 4 – since the website designer had originally used grey, they decided to test a lighter shade of grey to see if the grey color can indeed help conversions
For this reason, a secondary goal — ‘sales per user’ — was also tracked.
The A/B Test
Soon after the test started running, they saw that three of the versions were consistently under-performing. The control, Variation 2 and Variation 3 were removed from the test. For the rest of the duration of the A/B test, only variation 1 and variation 4 were considered.
The test ran for over three weeks and saw 3121 visitors and a total of 303 conversions.
Why Did The Blue Color Scheme Outperform Other Versions?
It has everything to do with colors and how they influence consumer behavior.
Yellow stands for optimism and warmth Red stands for energy and creates urgency Black stands for power
For years marketers have had to convince themselves and their clients all this is true. Attempts to map colors to specific emotions have existed for years. Their outcomes, such as the ones listed above, make sense in isolation. In practical scenarios, however, human responses to colors are influenced by other factors as well – personal preferences, experiences, cultural differences etc. So, business decisions made over such over-simplified statements rarely yield results.
Don’t lose heart though.
There is another way color can help businesses and brands positively influence consumer behavior.
Influence of Color on Purchase Behavior and Branding
Studies show that colors play a substantial role in influencing purchase behavior and branding. People make up their minds within 90 seconds of their interaction with either people or products. 62-90% of such initial assessments are based on color alone.
So, color does play a major role in influencing decisions.
But how exactly does it influence branding and behavior?
People perceive your brand a certain way – Perception
The colors your brand uses give it a personality – Projection
If the way you project your business matches how your customers perceive your brand, chances are they will find you trustworthy and credible. Most importantly, the will buy from you. In other words, the colors you use should fit what is being sold. The message is simple:
Use colors that will help support the personality you want to portray
And not use colors to help align with emotions you want to evoke
For instance, consider UPS and its pullman brown.
When UPS chose brown for its logo back in the day in 1916, it was because brown was perceived as the epitome of luxury. Today, the color brown is shorthand for the company itself as evidenced by their former slogan,
or, consider Apple with its black and whites. Apple is synonymous with its simplistic approach towards design, which is carefully reflected in the black logo on a white background.
Back to the original question,
Why Did The Winning Variation Win?
For the rest of this article, let’s bear in mind that the primary audience of the games eCommerce site is youngsters in the 20s age group.
Let’s first see why blue won over other colors.
Do We Prefer Some Colors Over Others?
Ever wondered why there are far less men who wear pink than women? Men and women have their own preferences when it comes to color and Joe Hallock’s studies prove it beyond doubt.
Blue turns out to be women’s favorite color as well.
Now let’s take a look at color preferences among different age groups.
Whoa! Blue seems to win every segment, male or female, kid or gran’
It seems, in hindsight, that the eCommerce shop couldn’t have gone wrong with the blue color scheme.
There are even more reasons to consider.
About 8% of the male population have color blindness. Men are more likely to have color blindness because the problem of color vision deficiency lies in the x chromosome. Men have only one x chromosome while women have two. If a boy gets a bad x, since he doesn’t have another x to help, he will be affected.
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one — desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for seven years now1, and we are very thankful to all designers who have contributed and are still diligently contributing each month.
This post features free desktop wallpapers created by artists across the globe for July 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!
Please note that:
All images can be clicked on and lead to the preview of the wallpaper,
You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
A Flamboyance Of Flamingos
“July in South Africa is dreary and wintery so we give all the southern hemisphere dwellers a bit of colour for those grey days. And for the northern hemisphere dwellers a bit of pop for their summer! The Flamboyance of Flamingos is part of our ‘Wonderland Collective Noun’ collection. Each month a new fabulous collective noun is illustrated, printed and made into a desktop wallpaper…” — Designed by Wonderland Collective3313143 from South Africa.
“It’s finally vacation time: awesome weather, sunny beach days, the smell of summer… what a best way of getting ready for summertime than looking at this fresh wallpaper? Hope you guys enjoy! :)” — Designed by Printsome.com61 from United Kingdom.
“I hear everywhere that you should have a summer body. I think as long as you are healthy, it doesn’t matter what you look like or how fat/thin you are. Thinking of this, I made this happy pig enjoying the summer without worrying what everyone else thinks.” — Designed by Maria Keller261 from Mexico.
“Stepping back in time, for some of us 20 years back (ahem), we delve back into our childhood where the Rascal of Boys live. The cool kids wanted to be them, the once sweet girls wanted to kick them, and the posh kids with the fancy kicks were terrified of them. Johnny Camo the expert hide and seek terror, Buzz McFly with his remote controlled spaceship, Jordy Large, the big boy with the tiny brain, Super Boy (origin unknown) and Morty with his pet snake Justice. Together they fight for their rights to stay up late as the B-Team, operating from their hideaway tree house slash fortress of doom.” — Designed by Wonderland Collective3313143 from South Africa.
“Ever watched Joe’s Apartment when you where a kid? Well that movie left a soft spot in my heart for the little critters. Don’t get me wrong: I won’t invite them over for dinner, but I won’t grab my flip flop and bring the wrath upon them when I see one running in the house.So there you have it… 3 Roaches… bringing the smack down on that pesky human… ZZZZZZZAP!!”” — Designed by Wonderland Collective3313143 from South Africa.
“July 16, 1969 – Apollo 11 astronauts were launched into space hoping to be the first men to land on the moon and their photograph “Pale Blue Dot” of earth inspired this artwork. You don’t have to have faith or belief in a god to know that this is holy (Sanctus). Time is a finite entity. Only about five billion years to go till the sun explodes. I know it seems like a lot now, but it will soon go if we just squander it on frivolous nonsense and small talk, not only of time passing but time that won’t pass this way again.” — Designed by Richard George Davis380 from South Africa.
“This quote from Steven Johnson reminds us that a great idea can evolve thanks to the combination of your own idea with someone else’s. As diverse as a ice cream cone can be, people having diverse interests and viewpoints are more likely to come up with innovative ideas.” — Designed by Claudette Ocando Röhricht485 from Germany.
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
Copywriting is a bit like martial arts; you don’t need to take aggressive action to see results. Image source.
Marketing can be like martial arts.
In a fight, you can floor your opponent with brute force.
You can throw a burst of punches and strikes, or grapple until you’re blue in the face. Or you can calmly step back, target one of your opponent’s pressure points, and quickly end the fight with one swift strike.
Marketing your business is the same.
You can grow by taking aggressive action. You can crank out more content, or pay for ads and leads to increase traffic. Or… simply step back and target the “pressure points” in your marketing by finding small tweaks that create big wins.
One of the best ways to get big wins from small tweaks is to focus on converting more prospects into customers by strengthening your copy.
But not all copywriting tweaks are created equal.
You can spend hours tweaking the wrong things and get weak results, so here are five simple but effective ways to ramp up your conversions by cranking up the power of your copy… Mr. Miyagi style.
1. Use open loops to seduce your prospect
Ever had an awesome TV show that you couldn’t stop watching? A series of books that you couldn’t put down?
You have? Congratulations, you’ve experienced the power of open loops (also called the Zeigarnik effect).
Open loops prey on our brain’s natural desire for completion.
You see, the brain enters a state of confusion or tension when it views something as incomplete. The cause could be a story, a question, even a household chore that you forgot to complete — and the only way to overcome that confusion and tension is for your brain to close the open loop.
When it comes to writing copy, an open loop is a part of your sales message that doesn’t tie up immediately.
You can apply open loops to any copy and instantly make it more magnetic.
The writer starts the sales letter with talk of a mysterious little secret that top copywriters used to sharpen their chops, and as a result make bucket loads of cash – instantly making you wonder what this secret is.
But it doesn’t stop there. The sales page goes on to constantly dangle this secret right in front of your face. This strengthens your curiosity and makes you more invested in finding out what the mysterious secret is – increasing the chance of a conversion.
Open loops aren’t hard to implement.
The easiest way to get started is to ask more questions in your copy and vaguely expand on the question, just like the example above. This lack of completion makes your reader feel curious and more invested in your copy.
2. Make your first sentence hypnotic
Your first sentence has to open with a bang.
It has to immediately snag your audience’s attention and drag them into your copy. If your readers don’t make it past the first few sentences, they sure as hell ain’t making it to your call to action.
Shortening your sentences (and your first sentence in particular) is an excellent way to make your copy a little bit more engaging.
The trick is to make sentences so short and easy to read that they instantly suck your reader into your copy. In his book Advertising Secrets Of The Written Word, legendary copywriter Joseph Sugarman even said:
My first sentences are so short, they almost aren’t sentences.
Take for example the opening sentence on Chartbeat’s landing page for their study on audience development.
Have a look at how short and simple the opening is:
It’s not enough to just count clicks and page views anymore.
When someone begins by reading that, they’re naturally inclined to wonder, “What is enough then? What’s wrong with counting clicks and page views? What should I measure?”
These questions then fuel the reader with enough coals of curiosity to make him want to read on.
Also, shorter sentences look like a piece of cake to read, which increases the chances of someone actually getting through your copy. This is a huge benefit because it’s harder to stop reading copy once you’re already interested and curious.
3. Deploy power verbs for maximum impact
Good copy paints pleasing pictures in the minds of your prospects. It dives into their brains and engages their senses and emotions.
This is where most writers make a fatal mistake. They rely on adjectives and limp words to add flavor to their copy, but as killer copywriter John Carlton said in his book Kick Ass Copywriting Secrets:
Good copy goes light on adjectives. And heavy on action verbs.
The right action verbs give your copy a muscular, grab-you-by-the-throat effect that keeps your reader glued to the screen.
The example below shows the difference between fluffy adjectives and power verbs in creating vivid mental images:
The stomach-turning news was extremely shocking. All of a sudden, he didn’t feel very good. He quickly sat down on the large black sofa and passed out.
After powering up with verbs:
The news hit him like a sharp hook to the stomach. He felt his heart rip, and an ocean of darkness washed through him as he collapsed into the sofa.
Big difference, right?
When it comes to descriptive power and sharp imagery, the second paragraph leaves the first, adjective-infested one coughing in the dust.
They are desperate to seize the opportunity before it slips away from them.
If you’re a serious blogger, you’re tired of wading through thousands of articles, reading contradictory advice, and trying to figure out how to piece it all together.
See how alive and vivid the writing becomes with just a few well-placed sharp, powerful verbs?
Keep a thesaurus handy at all times, and be sure to have a swipe file on standby. This will help you inject strong verbs and words into your copy without ripping your hair out in frustration.
4. Adhere to the AIDA formula
When writing copy, it’s easy to find yourself staring at a blank page wondering, “What’s next?”
That’s where the AIDA formula (by copywriter Gary Halbert) comes in handy.
It’s a formula that allows you to consistently create a smooth, strong sales message that latches onto your reader’s attention and keeps them interested.
So what does AIDA stand for?
Attention. This is where you snag your prospect’s attention with a benefit-driven headline and introduction to make him want to read on.
Interest. This is where you’ll pique the interest of your prospects and nudge them deeper into your copy by describing how your pain solving product/service benefits their lives.
Desire. After arousing your prospects interest, here’s where you pump up his desire for what you’re selling. Usually with a bullet point list that describes all the juicy benefits of your product/service.
Action. After your reader is blown away with the amazing benefits your product, you then invite him/her to take action. Usually to make an order or fill in a form.
Here’s an example of the AIDA formula in action from the webprofits.com landing page.
The headline is curious and grabs the reader’s attention by suggesting that the SEO game has changed.
Once the page catches the reader’s attention, it cultivates interest with paragraphs which explain how SEO has changed (next to the laptop).
After that, it arouses the prospect’s desire by describing the benefits of the product.
Following the AIDA formula inserts a smooth compelling flow into your copy and keeps readers glued to your sales message.
5. Harness the power of reframing to shoot up perceived value
A 1999 study by psychologists Davis and Knowles showed the shocking persuasive power of a technique called reframing. In the study, they went door to door and sold note cards for charity.
In the first pitch, they said that it was $3 for 8 cards. They made sales at 40% of households.
In their second pitch, they told people that it was 300 pennies for 8 cards, which was followed up by, “which is a bargain,” resulting in 80% of the households buying cards.
This tiny change in the pitch had a huge effect on results, but how and why was it so influential?
Here’s what happens:
When people are told the cost of the cards is 300 pennies instead of 3 dollars, their routine thought process is disrupted. Now, while they’re distracted trying to process the odd sounding “300 pennies” and why anyone would use pennies instead of dollars…
They’re immediately told that it’s a “bargain.” And because pennies sound so easy to spend in comparison to hard-earned dollars, they are more likely to accept the suggestion that the cards are a bargain.
This is known as reframing.
Reframing is a wickedly effective technique. It allows you to manipulate the perceived value of a product by making comparisons and shifting the focus of your reader.
Here’s an example of what reframing looks like:
You wouldn’t rush to buy something that’s $500 a year right? I mean for most people, it’s a decent amount of change.
How about for $42 a month?
Or $8 (the price two lattes) a day?
Sounds much more appealing doesn’t it?
This landing page reframes the price of a brand new car in terms of two lattes per day ($8), which serves to soften the blow of the price and make the offer more appealing.
Here’s another example from the CopyHour landing page:
The landing page reframes the price by comparing the total price of the course to how much it costs per day, instantly reducing the weight of the price in the prospect’s mind.
Crafting seductive landing page copy doesn’t have to be painful
Powerful landing page copy doesn’t have to be painful to create. Pick a couple of strong techniques and tips, focus on the needs of your prospects, and you’ll be fine.
Now it’s your turn. How do you go about cranking up your copy power to increase conversions? What’s the weirdest conversion boost/decline you’ve had with regards to copywriting? I’d love to know!
Split testing. The infallible process that adds an element of science to the art of optimizing your page’s copy and presentation. I say infallible, but can you really place all of your trust in split testing? I know I’m preaching to the choir here and don’t need to outline the usefulness of a decent A/B […]
A balanced composition feels right. It feels stable and aesthetically pleasing. While some of its elements might be focal points and attract your eye, no one area of the composition draws your eye so much that you can’t see the other areas.
Balancing a composition1 involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas. Everything works together and fits together in a seamless whole. The individual parts contribute to their sum but don’t try to become the sum.
An unbalanced composition can lead to tension. When a design is unbalanced, the individual elements dominate the whole and the composition becomes less than the sum of its parts. In some projects, unbalanced might be right for the message you’re trying to communicate, but generally you want balanced compositions.
Note: This is the seventh and final post in a series on design principles. You can find the first six posts here:
Happiness is not a matter of intensity but of balance, order, rhythm and harmony.
– Thomas Merton
Physical And Visual Balance
Balance is easy to understand in the physical world, because we experience it all the time. When something is unbalanced, it tends to fall over. You’ve probably been on a seesaw or a teeter-totter at some time in your life — you on one side and a friend on the other.
Assuming you were both about the same size, you were able to easily balance on the seesaw. The following image appears to be in balance, with two equally sized people equally distant from the fulcrum on which the seesaw balances.
The person on the left makes the seesaw rotate counterclockwise, and the person on the right makes it rotate clockwise by an equal amount. The force of each person acts in a different direction, and their sum is zero.
If one of the people was much bigger, though, the balance would be thrown off.
This image doesn’t feel right because we know the person on the left isn’t big enough to balance the person on the right. The clockwise force should be much greater, and the seesaw should be touching the ground on the right.
However, if the larger person slid in toward the center, then the seesaw would be balanced again.
Here, the force of the larger person is reduced by being closer to the fulcrum on which the seesaw balances. I’ll trust you’ve been on a seesaw before or at least watched others play on one and that you have a pretty good sense of what’s going on.
Visual balance is similar. Physical weight is replaced by visual weight. The direction in which the physical weight acts is replaced by visual direction.
As a reminder, below are definitions for visual weight and visual direction, although I’ll refer you back to the fourth post in this series13 for more details.
This is the perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of the viewer.
This is the perceived direction of a visual force. It’s the direction in which we think an element should be moving if it were given a chance to move according to the forces acting on it.
You don’t use instruments to measure the forces. You don’t use formulas to calculate whether everything is in balance. Rather, you use your eye to determine whether a composition is balanced.
Why Visual Balance Is Important
Just as in the physical world, visual balance is a good thing. It’s desirable in and of itself. An unbalanced composition can feel uncomfortable for the viewer. Look back at the second of the three seesaw images — it looks wrong because we can tell that the seesaw shouldn’t be in balance.
Visual weight is a measure of the visual interest of an element or area in a design. When a composition is visually balanced, every part of it holds some interest. The visual interest is balanced, which keeps viewers engaged with the design.
Without visual balance, viewers might not see all areas of the design. They probably won’t spend any time in areas with less visual weight or interest. Any information in those areas could easily go unnoticed.
You would balance a design visually because you want to balance the points of interest in your composition, so that viewers spend time with all of the information you want to convey.
Four Types Of Balance
There’s more than one way to balance a composition. The images in the previous section show two of them. The first image is an example of symmetrical balance, and the second is an example of asymmetrical balance. Two other types of balance are radial and mosaic.
Symmetrical balance occurs when equal weights are on equal sides of a composition, balanced around a fulcrum or axis in the center. Symmetrical balance evokes feelings of formality (it’s sometimes called formal balance) and elegance. A wedding invitation is a good example of a composition that you’d likely want to be symmetrically balanced.
The downside of symmetrical balance is that it’s static and sometimes regarded as boring. Because half of the composition mirrors the other half, at least half of the composition will be rather predictable.
Asymmetrical balance results from unequal visual weight on each side of the composition. One side of the composition might contain a dominant element, which could be balanced by a couple or more lesser focal points on the other side. One visually heavy element on one side might be balanced by a handful of lighter elements on the other.
Asymmetrical balance is more dynamic and interesting. It evokes feelings of modernism, movement, energy and vitality. Asymmetrical balance offers more visual variety, although it can be more difficult to achieve because the relationships between elements are more complex.
Radial balance occurs when elements radiate from a common center. Rays of sunlight and ripples in a pond after a stone is tossed in are examples of radial balance. Maintaining a focal point (fulcrum) is easy because it’s always the center.
Because everything radiates from a common center, everything also leads to that center, making it a strong point of attraction.
Mosaic balance (or crystallographic balance) results from balanced chaos. Think Jackson Pollack paintings. The composition lacks distinct focal points, and the elements share a uniform emphasis. The lack of hierarchy leads to visual noise at first glance. Somehow, though, it all works together.
Symmetry And Asymmetry
Both symmetry and asymmetry can be used throughout a composition, independent of, yet while contributing to, the final balance. You can have symmetrical forms in an asymmetrically balanced composition and vice versa.
Symmetry is usually seen as beautiful and harmonized; however, it can also be seen as static and dull. Asymmetry tends to be more interesting and dynamic, despite not being regarded as intrinsically beautiful.
There are three primary types of symmetry.
Reflection symmetry (or bilateral symmetry) occurs when everything is mirrored around a central axis. It’s probably the first thing you think of when you hear the word “symmetry.” The axis can be in any direction or orientation, although it’s often vertical or horizontal.
Everything on one side of the axis is mirrored on the other side. Natural forms that grow or move across earth’s surface develop reflection symmetry. A human face and a butterfly are examples.
When the reflection is a perfect mirror image, the symmetry is said to be pure. Much of the time it won’t be perfect and each side will have slight variations. This is near symmetry, and it’s more common than pure symmetry.
The symmetry can even occur over multiple axes at the same time. For example, the left and right half of a composition could mirror each other, while the top and bottom also mirror each other. Snowflakes show reflection symmetry over more than two axes.
Rotational symmetry (or radial symmetry) occurs when everything rotates around a common center. It can occur at any angle or frequency, as long as there’s a common center. Natural forms that grow or move perpendicular to the earth’s surface develop rotational symmetry. The petals of a sunflower are an example. Rotation without reflection can be used to show motion, speed or dynamic action. Think of the spinning wheels of a moving car.
Translational symmetry (or crystallographic symmetry) occurs when elements are repeated over different locations in space. Repeating fence posts are an example. The repetition creates translation symmetry. It can occur in any direction or at any distance, as long as the basic orientation is the same. Natural forms develop translational symmetry through reproduction. You can create rhythm, motion, speed and dynamic action through translation symmetry.
Symmetrical forms are commonly seen as the figure, as opposed to the ground. A symmetrical form will carry more weight than a similarly sized and shaped asymmetrical form.
Symmetrical forms convey balance in and of themselves, but they could appear too stable and too balanced, leading to a lack of interest. Symmetrical forms also lead to passive space because the negative space is equal all around the form.
Asymmetrical forms lack the balance of symmetrical forms, although you can asymmetrically balance an entire composition. Asymmetry is rather common in natural forms: you’re probably right- or left-handed; fiddler crabs have different sized claws; trees branches grow in different directions; clouds have random shapes.
Asymmetry creates more complex relationships between elements, and so it tends to be more interesting than symmetry. Because it’s more interesting, asymmetry can be used to draw attention.
Space around asymmetrical forms is more active. Unpredictable patterns are created, and overall you have more freedom of expression with asymmetry than with symmetry. The tradeoff is that it’s harder to achieve.
Much in the same way that similarity and contrast work together, you can combine symmetry and asymmetry27 to good effect. Balance symmetrical forms in an asymmetrical way, or balance asymmetrical forms symmetrically. Break up symmetrical forms with a random mark to add interest. Contrast symmetry and asymmetry in your composition to make elements get more attention.
Throughout this series I’ve tried to point out how many design principles arise from gestalt principles. I also hope that as you’ve followed along you’ve seen how different design principles build on each other.
One of the gestalt principles specifically addresses symmetry and order and certainly applies to compositional balance. It’s hardly the only principle that applies, though.
The simplicity of symmetrical forms is predicted by the Law of Prägnanz. Gestalt principles such as focal points and similarity contribute to visual weight. Principles such as continuation, common fate and parallelism impart visual direction. I also mentioned that symmetrical forms are more likely to be seen as figure rather than ground.
I hope this idea that the principles of gestalt lead to many of the design principles that guide us has become clearer as you’ve read through this series. The design principles we follow didn’t arise out of thin air; they emerged from the psychology of the way we perceive our visual environment.
It’s time for screenshots. I have a few more websites than usual for this last article in the series, and I’ve grouped them according to the four types of balance.
As I’ve reiterated throughout the series, what follows is my opinion. This is how I see the balance in these designs. You might see it differently, which is fine. Thinking critically about the designs is more important than our agreeing about what we think.
Examples of Symmetrical Balance
The design of Helen & Hard’s entire website is symmetrically balanced. The screenshot here is from the “About”28 page, but the other pages of the website are similarly balanced.
Everything reflects around a vertical axis down the center of the page. The logo is centered, the navigation bar is centered, the circular images are centered, the heading is centered, and the three columns of text are centered.
The balance isn’t perfectly symmetrically. The columns have different amounts of text, for example.
However, notice the top of the page. Both the logo and navigation bar are centered, but they don’t appear to be visually centered. My eye wants the logo to be centered on the ampersand, or at least closer to it. The three menu items on the right side of the navigation bar have more letters than those on the left. My eye wants them to be the same and wants the center to be in between the “About” and “People” links.
I think moving these two elements out of center to make them look like they’re visually centered would balance the composition a little better.
The home page of Tilde31 is another design that’s symmetrically balanced. Like Helen & Hard, everything here revolves around a vertical axis running down the center of the page: the navigation, the text, the people in the image. It’s the same as you scroll down the page.
As with Helen & Hard, the symmetry isn’t pure. Centered lines of text aren’t mirror images, for one thing. Also, a couple of elements are off: the “Meet the Team” arrow pointing right and the text at the bottom of the page ending in another arrow pointing right.
Both are calls to action and both break the symmetry, calling extra attention to themselves. Notice how both arrows use colors that contrast with their background, further increasing the attraction of these elements.
Examples of Asymmetrical Balance
The home page of Carrie Voldengen’s portfolio exhibits an overall asymmetrical balance around a dominant symmetrical form. Looking at the overall composition, I see several discrete shapes.
The mass of the page is a large rectangle that’s composed of a grid of smaller rectangular images. On its own, this grid is symmetrical around both the vertical and horizontal axes. It feels very strong and stable. On its own, it’s very balanced and looks like it’s not going anywhere.
To the right, a block of text pulls down on the shape. It’s counterbalanced by text and the circular logo in the upper left. Both provide a relatively equal amount of visual weight acting on the grid in opposite directions.
The distance to an imagined fulcrum is about the same as the weights. The text on the right is larger and darker overall, but the blue circular logo gives more weight to its general area. The circle even connects to the top-left corner of the grid through a single color.
The text below the grid seems to hang from it, and it’s light enough on its own not to throw the composition out of balance.
Notice that the space also feels balanced. The areas down the left, along the top right and down the right, including a bit of the bottom right, all balance each other. The area on the left is larger than the area on the right, but the right has additional space on the top and bottom.
The images at the top of Hirondelle USA’s36 home page rotate. I grabbed a screenshot of this one specifically to talk about the asymmetrical balance established at the top of the page.
The column in the image is slightly off center, and it anchors the composition with a strong vertical line — it’s an object we know weighs a lot. The railing on the left provides a strong connection with the left edge of the screen. It, too, feels anchored. It’s hard to imagine any design element on the page throwing either out of balance.
The text above the railing feels supported by the railing; however, it’s also visually balanced by the image of the boy on the right. You might view the railing as hanging off the left side of the pole, pulling it out of balance, but I think the intrinsic interest of the boy as well as the darker values in the background behind him counterbalance both the rail and the text on the left and keep things in balance.
There’s a sense of translation symmetry as the gold lines of text repeat in the upper left and lower right of the image, as well as in the button further down the page. The white text is repeated as well.
Examples of Radial Balance
The home page of Vlog.it39 exhibits radial balance, which I hope is clear from the screenshot. Other than the shape in the top-right corner, everything revolves around the center of the page, as the three rings of images rotate around the center circle.
What you can’t see in the screenshot is how the page loads. A line is drawn from the lower-left corner to the center of the page. From that point on, just about everything that appears on the page does so by revolving around the center or radiating from it, like ripples in a pond.
The smaller circle in the upper right adds a little translation symmetry and some asymmetry, increasing visual interest in the composition.
Opera’s Shiny Demos42 home page isn’t circular, but the text links all seem to emanate from a common or near common center. It’s easy to imagine the whole shape spinning around one of the squares in the middle or maybe one of the corners where four squares meet.
The Shiny Demos heading in the upper left and the Opera logo in the lower right counterbalance each other and also appear to radiate from the same center as the text links.
It’s a good example of how radial balance doesn’t necessarily require the use of circles.
Examples of Mosaic Balance
You might expect mosaic balance to be the least used online, especially after I offered Jackson Pollack paintings as an example of mosaic balance. Many more examples are online than you might realize.
The home page of Rabbit’s Tale45 is a good example. There’s certainly a random and chaotic feel with the letters strewn about, but the balance in the composition works.
There are close to equal areas of color and space on both sides (right and left) to balance each other. The rabbit in the middle even serves as a fulcrum. It might also stand out a little after you’ve seen it, but overall the elements don’t call attention to themselves individually.
I’m not going to try to figure out which elements counterbalance each other, one element at a time, but hopefully you agree that there’s an overall balance. If anything, the chaos is weightier on the right, but not to the point of throwing off the balance.
Content-heavy websites such as news and magazine websites exhibit mosaic balance as well. You might recognize the home page of The Onion48. In the screenshot, I’ve removed the background image behind the top of the page.
There’s a lot to look at. The layout isn’t symmetrical. The columns aren’t equal in size. It’s hard to identify what counterbalances what. The blocks of content have different amounts of content inside and, consequently, are different sizes. Nothing radiates from a common center.
There’s a bit of chaos and randomness in the different-sized blocks, some denser than others. Because the stories on the website change daily, a different chaos will appear each day. Overall, it works.
Perhaps it’s a stretch to say that it’s a mosaic balance, but again I would argue that it is and that many websites exhibit this sort of chaotic balance, although something tells me that much of the chaos we see online wasn’t planned.
It’s taken a while to get here, but that concludes our series on design principles. I hope you’ve enjoyed it, learned something new or found the series to be a good review of fundamental design principles.
As you can guess, I think the fundamentals are important. I started this series to show how all of these principles arise out of human perception and gestalt theory. I didn’t make them up. The principles are based on how we all perceive and interpret our visual environment.
For example, one reason we notice focal points is because they contrast with the elements around them. They stand out as different. That’s important when you need to quickly determine friend from foe. That ability was important for our survival as a species, and so our eyes developed to make the determination quickly.
However, design principles aren’t hard and fast rules. They’re guidelines. There’s no one right way to communicate that two elements are similar or different, for example. You don’t need to follow any of these principles, although you should understand them and have a reason for breaking them.
Again, I hope you’ve enjoyed this series, and I hope even more that something in the series has given you more control over the visual communication in your designs.
Search engine optimization (SEO) and conversion rate optimization (CRO) go hand in glove. SEO can help you find out where you’re losing conversions and optimize to get them back again. But that’s only if you’re doing it right. If you’re still optimizing like it’s 2005, then you’ll have a very different experience, because SEO has […]
Prototyping is one of the best things that can happen within a project, yet it is extremely underutilized. Prototyping makes a project better suited to users, elevates user experience, increases the quality of your final code, and keeps clients happy.
The problem is that developers often see prototyping as a waste of time, since high-quality prototypes take considerable effort to make. I want to show you that by using WordPress, highly interactive prototypes with great visuals are not at all that difficult to make.
First, we’ll look at some basic prototyping concepts, then set up a test server from scratch. We’ll continue by converting an HTML template to a WordPress theme and learning how to use its items to create what we need. We’ll also learn how to add front-end and server-side functionality to our prototype.
While all this seems complex, beginners should be able to follow along easily, including the “create your own server” section, which is a cinch!
“[A] prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.”
This sentence neatly sums up the pros and cons of a prototype. The advantage of creating a prototype is that it lets you test an idea and learn from the process. It allows you to make a reasonable assumption about the feasability of your project before you put in hundreds of hours of work.
One of the downsides is that prototypes are made so that we may learn from them. Often, designers and coders look on this as wasted time. Why make a protoype when we could be working on the real thing? Who is going to pay us for the time we spend prototyping?
To be honest, these are tricky questions. For smaller projects, no one will pay you for it, but your project will be better for it; this, in turn, leads to bigger and better projects. In most cases, the time you spend prototyping is regained while building the product anyway!
It also appears that designers like to prototype a lot more than developers. The root of the issue here is speed. A designer could prototype a design a lot faster than a developer, since the latter needs to build a quick framework, implement a design and do a lot of fiddly things which take time.
Fidelity And Functionality
We can approach prototypes by looking at two key features: fidelity and functionality. Fidelity refers to how detailed the prototype is visually, while functionality refers to the level of interaction possible within the system. Let’s look at how levels of fidelity and functionality in prototypes pair up.
These prototypes are easy to make. They could be simple drawings, or Balsamiq mock-ups5. There is minimal interaction — or none at all — and visually the prototype has very little to do with the final product.
Increasing the fidelity while keeping functionality low is also quite common. A good example would be a Photoshop design file which could contain final design elements. Again, there is next to no interaction here but plenty of visual detail, enough to put it close to the final product in terms of design.
Using front-end frameworks like Bootstrap14 or Foundation15 can can increase your fidelity somewhat, but you’d need to write a good amount of CSS to make it your own.
I would still consider these low-fidelity mock-ups because each front-end framework looks generic by default. That’s fine for testing the principle, but it doesn’t increase fidelity to a point where more sensitive clients would be able to visualize what the final product will be like.
Prototypes like this are rarely seen because creating them can take more time than is worth it. Why create something so similar to the website-to-be when you could be working on the actual site?
High-functionality, high-fidelity prototypes contain a high degree of interactivity while also being a much closer facsimile of the final product. Users can follow links, submit forms and do many other things that help them see what the end result will be like.
The real trick is managing the time spent on making such prototypes — which is where WordPress comes in.
Which One To Use
There is, of course, no simple answer to this question. A high-fidelity, high-functionality prototype is closest to the real thing, but it takes time to make; for simpler projects, it may not be worth the time.
Low-fidelity, low-functionality prototypes are simplistic and cannot be interacted with, but for small projects and close-knit teams, perhaps they’re all that is needed.
Several factors need to be considered:
How well your team works together
How large your project is
How visually and technically oriented your client is
How well you understand the product you are building
How many people will be involved other than programmers and designers
In my experience, the most important factors are the client and the project’s complexity. Even if I understand the project well, I would like a high-fidelity, high-functionality prototype just in case. One of the fundamental mistakes you can make in projects is thinking you know them well.
For complex, large-scale projects you should always create prototypes with a high degree of freedom. The more systems and subsystems you need to build, the more intertwined they become and the more places things can go wrong.
The client can be an even bigger factor. Often, clients do not know what they want. They may not be design- or code-oriented, which means they will equate a low-fidelity prototype with bad design and missing features — even if you tell them what the prototype is for. As a result, a clearer visual aid is sometimes called for to enhance communication.
Since I will be talking about high-fidelity and high-functionality prototypes from now on, I will be calling them high-quality prototypes. This is not at all a reflection on other prototypes; a low-fideltiy, low-functionality prototype can also be created with high quality.
Considerations For High-Quality Prototypes
There are a number of considerations when making high-quality prototypes. What platform they should be built on, what functions need to be added (or not added), how intricate should we make the design, and so on.
The platform chosen should be one which allows you to work fast and quickly add features as well. Bootstrap, Foundation and other frameworks are great, but they offer very little functionality, since they are purely front-end. Using them can still be a good idea, but not on their own.
On the other side of the spectrum, we have PHP frameworks like Laravel, which is excellent for creating high-quality modular code. This is out of the question, though, since we have to write too much business logic ourselves just to get a site up and running.
WordPress strikes a good balance here because it is essentially a bag of useful functions combined with a reasonably flexible way to template pages quickly. I want to stress that you should use a platform you feel comfortable with. If you’re amazing at using Laravel, by all means go with it.
You can create a simple design framework for yourself, but that also takes quite some time. This is the place to use front-end frameworks to lighten your workload.
What I recommend is getting a good pre-made HTML admin template. Many of these templates use Bootstrap or Foundation anyway, and put a bunch of elements at your fingertips. In addition, they’ve already styled the elements of their frameworks into something less generic, which is just what we need. With a little work they can be converted to WordPress themes and will facilitate extremely quick prototyping.
I don’t use bespoke WordPress themes because they are for presenting content, not creating application architecture. You won’t be able to create a menu or a form anywhere easily, and your code will likely be a mess by the end.
Depth Of Functionality
Depth of functionality is all about interactivity. Since you have control over a CMS you can, in theory, make things work properly — login forms could genuinely log you in. You probably don’t want to spend your time coding in all the functionality. That isn’t really the point here.
For example, is the login form really important? Everyone knows how logging in works. Perhaps the form can be allowed to be blank, and the login button logs you in immediately as a test user.
If you are building a finance management app, however, you may want to spend some time making sure that the “Add transaction” form works as expected. Real data can be listed and submitted adding a great deal of depth to your prototype.
Prototyping With WordPress
I think WordPress is a great choice for prototyping because of the flexibility of templating and the number of functions you have at your disposal. Logging in and out, adding metadata, querying items — a lot of base functionality is already there.
I like to choose a pre-made HTML admin theme that looks close to what we’ll be doing in the final iteration of the design. You can find a large number of premium admin themes on Themeforest19 but you can also grab some good free ones via a quick Google search. For my examples I will be using a free admin theme called AdminLTE20.
When choosing an admin theme try to gauge what features you will need. Concentrate on the rapid aspect of prototyping, not making sure that your prototype looks like the final design.
A Complete Example
When I started this article, I wanted to provide a complete example of how I use WordPress to prototype. I ended up recording a video of the process and writing about it in a bit more detail. The video below will walk you through my process of creating a prototype of the Twitter front page.
Following the video I’ll go into even more detail, giving you some instruction about setting up test servers, using the WordPress menu system to populate menus, and much more. I recommend watching the video first, and then looking at the details below, as they will be a lot clearer.
Jargon. Verbiage. Policy speak. Whatever you call it, we all encounter it on a daily basis. Why? There are at least three reasons why companies of all sizes use jargon on their websites, and they’re all fallacies. As well as taking a look at why I believe that’s the case in this post, I’ll also […]
Responsive1images2 have been keeping us on our toes for quite some time, and now that they are getting traction in browsers3, they come with a scary problem: the need to efficiently resize all our image assets. The way responsive images work is that an appropriately sized image is sent to each user — small versions for users on small screens, big versions for users on big screens.
It’s fantastic for web performance, but we have to face the grim reality that serving different sizes of images to different users means that we first need to create all of those different files, and that can be a huge pain4.
Many tools out there automate image resizing, but too often they create large files that cancel out the performance benefits that responsive images are supposed to deliver. In this article, we’ll see how we can use ImageMagick145 — an open-source command-line graphics editor — to quickly resize your images, while maintaining great visual quality and really tiny file sizes.
Big Images == Big Problem
The average web page is about 2 MB6 in size, and about two thirds of that weight is from images. At the same time, millions of people are accessing the Internet on 3G-or-worse connections that make a 2 MB website a horror show to use. Even on a fast connection, a 2 MB website can wreak havoc on your users’ data plans and cost them real money7. Improving web performance and giving a better experience to our users is our job as developers and designers.
Responsive images11 to the rescue! Right? Well, yes, but first we have to generate our responsive image assets, and we have to make sure those assets look good and have a small enough footprint to improve the website’s performance.
For a very small website, saving a few different sizes of each image directly in our image editor is trivial — Photoshop even provides a handy “Save for Web” option that keeps file sizes low. But what about a large website with a lot of images? An online store, for example, might have hundreds or thousands of image assets, and having to create different sizes of each of these is an enormous task.
This is where automated image resizing comes in handy. A bunch of tools out there do this, including GD12 and GraphicsMagick13, but ImageMagick145 strikes a good balance between power and availability in hosting environments. ImageMagick has been around for almost 25 years and is a full-fledged command-line image editor. It is widely supported by content management systems (CMS) such as WordPress7115 and Drupal7616, integrated with task runners such as Grunt8317, and used on its own to automate image editing — including resizing.
It’s also available on desktop systems (Mac, Windows and Linux). If you use Homebrew18 on a Mac, you can install it like this:
ImageMagick provides a fast, simple way to automate image resizing. Unfortunately, with the default settings, the resized files it outputs are often really big — sometimes bigger than the inputted image, even though the output has fewer pixels. These big files completely negate the performance gains you’d expect to get from responsive images and, in fact, can make things worse for your users than if you’d simply loaded the huge unshrunk assets.
Below, I’ll describe why this problem exists and show you how to change ImageMagick’s default settings to solve this problem and get small, great-looking images.
How Image Resizing Works
The best way to solve the problem is to understand why it’s happening, and that means understanding the basics of how image resizing works.
By definition, when a computer resizes an image, the number of pixels in that image will change. If the image is being enlarged, the output will have more pixels than the input; if the image is being shrunk, the output will have fewer pixels than the input. The challenge is in figuring out the best way to store the original image’s content in this different number of pixels. In other words, we need to figure out the best way to add or remove pixels without changing what the image looks like.
Although not as common a use case, image upsampling (i.e. making images larger) can be a little easier to visualize, so let’s start with that. Consider an image of a blue 4 × 4 pixel square that we want to double in size to 8 × 8 pixels. What we’re doing is taking the same image and applying it to a new pixel grid; this is called resampling and is usually what we mean when we talk about resizing images. To resample our 4 × 4 blue square to 8 × 8 pixels, we need to add 48 extra pixels somewhere. Those pixels will need some color value, and the process of determining that color value is called interpolation. When you’re resampling, the algorithm for determining how the interpolation works is called a resampling filter.
We could use all sorts of resampling filters and interpolation methods to figure out those 48 extra pixels. The absolute simplest thing we could do is to add four more rows and four more columns of pixels in some arbitrary color — say, red. This is called background interpolation, because the empty pixels are simply exposing a background color (red). This is what you’re doing in Photoshop when you resize using “Image” → “Canvas Size,” instead of “Image” → “Image Size.”
This, of course, is a terrible outcome when we want to resize an image: we don’t perceive the new outputted image to really look like the original inputted image at all; the original square is blue, the new one is blue and red. Background interpolation is only possible when adding pixels (i.e. when making the image bigger or when upsampling), and even then it is essentially useless for resizing, except as a means to show where the new pixels are.
Another very simple interpolation method is to make our new pixels the same color as their neighboring pixels; this is called nearest-neighbor interpolation. This produces a much better result than background interpolation, especially for a simple square like this.
Downsampling (i.e. making the image smaller) is not as intuitive as nearest-neighbor interpolation, but it helps to remember that the math involved is OK with fractional pixels. First, the new pixel grid gets applied to the orignal image. Because there are fewer pixels to store the image information, some of the pixels in this new grid will contain multiple colors; in the example below, some pixels contain both blue and white.
Outputting the image in this way to the physical pixels in the real world isn’t possible, though — each pixel can be only one color. The final color of each pixel in the new grid is determined by the color at its center point. In other words, that center point is sampled to determine the final color, which is why nearest-neighbor interpolation is sometimes called point sampling.
For anything more complicated than a line or square, nearest-neighbor interpolation produces very jagged, blocky images. It’s fast and creates small files but doesn’t look very good.
Most resampling filters use some sort of variation on nearest-neighbor interpolation — they sample multiple points to determine the color of a pixel and use math to try to come up with a smart compromise for those values. Bilinear interpolation, for example, creates a weighted average of colors. It produces much nicer results than nearest-neighbor interpolation.
One way that resampling — and the specific resampling filter used — can affect file size is by affecting the colors in the image. Bilinear interpolation gives the circle smooth edges, but that means giving the image more colors. The original blue circle has two colors, blue and white. The resized circle has more — some pixels are a pale bluey-white. All else being equal, more colors in an image will make the file size bigger. This is one reason why resizing an image to have fewer pixels sometimes gives it more bytes.
What All This Means for Us
In order to make our outputted images smaller, we’ll want to look at ways to reduce the number of colors without sacrificing quality. Choosing an appropriate resampling filter has one of the biggest effects, but other settings can affect the number of colors in the output as well. I’ll also discuss settings that control file compression and quality and that eliminate extraneous data.
Two main ImageMagick settings are of interest to us, convert and mogrify. Both of these perform similar operations, but mogrify is intended to be used with multiple files at once, while convert handles only one image at a time.
A simple ImageMagick operation might look like this:
convert input.jpg -resize 300 output.jpg
This says that we want ImageMagick’s convert function to take input.jpg and resize it to 300 pixels wide, and then save that to output.jpg. The -resize 300 part is an example of one of ImageMagick’s many built-in functions. Each function uses the same format: -functionName option.
Using mogrify is similar, but with the syntax reordered a bit:
mogrify -path output/ -resize 300 *.jpg
This says that we want ImageMagick’s mogrify function to take all JPEG files in the current directory (*.jpg), resize them to 300 pixels wide and then save them in the output directory.
Functions can be combined for more complex results:
As before, this resizes input.jpg to 300 pixels wide, but this time it also sets the JPEG quality to 75 before saving it to output.jpg.
I’ve performed hundreds of tests31 to see which combinations of functions and options produce the smallest results at an acceptable quality.
Testing and Results
I wanted to keep the file size as low as possible but keep the quality high — indistinguishable from Photoshop’s “Save for Web.” To do this, I used both a subjective quality measure — my own opinion on whether the output looks good — and an objective quality measure — structural dissimilarity32 (DSSIM). DSSIM compares two images — in this case, my test image and a control generated by Photoshop’s “Save for Web” — and generates a score. The lower the score, the more the images resemble each other; a score of zero means they are identical. To make sure test images look the same as Photoshop’s output, I wanted a mean DSSIM score of 0.0075 or lower. In research released last year33, RadWare34 found that image pairs with a DSSIM score of 0.015 were indistinguishable to their test users.
To make sure the results weren’t biased by outliers, I tested on 40 images that are a mixture of JPEGs and PNGs; photos, drawings and line art; color and monochrome; transparent and opaque. I also tested at three output sizes (300, 600 and 1200 pixels wide) from a variety of input sizes. Finally, I tested both with and without image optimization.
From my tests, running ImageMagick with the following settings produced the smallest results, while generally being visually indistinguishable from Photoshop’s output:
That’s a lot to take in, so let’s go through each bit and see what it means.
Mogrify vs. Convert
As mentioned, ImageMagick provides two similar tools for manipulating images: convert is the basic image editor and works on one image at a time; mogrify is mostly used for batch image manipulation. In an ideal world, these two tools would produce identical results; unfortunately, that’s not the case — converthas a bug35 that makes it ignore one of the settings I recommend using (the -define jpeg:fancy-upsampling=off setting, discussed below), so using mogrify is better.
Choosing a resampling filter in ImageMagick is surprisingly complicated. There are three ways you can do this:
with the resizing function you choose,
with the -filter setting,
or with the -interpolate setting.
The most obvious resizing function to use is -resize, but it creates files that are too large. I looked at 11 different functions and found that -thumbnail does the best job of optimizing quality and file size. In most cases, the -thumbnail function uses a three-step process to resize images:
It resizes the image to five times the output size using the -sample function, which has its own built-in resampling filter that’s similar to the nearest-neighbor approach discussed above.
It resizes the image to its final output size using the basic -resize filter.
It strips meta data from the image.
This means that if we were resizing an image to be 500 pixels wide, -thumbnail would first resize it to 2,500 pixels wide using -sample; the result might be blocky and pixelated, as we saw in the examples above, but the operation would be fast and would produce a result with a small file size. Then, ImageMagick would resize this image from 2,500 pixels wide to 500 pixels wide using -resize. This smooths out the blockiness, but the file size stays pretty low. Finally, ImageMagick would remove meta data to get an even smaller file.
The second way to choose a resampling filter in ImageMagick is with the -filter setting. Some resizing functions (such as -sample) have a built-in resampling function that’s always used, but others (such as -resize) have defaults that can be overridden with -filter. The -filter setting gets used in -thumbnail’s second step, because that step uses -resize.
I tested 31 different settings for -filter and got the best results with Triangle. The Triangle resampling filter is also known as bilinear interpolation, which I discussed above. It determines pixel color by looking at a support area of neighboring pixels and produces a weighted average of their colors. I found it best to specify this support area at two pixels using the -define filter:support=2 setting.
The third way to choose a resampling filter, the -interpolate setting, is ignored by -thumbnail, so it’s not needed here.
In addition to the settings above, by default ImageMagick also uses something called JPEG fancy upsampling39, an algorithm that tries to produce better-looking JPEGs. I’ve found that it produces larger files and that the quality difference is negligible, so I recommend turning it off with -define jpeg:fancy-upsampling=off.
Images pretty often get a little blurry when resized, so programs such as Photoshop will often apply some sharpening afterwards to make the images a little crisper. I recommend using an unsharp filter — which, despite its name, actually does sharpen the image — with the setting -unsharp 0.25x0.25+8+0.065.
Unsharp filters work by first applying a Gaussian blur40 to the image. The first two values for the unsharp filter are the radius and sigma, respectively — in this case, both have a value of 0.25 pixels. These values are often the same and, combined, tell ImageMagick how much to blur the image. After the blur is applied, the filter compares the blurred version to the original, and in any areas where their brightness differs by more than a given threshold (the last value, 0.065), a certain amount of sharpening is applied (the third value, 8). The exact meanings of the threshold and numerical amounts aren’t very important; just remember that a higher threshold value means that sharpening will be applied less often, and a higher numerical amount means that the sharpening will be more intense wherever it is applied.
I mentioned that one of the biggest reasons why resized images get bloated is because of all the extra colors in them. So, try to reduce the number of colors — but not so much that the quality suffers.
One way to reduce colors is with posterization, a process in which gradients are reduced to bands of solid color. Posterization reduces colors to a certain number of color levels — that is, the number of colors available in each of the red, green and blue color channels that images use. The total number of colors in the final image will be a combination of the colors in these three channels.
Posterization can drastically reduce file size, but can also drastically change how an image looks. With only a few color levels, it creates an effect like what you might see in 1970s rock posters41, with a few discrete bands of color. With many color levels — for example, 136, as I’m suggesting — you get a smaller file without losing much image quality.
Dithering is a process that is intended to mitigate color banding by adding noise into the color bands to create the illusion that the image has more colors. In theory, dithering seems like a good idea when you posterize; it helps the viewer perceive the result as looking more like the original.
Unfortunately, ImageMagick has a bug that ruins images with transparency when dithering is used like this. So, it’s best to turn dithering off with -dither None. Luckily, even without dithering, the posterized images still look good.
While not strictly a matter of color reduction, setting an image’s color space is a related concept. The color space defines what colors are available for an image. The image below shows that the ProPhoto RGB color space contains more colors than the Adobe RGB color space, which in turn contains more colors than the sRGB color space. All of these contain fewer colors than are visible to the human eye.
sRGB was created to be the one true king of color spaces on the Internet. It has been endorsed by the W3C and other standards bodies; it is the required color space in the CSS Color Module Level 357 and the SVG specification58 and is the assumed color space of the WebP59 specification; and it is explicitly referenced in the PNG specification60. It’s also the default color space in Photoshop. In short, sRGB is the color space of choice for the web platform, and, assuming you want your images to render predictably, using it is probably a good idea.
Quality and Compression
With lossy image formats such as JPEG, quality and compression go hand in hand: the higher the compression, the lower the quality and the lower the file size. We could drastically reduce file size by setting a high JPEG compression factor, but this would also drastically reduce quality. A balance is needed.
When I was doing my tests, the control images I created with Photoshop had a JPEG quality setting of high, or 60. I’ve found that this setting works well for me and strikes the right balance between quality and file size. However, in my ImageMagick settings, I’m recommending -quality 82. Why?
It turns out that JPEG quality scales are not defined in a specification or standard, and they are not uniform across encoders. A quality of 60 in Photoshop might be the same as a quality of 40 in one program, quality B+ in another and quality fantastico in a third. In my tests, I found that Photoshop’s 60 is closest to -quality 82 in ImageMagick.
For non-lossy image formats, such as PNG, quality and compression are not related at all. High compression doesn’t change how an image looks at all and only comes at the expense of processing load (in terms of CPU usage, memory usage and processing time). Assuming that our computers can handle this load, there’s no reason not to max out PNG compression.
PNG compression in ImageMagick can be configured with three settings, -define png:compression-filter, -define png:compression-level and -define png:compression-strategy. Compression filtering61 is a pre-compression step that reorganizes the image’s data so that the actual compression is more efficient; I got the best results using adaptive filtering (-define png:compression-filter=5). Compression level is the amount of compression that gets applied; I recommend maxing this out to 9 (-define png:compression-level=9). Finally, the compression strategy setting determines the actual algorithm that’s used to compress the files; I got the best result with the default compression strategy (-define png:compression-strategy=1).
In addition to the actual image data, image files can contain meta data: information about the image, such as when it was created and the device that created it. This extra information could take up space without providing any benefit to our users and should usually be removed. Above, when describing the -thumbnail function that handles the actual resizing of the image, I mentioned that its third step involves stripping meta data. Even though that’s true, -thumbnail doesn’t remove all of the meta data, and there are gains to be had by using -strip and -define png:exclude-chunk=all as well. Neither of these should affect quality at all.
JPEGs and PNGs can be saved to use either progressive or sequential rendering. Sequential rendering is usually the default: The image will load pixels row by row from top to bottom. Progressive rendering means the image is delivered and rendered in stages.
For JPEGs, progressive rendering can happen in any number of stages, as determined when the file is saved. The first stage will be a very low-resolution version of the full image; at each subsequent stage, a higher-resolution version is delivered until, in the last stage, the full-quality version is rendered.
PNGs use a type of progressive rendering called Adam7 interlacing63, in which the pixels of the image are delivered in seven stages based on an 8 × 8 pixel grid.
Both types of progressive rendering can be controlled in ImageMagick using the -interlace setting. But should progressive rendering be turned on or not?
For both JPEGs and PNGs, progressive rendering increases the file size, but for a long time conventional wisdom held that it was worth turning on65 because it delivered a better experience to the user. The idea is that even if the full, perfect image doesn’t load quite as quickly, users would be able to see something earlier, and that something is probably better than nothing.
Last year, though, Radware66 released research on progressive JPEGs67 that shows users actually tend to prefer sequential image rendering. This is just one study (and one that hasn’t gone through a formal peer review process), but the results are interesting. Radware’s results, combined with the fact that sequential images have smaller file sizes, lead me to recommend the -interlace none setting in ImageMagick.
I mentioned above that I ran tests both with and without image optimization. All of the settings I’ve described so far are what I’d recommend if you’re not optimizing your images. If you can optimize them, though, my recommendations would change slightly: I found that slightly different -unsharp settings work better (-unsharp 0.25x0.08+8.3+0.045 versus -unsharp 0.25x0.25+8+0.065 without optimization) and that there’s no need to use -strip.
A lot of different image optimizers are out there. I tested image_optim68, picopt69 and ImageOptim70, all of which run images through a battery of different optimization steps. I tested these tools both individually and in combination, and I found that the best results come from running files through all three, in the order listed above. That said, there are diminishing returns: After the first round of optimization with image_optim, the extra compression that picopt and ImageOptim achieve is quite small. Unless you have a lot of time and processing power, using multiple image optimizers is probably overkill.
The Results (Or, Is This Even Worth It?)
The settings I’m recommending are, admittedly, complicated, but they are absolutely worthwhile for your users. When I set out to do these tests, I did so hoping that I’d be able to drastically reduce file size without sacrificing image quality. I’m happy to report that, using the settings described above, I was successful.
On average, my recommended settings and optimizations reduced file sizes by 35% compared to Photoshop’s “Save for Web”:
Savings compared to Photoshop Creative Cloud
File size: mean
File size: % difference
My settings, with optimization
My settings, without optimization
Photoshop CC, with optimization
Photoshop CC, without optimization
My settings without optimization even beat Photoshop’s output with optimization!
Compared to ImageMagick’s default image resizing, my recommendations resulted in file sizes that were 82% smaller on average:
Savings compared to ImageMagick defaults
File size: mean
File size: % difference
My settings, with optimization
My settings, without optimization
Compared to WordPress’s default image resizing (which uses ImageMagick under the hood), my recommendations resulted in file sizes that were 77% smaller on average:
And remember, this is all with the images being visually indistinguishable from the Photoshop output, on average.
Using the settings I described above can get you huge file size savings without hurting quality. This can be a huge boon to your website’s performance!
How To Implement This In Your Projects
I hope the benefits of using this technique are obvious. Luckily for you, the hard part — figuring all of this out — is all done. Despite the apparent complexity of the recommended settings, implementing this in your own projects can be fairly quick and easy. Although running this whopper of a command from the terminal every time you want to resize an image may be inconvenient, there are simpler options that require very little muss or fuss.
Most command-line shells allow you to setup aliases and functions for complicated commands. If you use a bash shell, you can add a function to your .bash_aliases (or .bashrc) file that acts as an alias for my recommended command:
PHP86 has ImageMagick integration called Imagick87 that makes it relatively easy to run ImageMagick operations from within your PHP scripts. Unfortunately, Imagick is a bit limited and doesn’t let you do some things that I recommend, like setting a resampling filter to be used with the thumbnail function.
But, again, you’re in luck: I’ve created a composer package called php-respimg9488 (packagist89) that handles everything described above. You can include it in your projects with Composer90 by running:
composer require nwtn/php-respimg
Then, you can resize your images like this:
use nwtnRespimg as Respimg;
$image = new Respimg($input_filename);
$image->smartResize($output_width, 0, false);
Content Management Systems
If you use a CMS, you might want to take advantage of these savings for the thumbnails and other resized images that get generated when users upload images. A few options are available to you.
If your CMS is built on PHP, you could bake the PHP stuff above into a theme or plugin. However, if your PHP-based CMS happens to be WordPress, then there’s no need for you to do that work: This is now integrated into the Responsive Issues Community Group’s plugin RICG Responsive Images9591 as an experimental feature. After you install the plugin, all you’ll need to do to activate these ImageMagick settings is add the following lines to your functions.php file:
add_theme_support( 'advanced-image-compression' );
add_action( 'after_setup_theme', 'custom_theme_setup' );
If you don’t use WordPress and don’t want to try to hack this into your CMS, most CMS’ include some way to modify image defaults (especially for quality). You might be able to get a lot of these benefits with a few simple changes to your CMS’ configuration. Check out the documentation and see what options are available to you.
The settings I’m recommending are obviously far more complex than simply using -resize, and this complexity brings a performance hit with it. Using my recommendations will take longer and use more resources on your computer or server. In my tests, I found that memory and CPU usage peaks were comparable but that my settings took an average of 2.25 times longer to render an image than from just using -resize alone.
As designers and developers, we have an enormous amount of power to shape how — and how well — the web works. One of the biggest impacts we can have is to make our websites more performant, which will improve our users’ experiences and even make our content available to whole new markets92. Cutting image weight is a relatively simple and hugely impactful way to increase performance, and I hope the information outlined above helps you make a difference to your users.