Fixing JPG’s “Photocopier Effect” problem

If you make a copy of a copy of a copy, the quality will deteriorate with each subsequent version in a phenomenon called “generation loss.” It’s easy to understand why this happens with actual copier machines. Scanning and printing are based on noisy sensors and physical paper and ink, and the resulting noise will tend to accumulate.

Digital images should not suffer generation loss. In theory, a file can be copied over and over again, and it should be bit-for-bit identical to the original. However, lossy image formats, such as JPG, can behave like photocopiers. If you simply copy a JPG file, nothing changes. But if you open a JPG file in an image editor and then save it, you will get a different JPG file. Some information can be lost in the process, and compression artifacts will start to accumulate. Do this often enough, and the image will eventually degrade beyond use.

The problems with resaving JPGs

In this video, you can see what happens to image quality when you re-encode a JPG image many times.

JPG offers quality settings that result in a trade-off between compression and visual quality.

But if you just save the JPG at a high enough quality setting, there won’t be a problem, right? Not exactly. Information that is lost when JPGs are re-saved cannot be magically recovered. So if you take a JPG image that was saved with a quality of 70, then re-saving it with a quality of 90 will, of course, not make the image look any better. In fact, it will even be worse. Every additional JPG encoding will introduce additional loss, even if it is done at a higher quality setting than the original JPG.

To understand this problem, we have to appreciate how this format uses several mechanisms to reduce the file size of an image, some of which don’t accumulate while others do.

The first is a color space transformation. Digital images are typically represented as pixels containing three separate 8-bit RGB (red, green, blue) values, which are statistically correlated in most images. For example, in a grayscale image, the three channels are completely identical. So if image compression is the goal, RGB is not the best representation. Instead, JPG uses the YCbCr color space. The Y channel is called luma (the intensity of the light, i.e. the grayscale image), the two other channels, Cb and Cr, are called chroma (the color components). Besides decorrelating the pixel information, this color transformation has another advantage: The human eye is more sensitive to luma than it is to chroma, so in lossy compression, you can get away with more loss in the chroma channels than in the luma channel.

The color space transformation itself already introduces some loss, due to rounding errors and limited precision. If you transform an image containing all 16.7 million different colors from RGB to YCbCr and back, and then count the number of different colors, you’ll end up with only about 4 million different colors; most of the loss is in the red and blue channels.

The YCbCr color transformation by itself does not result in generation loss. It’s a relatively small, one-time loss in color precision, but it does not accumulate. JPG also does “chroma subsampling”—sometimes called “4:2:0”—that results in only the Y channel being encoded at full resolution; while the Cb and Cr channel resolutions are cut in half both horizontally and vertically. As a result, chroma channels are reduced to one third of the total.

Chroma subsampling contributes to generation loss and can lead to color bleeding or color drifting. The chroma channels become increasingly blurry with each iteration of subsampling/upsampling. For example, this is what happens if you take an image and save it with a JPG quality of 100 with 4:2:0 chroma subsampling:

While color space transformation and chroma subsampling can lead to generation loss, it isn’t the cause of real loss in JPGs, though.

The core of JPG compression is quantization, which is a very simple yet effective mechanism. If you want to compress some sequence of numbers—it doesn’t actually matter whether these numbers represent pixel values, DCT coefficients or something else—the amount of space you need to encode them depends on how large the numbers are. For smaller numbers, less bits are needed.

To make those numbers smaller, you divide them by some number—called a quantization constant—in the encoder, and then multiply it again by that same number in the decoder. The larger this quantization constant, the smaller the encoded values will become. But the image becomes more lossy because we’re rounding everything to integers here (otherwise the numbers wouldn’t really become smaller).

This also explains why re-saving a JPG file at a higher quality setting than the original is always a bad idea: you’ll get a larger file with more loss than if you would re-save it at the exact same quality setting.

Issues with other image formats

