Design – Mr. Walker's Classroom Blog

PNG vs. GIF vs. JPEG vs. SVG – When best to use?

While we are working on images in our projects I ran across this from StackOverflow

QUESTION

When should certain image filetypes be used when building websites or interfaces, etc?

What are their points of strength and weakness?

I know that PNG & GIF are lossless, while JPEG is lossy.
But what is the main difference between PNG & GIF?
Why should I prefer one over the other? What is SVG and when should I use it?

If you don’t care about each and every pixel, should you always use JPEG since it’s the “lightest” one?

ANSWER

You should be aware of a few key factors…

First, there are two types of compression: Lossless and Lossy.

Lossless means that the image is made smaller, but at no detriment to the quality.
Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.

There are also different colour depths (palettes): Indexed color and Direct color.

Indexed means that the image can only store a limited number of colours (usually 256), controlled by the author, in something called a Color Map
Direct means that you can store many thousands of colours that have not been directly chosen by the author

BMP – Lossless / Indexed and Direct

This is an old format. It is Lossless (no image data is lost on save) but there’s also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that’s a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.

Good for: Nothing really. There isn’t anything BMP excels at, or isn’t done better by other formats.

GIF – Lossless / Indexed only

GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that for most use cases, there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.

GIF images can also be animated and have transparency.

Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.

JPEG – Lossy / Direct

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won’t notice. As a result it’s a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it’s bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

Good for: Photographs. Also, gradients.

PNG-8 – Lossless / Indexed

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.

Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.

Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their transparency, though. One method is PNGQuant, another is to save your files with Fireworks.

PNG-24 – Lossless / Direct

PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It’s very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than JPEGs, GIFs and PNG-8s, so you still need to consider if you really want to use one.

Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you’re not concerned about filesize, and want to get the best quality image you can.)

Just like PNG-8, PNG-24 supports alpha-transparency, too.

SVG – Lossless / Vector

A filetype that is currently growing in popularity is SVG, which is different than all the above in that it’s a vector file format (the above are all raster). This means that it’s actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.

For example:

This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes. It also means a small SVG logo can be used at a much larger size — something that would require a separate larger file with raster formats.

SVG file sizes are often tiny, even if they’re visually very large, which is great. It’s worth bearing in mind, however, that it does depend on the complexity of the shapes used. SVGs require more computing power than raster images because mathematic calculations are involved in drawing the curves and lines. If your logo is especially complicated it could slow down a user’s computer, and even have a very large file size. It’s important that you simplify your vector shapes as much as possible.

Additionally, SVG files are written in XML, and so can be opened and edited in a text editor(!). This means its values can be manipulated on the fly. For example, you could use JavaScript to change the colour of an SVG icon on a website, much like you would some text (ie. no need for a second image), or even animate them.

In all, they are best for simple flat shapes like logos or graphs.

I hope that helps!

Why people believe they can’t draw

What Does A Game Designer Do?

From Lifehacker: Career Spotlight: What I Do as a Game Designer

Career Spotlight: What I Do as a Game Designer

Designing a video game sounds like a dream job: getting paid to live in your imagination and think of new worlds that other will people will experience with glee. Of course, it’s also a ponderous amount of difficult work to implement those ideas into a finished product.

To learn a little about what it’s like to be a game designer, we spoke with Steve Bowler ofPhosphor Games. Steve has been working in various entertainment fields for twenty years and is now lead designer at Phosphor, a studio in Chicago. Steve was kind enough to take time out of his day and play along with our questions.

Pictured above: Horn, a game developed at Phosphor Studios.

Tell us a little about yourself and your experience.

My name is Steve Bowler. I’ve been working in entertainment industries (television, film, and video-games) since 1995 in various animation and design roles. My current title and position is Lead Designer at Phosphor Games, and on some titles (mostly our small mobile ones) I take on a Creative Director role.

What drove you to choose your career path?

A love of art and a bit of fate got this path kicked off. I graduated from college with a degree in illustration (and in 1994 that means all traditional media; I took the first Photoshop class NIUever offered, second semester of my final year), so my choices were limited. I lucked out when I found my way into traditional television animation (I can draw! I love animation! I have a degree in drawing!) and from there pushed myself further when I found a position at Midwaydoing motion capture on their titles. Throughout everything was always an inner drive to challenge myself to do more complex and more difficult things, so at Midway I taught myself how to do animation scripting with the help of a mentor there, and from that point on the design path became the new challenge.

How did you go about getting your job? What kind of education and experience did you need?

To do design for video-games all we want to see is a good sense of design principles, and the ability to do hard work. We have guys here with design degrees from DePaul, and guys in design who worked their way up through QA [quality assurance]. I would take a new entry level designer with no degree or “equivalent experience” who showed their work in creating their own game over someone with a degree who couldn’t show their work in a heart-beat.