You might expect that JPG suffers from generation loss because it is a 25-year-old file format, and newer formats are better. But that’s not so. Modern image formats, such as WebP (released in 2010) or BPG (released in 2014) suffer even more from generation loss than JPG. WebP and BPG use variable-sized, larger macroblocks, which is good for compression, but can result in an error in one part of the image more easily propagating to other parts of the image. This does not mean that WebP and BPG are bad image formats, you just have to be careful in how you use them.

FLIF is a lossless image format that outperforms other lossless image formats. FLIF also has a lossy encoder that modifies the image so that the lossless compression works better on it. It is much less sensitive to generation loss because the format itself is lossless. Generation loss commonly occurs when you significantly modify the image between generations, for example by performing a rotation or resizing.

The color space of FLIF is YCoCg, which does not introduce loss, and there is no chroma subsampling, nor transformation to DCT that introduces rounding errors. Instead of using quantization, FLIF rounds small values to zero and discards a number of bits. This works because the values it encodes are differences (between predicted pixel values and actual pixel values), not absolute values (of DCT coefficients).

Avoiding generation loss

There are only two ways to avoid generation loss:

  1. Keep the number of generations as close as possible to 1—the generation count has a larger impact on the image quality than the actual quality settings you use. (For example, if you save an image first with a JPG quality of 85 and then re-save it with a quality of 90, the result will actually be more lossy than if you saved it only once with a quality of 80.)
  2. Don’t use a lossy format—when editing images, it is best to store the original and intermediate images using lossless image formats like PNG, TIFF, FLIF, or native image editor formats like PSD or XCF. Only when you’re done should the final image be saved using a lossy format like JPG to reduce the file size. If you later change your mind and want to do some further editing, you can go back to the lossless originals and start from there. When this is not an option—say, you find an image on the internet that you want to edit and reuse, chances are the image is a JPG file, and the original cannot be found. In this case, one thing you can do is track down the image using Google Image Search, and try to find the earliest generation, i.e. the oldest and highest resolution version of the image.

Cloudinary can help with minimizing the photocopier effect. You can upload the highest resolution, highest quality original image you have available (lossless if possible), especially if you’re using automatic format selection. Cloudinary always keeps your original image as is (adding zero generation loss) and each derived image is encoded directly from the original (adding one generation, which is inevitable). With that approach, you can ensure that your image assets are futureproof. When in the future, higher image qualities and/or resolutions are required or desired, or new image formats become available, it will be an effortless change.

 

[— This is a sponsored post on behalf of Cloudinary –]

Mighty Deals Exclusive! 500+ Linear Vector Elements & Icons – only $14!

Source

from Webdesigner Depot http://ift.tt/2byLY5F
via IFTTT

Essential design trends, August 2016

Color and layers. This pair of design elements has been the driving force behind many of the year’s trends. While we haven’t seen anything take over, like flat design a few years ago or more recently Material Design, elements of both styles are pushing designers to explore new things.

Both color choices and layering seem to have roots in those bigger trends and are being used in design schemes even without totally flat or material aesthetics. Here’s what’s trending in design this month:

1. Lots of layered elements

Layered elements and three-dimensional effects are the must-have technique in the 2D web space. Thanks to the fun techniques, and even better how-tos, introduced primarily by Material Design, layered elements are popping up in projects of all types.

What’s particularly nice is it gives a website a more realistic feel. The user can almost reach out and grab the elements on the screen. (And that’s a good thing!) The trick is that every layer should look real and light, and layers look natural.

Here are a couple of ways to start experimenting with layers in your design projects:

  • “Lift” elements off the background with a simple shadow or animation. Olle does this with multiple elements on different planes, but they all pull together and look natural.
  • Allow elements to intersect. Text can crossover into the space occupied by an image.
  • Parallax scrolling features are an interesting way to create layered elements (a foreground moving over a background) without being too overwhelming.
  • Use geometric shapes, animation and color variation to mimic depth in the design. Users should feel like they can almost fall into the visuals, such as the experience established by Delete Agency.
  • Create layers by going outside of the canvas, with elements that go beyond the background or edge of the screen.
  • Allow elements to rest on top of a textured background to create separation between the top layer (which users can imagine actually touching) and background layer.

2. Dark color schemes

For a while it seemed like every website was a minimalist ideal, including a stark white background. That trend has shifted as more dark color schemes are emerging as the design favorite.

And for good reason. A nice dark color scheme can be attention-grabbing and isn’t as harsh on the eyes of some users as bright white. On the flip side, dark aesthetics can be a little more troublesome if text is small or on smaller screens (so make sure to pay particular care to how elements render on mobile devices).

Elements that really stand out on dark color schemes include the use of cool video and animation, even if it is hardly recognizable; bold white typography, pops of bright color to accent calls-to-action or important information and the appropriate overall mood.

Remember as well, that dark doesn’t always mean black. Dark color schemes can be rooted in a variety of hues from reds to blues to greens. While black options are the most common, it is important to choose a rich black that is made from various color combinations. A flat black (or “K black” as print designers call it) will leave something to be desired in website design.

When working with dark color schemes take special care to make sure there is proper contrast between elements and that colors and images don’t get lost inside the dark nature of the design. White can be a good option as well as other primary colors with a lot of brightness or saturation. Remember to think of size contrast as well. Consider bumping up the size of all text elements by 10 to 20 percent when working with a dark framework to ensure readability.

 

3. Gradients make a comeback

The gradient—one of the techniques shunned by flat design—is making a comeback. (And it’s even being used in mostly flat design patterns.)

Gradients work because they do something that many people thought flat design lacked, which is to help create and establish depth. What’s new about gradients this time around is that they are not used to mimic textures or without purpose. Today’s trend focuses on bright-colored gradients that emphasize the content. From full-screen gradient overlays to backgrounds, almost anything goes when it comes to the technique… as long as it is bold.

Designers are making the most of the gradient comeback in a few distinct ways:

  • Gradient-“flat color” pairs mix both design ideas for a bold look, such as the website for WPcrew.
  • Two-tone gradients are a fun color overlay to add interest to a photo that might be somewhat lacking or to add depth to a background.
  • While many of these gradients seem to be on a more grand scale, they are being used for smaller elements as well, such as buttons or to bring attention to specific content.

There are still a few gradient don’ts to consider as well. (Since you don’t want that design to looking like it jumped right out of 2012!)

  • Be wary of small gradients. Use in icons is still not recommended.
  • Don’t overwhelm the content. A gradient overlay on a photo can be nice (just think of some of the cool effects that Spotify features regularly), but the photo still needs to be discernable.
  • Bold color gradients tend to have a light, cheery feel. Make sure this meshes with your content.
  • Pay attention to color combinations and contrast when it comes to readability. Some gradients can get light and white text can present a problem. Make sure to test readability against color, different responsive breakpoint and on multiple size devices. (With gradients, readability issues can sometimes pop up in places you wouldn’t expect.)

Conclusion

There’s nothing more fun than color when it comes to design. Trends in color are nice because they are elements that you can add to almost any style of design without a full-scale overhaul. The same is true of layered elements. This is a technique that can be added to an existing design to give it a more modern feel.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Mockup Scene Generator Bundle: I Am Creator Perspective Edition – only $14!

Source

from Webdesigner Depot http://ift.tt/2bxhdv5
via IFTTT

Popular design news of the week: August 22, 2016 – August 28, 2016

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

20 Amazing CSS Text Effects

 

Designing a Website Ten Years Ago

 

How Spotify’s UX Changed Over a Decade

 

Better Web Images

 

Designers Should Learn Marketing

 

Site Design: Android.com

 

Why is Health Care Design so Terrible?

 

CodeDammit: Learn Coding by Looking at Real Examples

 

All your UX are Belong to us

 

Landing: Free UI Kit for Sketch and Photoshop

 

What I Learned Working with Jony Ive’s Team on the Apple Watch

 

Apply Pixels: Industry Standard Design Tools

 

The Internet of Poorly Working Things

 