Did you need any licenses or certifications?

It all depends on the individual and studios being applied to. We just want to see an ability to do the work. Some studios have bigger hoops you have to jump through. With the most popular (and most used) game engines now free or very low cost (such as GameMaker, Unity, and Unreal Engine 4), there’s no excuse to not know how to use an engine before you apply. Download it. Do the tutorials. Make something. Then be proud about it and show it off!

The Best Free Tools for Making Your Own Video Games

With the recent release of the free version of the Unreal Engine and the announcement of the free…Read more

What kinds of things do you do beyond what most people see? What do you actually spend the majority of your time doing?

What I think most people think is that we just do something once or twice and it works great! It’s just a matter of adding content, or maybe the “right” content. What actually happens is we iterate on something 100 times before it’s right. Even if we’ve done it before. Last night I worked on making an AI animate properly as it dropped off a ledge. It took me five hours and I had to reach out to two people for help thinking through the problem.

What misconceptions do people often have about your job?

That it’s all fun and games. Make no mistake, I really enjoy the challenges of making games. It’s one of the most mentally stimulating and rewarding fields I’ve ever worked in. It’s also caused me the most anxiety and stress. We work very, very hard making the stuff you love. Sometimes we even have the unfortunate circumstance with making the stuff you don’t love, and we worked hard to make that, too.

What are your average work hours?

I want to point out that my hours are not typical in our office, and aren’t typical for the industry. I have a particular hangup where I can’t let something go if I know I can make it better, so I work a lot. Honestly I stopped tracking my hours because it becomes depressing to think about. I bet if I counted an “easy” week for me (some nights I get to watch a DVD or a show or play a game I’m not working on) would be a 60 hour week. Most weeks I bet I do 80 hours at a minimum. I’m frequently stealing hours on the weekend to work on my laptop polishing things in the game or writing up a new RFP [request for proposal] or a pitch deck for an upcoming project, and most nights I wind up opening up the editor and working ‘til midnight or 1AM.

What personal tips and shortcuts have made your job easier?

Learning to fail faster and approaching each problem as a unique challenge has helped a lot. Even when you’re making a sequel to something you’ve already made once, there are always new challenges that have to be solved for and I don’t like leaning on old crutches. In our business it feels like often there are no shortcuts, so personal experience and problem solving are often the best tools of the trade.

What do you do differently from your coworkers or peers in the same profession?

Most designers I work with have been designers their entire career. I come from animated television and film, and then after that motion capture animation, and my degree is in flat traditional art, so I have a very broad “T” at the top of my work experience profile. I’m actually not a very good “traditional” designer in the sense that I don’t do visual scripting or level design better than any of my co-workers. What I can do is lean on what I’ve learned getting here and help craft entire systems and characters and tie them all together.

What’s the worst part of the job and how do you deal with it?

I think the worst part of the job is the hours and the stress. If you’re going to be effective at this level you have to care a lot about what you do, which takes away from your family time and that hurts sometimes. Okay, it hurts all the time when you’re not with your family. The only solution I have so far for it is to try and be as focused as you can on what you’re doing. If you’re at work, work. Make it as good as you can and don’t waste the time away from your family making garbage if you can help it. Then when you’re with your wife and kids, focus on them and make that time as great as you can.

What’s the most enjoyable part of the job?

The very best part of this job is hearing from someone that they liked what you did. Any stranger saying “You worked on that? I loved that!” will always make my day. Someone finding importance in your work, no matter how little and no matter what you do, I think helps make everything worth it.

What kind of money can one expect to make at your job?

Gamasutra has a really great industry salary guide that is fairly accurate across all game dev disciplines (design, art, programming, and production) that they update every year.

How do you move up in your field?

Doing great work, being dependable, and show a capacity or a yearning to take on more responsibility always works.

What do your customers under/over value?

Customers I think never value the work or effort it took to get the product into their hands, and I understand that. Nobody thinks about the laborers in China who made their iPhones, so it’s unreasonable for me to ask them to think about the work that went into the game that’s running on their iPhone. But it would be great if there was a bit more understanding. Nobody looks at a giant building and says “Oh my god what is this CRAP???” if one small cosmetic thing is wrong with one corner of the building, because they understand the amount of effort that goes into making something that big. People even seem to get how much work movies are because they can see humans there on the screen and mentally project how much time it would take to make that with a subconscious mental comparison of shooting a home movie. But games? Most people don’t make games, they just consume them. So they typically only evaluate them as a consumer.

What advice would you give to those aspiring to join your profession?