Canvas for iOS: In Realtime, Using Markdown, Instantly Shareable

 

Site Design: Wtfshouldidowithmylife.com

 

Design.blog

 

LinkedIn ProFinder Expands Nationwide to Help You Hire Freelancers

 

Stranger Things Type Generator

 

Linux Took Over the Web. Now, It’s Taking Over the World

 

Clever App Brings the Food Label into the Modern Age

 

AI to Help You Write Emails People will Actually Read

 

TeamMood: Track the Well-being of your Team, Easily

 

Lydia 6.0: The Payment App, Redesigned

 

Why AI Consolidation will Create the Worst Monopoly in US history

 

Apple Zero-days Mark a New Era of Mobile hacking

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Exclusive Mighty Deals Summer Font Bundle – 30 Fonts with Extended Licenses – only $29!

Source

from Webdesigner Depot http://ift.tt/2bXBuvW
via IFTTT

Comics of the week #354

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Doctor font

Tomato, tomatho

 

Not so clean office

Can you relate to these situations? Please share your funny stories and comments below…

eBook: Marketing for Developers Guide – only $14!

Source

from Webdesigner Depot http://ift.tt/2bouysd
via IFTTT

Twitter’s new button lets users DM you direct from your site

Twitter wants to be your everything. In the grand tradition of social networks since time immemorial (read: the mid-‘90s?), Twitter is putting a greater emphasis on its messaging feature, and trying to become your primary “portal” in the process. It wants to be the way you talk to people, and not just your colleagues.

Amongst the many different Twitter-related buttons that you can put on your site, you can now also use a button that takes people to a dialog that allows them to send a Direct Message (DM) on Twitter. It’s already being tested on the customer support accounts of a few different brands, and that’s an indicator of this feature’s target audience.

Twitter is already, in many ways, the place to go when you want some online support, or just want to complain about how it’s been a week and your new router/microwave/cellphone still isn’t working. While Facebook’s business pages are often used for much the same thing, tweets are “doubly public”, which is great for someone who really wants to complain. This messaging feature, however, gives brands a way to funnel people straight into a somewhat more private conversation, while still communicating with them on a platform that they already use.

It is also reasonable to assume that Twitter is using this feature to compete with Facebook. While nearly all Facebook users use the chat feature to talk to friends, Facebook has been pushing for brands and businesses to use the chat as well. They’ve redesigned their business pages to emphasize messaging, the integrated chat bots for businesses, and more.

For many people who actually use both services, Facebook is how they talk to friends and family, Twitter is how they talk to the world. Now both services are angling to be the way people do business online.

Man, LinkedIn had an opportunity there, and they really dropped the ball.

Corpo Font Family, 24 Sans & Serif Typefaces – only $15!

Source

from Webdesigner Depot http://ift.tt/2boQBLX
via IFTTT

The rise and rise of the brutalist design trend

Brutalism in web design is raw, rough, unpolished and everything that today’s standard of the aesthetically beautiful website isn’t. It goes way beyond minimalism (which will still be beautiful when designed properly) into a bare-knuckle and extremely stripped-down design that’s been called downright ugly by some.

In short, it’s a design trend that just isn’t supposed to do well in today’s best practice of usable-meets-modern…yet it is. At the very least, brutalism is making designers and everyone else take note in a way that’s very unexpected, given the irony of how this purposeful design choice is a throwback to the brutish design that did well in post-World War II Europe, where the need to rebuild inexpensively lead to cold, stark buildings that stood out like a sore thumb.

The fact that brutalism in web design is on many people’s radars now is also indicative of pushback from some design circles against today’s pretty web that’s obsessed with the harmony of colors, shapes, lines and design elements.

Where did brutalism come from?

To fully understand brutalism in web design, we have to realize that its roots go back decades, to architecture and industrial design. It was very popular from the 1950s to approximately the mid-1970s and was popular with both institutional and government buildings, which is perhaps no surprise given that both types of buildings are sometimes associated with harshness, coldness and a certain kind of ugliness that’s far from comforting and easy on the eyes.

In fact, brutalism as a word comes from the French for “raw,” which is another apt way of describing sites that are stripped-down and have no frills or aesthetic concern.

Some people may call Brutalism a design trend, others consider it anti-design. The concept applied to web design only came to the fore recently, with the popularity of brutalistwebsites.com, a site devoted to showcasing the movement.

Brutalist websites going viral

The trend was first picked up by Hacker News, but was quickly taken up by news sites including the Washington Post and CBC.

Pascal Deville, creative director at a Zurich ad agency, started brutalistwebsites.com to show that designers and developers can still create engaging sites without having to use the long list of design best practices that many want to follow in today’s web. From this philosophy, we glean another insight into the approach of brutalism: It’s a sort of rebellion against the conventional way many designers approach designing for the web today.

Interestingly, Deville makes the point that brutalism doesn’t just apply to the design of a site—it also applies to the backend work. In other words, to him, brutalism is just as much about the way a site is built, so if a site is a rougher, handmade, HTML site, that qualifies as brutalism, too.

Brutalism is therefore a design and development approach that touches on all aspects of the site-creation process. Your site’s not really brutalist if it just has a really rough and raw look, but its code uses dozens of libraries. Similarly, your site can’t qualify as brutalist if it was handmade, but it has a very polished and attractive look that promotes all the best practices of corporate design.

Well-known sites employing brutalism

It might seem that Brutalism in web design is a relatively new trend, but actually it’s been a thing all along; it’s just that design journalists have now started taking it seriously. There are actually some well-known sites that have been proud standard bearers of this design choice for quite some time.

Apple’s WWDC16

The website for Apple’s 2016 Developers’ Conference had what some would argue is a brutalist design scheme. This represents a further distancing from the old excesses of skeuomorphism. The site features:

  • a lot of negative (white) space;
  • very plain typeface that’s designed to mimic lines of code;
  • very few on-page elements overall.

Serge Khineika’s Bio Page

Serge Khineika is a UX and web designer whose professional website has a very raw and crude appearance. Interestingly, it as a very neat scrolling effect that reveals more edits, doodles and page elements as you scroll down. His site has the following brutalist elements:

  • an enormous amount of white space;
  • a very basic font style;
  • one black-and-white picture;
  • graphics meant to resemble old-school edits with a pen and paper.

37signals

Basecamp is a web-application company that used to be known as 37signals. The 37signals site is another memorable example of brutalism in web design since it was so stripped-down and bare-bones that it went way beyond minimalism just to the very bare necessities. Here’s what made its old site a study in brutalism. It features:

  • a lot of white and negative space;
  • ultra-simplistic typeface;
  • very basic illustrations and graphics;
  • very little text.

Y Combinator’s Hacker News

It’s highly appropriate that the site that caused the brutalism in web design trend to go viral, is also a brutalist site in and of itself! Hacker News is a no-frills, no-gimmicks site that delivers a raw, line-by-line page of trending topics with barely any color or consideration to aesthetics:

  • lots of white or negative space (even if part of it functions as a border);
  • very small typography that’s so hard to read users have to practically squint;
  • very simple navigation menu and footer;
  • only three colors on the site.

Brutalism as a design choice

Brutalism in web design has been around for a long time, but it’s really exploded into the public eye in recent months. If we broaden things past web design and go into architecture, then this design approach has been around since the 1950s.

What the body of evidence around brutalism makes clear, though, is that it is a design choice, above all else. It’s a knowing rejection of everything that’s attractive, easy on the eyes, and comfortable; and instead supports stark, raw ugliness in a sort of rebellion against design best practices that are meant to make us feel at ease and gives us something aesthetically pleasing.

As a result, brutalism is compelling, if for nothing else than to provide an alternative to the safe confines of design conventionalism.

LAST DAY: 22 Powerpoint Templates (7600+ slides) – only $27!

Source

from Webdesigner Depot http://ift.tt/2bzqN3P
via IFTTT