Make games, write code, make art, every single day. If you’re not doing it for your job, do it for yourself on your days off. You don’t get to be the best by taking a single class or earning a degree or even landing a single job. You have to constantly challenge yourself. The entire process is a journey and if you’re not constantly striving to improve yourself and your craft, you’re falling behind everyone else who is. And don’t force it! If you feel like it’s work and it isn’t natural to do those things, you should probably find something else that you love doing every day! But most importantly, don’t go into making games because you love playing games. You will only kill your hobby. You have to enjoy the challenge of creating this problem of a game that didn’t exist, and then fix that problem by creating that out of nothing.

This interview has been edited for clarity.

The Science of Why No One Agrees on the Color of This Dress

Whacky Thursday indeed. The Science is fun, the forums on the Internet are scary and rude. And it is simply interesting to realize what we all see Smile .

NOTE: None of the forums or the original approach are professional in tone or appearance and as such are not approved for use or reference in the class.

From Wired:

The original image is in the middle. At left, white-balanced as if the dress is white-gold. At right, white-balanced to blue-black. swiked

Not since Monica Lewinsky was a White House intern has one blue dress been the source of so much consternation.

(And yes, it’s blue.)

The fact that a single image could polarize the entire Internet into two aggressive camps is, let’s face it, just another Thursday. But for the past half-day, peopleacross social media have been arguing about whether a picture depicts a perfectly nice bodycon dress as blue with black lace fringe or white with gold lace fringe. And neither side will budge. This fight is about more than just social media—it’s about primal biology and the way human eyes and brains have evolved to see color in a sunlit world.

Light enters the eye through the lens—different wavelengths corresponding to different colors. The light hits the retina in the back of the eye where pigments fire up neural connections to the visual cortex, the part of the brain that processes those signals into an image. Critically, though, that first burst of light is made of whatever wavelengths are illuminating the world, reflecting off whatever you’re looking at. Without you having to worry about it, your brain figures out what color light is bouncing off the thing your eyes are looking at, and essentially subtracts that color from the “real” color of the object. “Our visual system is supposed to throw away information about the illuminant and extract information about the actual reflectance,” says Jay Neitz, a neuroscientist at the University of Washington. “But I’ve studied individual differences in color vision for 30 years, and this is one of the biggest individual differences I’ve ever seen.” (Neitz sees white-and-gold.)

Usually that system works just fine. This image, though, hits some kind of perceptual boundary. That might be because of how people are wired. Human beings evolved to see in daylight, but daylight changes color. That chromatic axis varies from the pinkish red of dawn, up through the blue-white of noontime, and then back down to reddish twilight. “What’s happening here is your visual system is looking at this thing, and you’re trying to discount the chromatic bias of the daylight axis,” says Bevil Conway, a neuroscientist who studies color and vision at Wellesley College. “So people either discount the blue side, in which case they end up seeing white and gold, or discount the gold side, in which case they end up with blue and black.” (Conway sees blue and orange, somehow.)

We asked our ace photo and design team to do a little work with the image in Photoshop, to uncover the actual red-green-blue composition of a few pixels. That, we figured, would answer the question definitively. And it came close.

In the image as presented on, say, BuzzFeed, Photoshop tells us that the places some people see as blue do indeed track as blue. But…that probably has more to do with the background than the actual color. “Look at your RGB values. R 93, G 76, B 50. If you just looked at those numbers and tried to predict what color that was, what would you say?” Conway asks.

So…kind of orange-y?

“Right,” says Conway. “But you’re doing this very bad trick, which is projecting those patches on a white background. Show that same patch on a neutral black background and I bet it would appear orange.” He ran it through Photoshop, too, and now figures that the dress is actually blue and orange.

The point is, your brain tries to interpolate a kind of color context for the image, and then spits out an answer for the color of the dress. Even Neitz, with his weird white-and-gold thing, admits that the dress is probably blue. “I actually printed the picture out,” he says. “Then I cut a little piece out and looked at it, and completely out of context it’s about halfway in between, not this dark blue color. My brain attributes the blue to the illuminant. Other people attribute it to the dress.”

swiked

Even WIRED’s own photo team—driven briefly into existential spasms of despair by how many of them saw a white-and-gold dress—eventually came around to the contextual, color-constancy explanation. “I initially thought it was white and gold,” says Neil Harris, our senior photo editor. “When I attempted to white-balance the image based on that idea, though, it didn’t make any sense.” He saw blue in the highlights, telling him that the white he was seeing was blue, and the gold was black. And when Harris reversed the process, balancing to the darkest pixel in the image, the dress popped blue and black. “It became clear that the appropriate point in the image to balance from is the black point,” Harris says.

So when context varies, so will people’s visual perception. “Most people will see the blue on the white background as blue,” Conway says. “But on the black background some might see it as white.” He even speculated, perhaps jokingly, that the white-gold prejudice favors the idea of seeing the dress under strong daylight. “I bet night owls are more likely to see it as blue-black,” Conway says.

At least we can all agree on one thing: The people who see the dress as white are utterly, completely wrong.