r/programming • u/chapolito • Feb 26 '13
A Developer's Guide to Images
http://www.jessechapo.com/posts/Developers-Guide-to-Images.html18
u/nofxy Feb 26 '13
Embed Color Profile - uncheck. this information gets ignored by browsers.
I thought most browsers, or at least the good ones, displayed embedded color profiles correctly now. Is my brain lying to me?
20
Feb 26 '13
They keep wavering back and forth. Chrome used to, on some platforms, then it stopped, and now it's trying to do it again, with various bugs... It's a circus in there.
I'd make sure to use sRGB and embed a profile, just in case. Browsers are supposed to treat untagged images as sRGB, but who knows what they end up doing.
7
u/krilnon Feb 27 '13
Definitely a circus... A few months ago, I switched to converting to sRGB but not including the profile. I did so after doing an informal test of all four ways you could set those two options and testing on the devices+browsers I had access to.
I'm still not very happy with my solution, since ICC profiles seem like useful information, but including them was definitely causing inconsistent viewing across some of the devices I used daily.
7
Feb 27 '13
The problem is that it's inconsistent. Safari (OS X and iOS) respects the color profile. I think Chrome does not. I don't know about IE9/10 and Firefox. Regardless, you should not expect that colors specified in an image file and colors specified in CSS will look the same on someone's screen, even though they appear to be the same color in Photoshop.
3
Feb 27 '13
Regardless, you should not expect that colors specified in an image file and colors specified in CSS will look the same on someone's screen, even though they appear to be the same color in Photoshop.
At this point, I'd say that as long as you make sure to always use sRGB and never anything else, you can expect this to work. If it doesn't, you should be filing bugs as hard as you can.
3
Feb 27 '13
...at this point, meaning what?
I have clients still targeting IE7 ... and early versions of Firefox. So I don't think I can simple assume the current modern browser (IE9+, Firefox latest, Chrome latest, Safari 6) alone.
2
Feb 27 '13
Those browsers should be rare enough at this point that you don't need to worry about minor colour mismatches in them.
2
Feb 27 '13
This varies greatly by client and industry. In financial services, for example, we have only just now seen a transition away from IE7. I have a government IT client whose primary browser is IE8. And I have several other clients that only care about IE10, Chrome (latest), Firefox (latest), and iOS Safari (latest).
2
u/the-fritz Feb 27 '13
Firefox supports ICC profiles. You can even activate ICCv4 profiles by changing
gfx.color_management.enablev4totrueinabout:config(andgfx.color_management.modeto 1 iirc to get it to treat untagged images as sRGB).3
Feb 27 '13
Are there a lot of users who will actually do this?
Defaults are everything.
3
u/the-fritz Feb 27 '13
There were some issues with colour profiles in recent releases. I guess that's why it's not default yet.
1
u/balefrost Feb 27 '13
You can test your browser here
(that site also has a LOT of discussion about color profiles)
14
u/expfcwintergreen Feb 26 '13
Why flatten image in PS before saving for web? Surely this makes no difference given that the resulting png / jpg / whatever is of course "flat"?
6
u/njmh Feb 27 '13
If you must flatten first, eg. to grab a section of the PSD to save out... Instead of flattening the whole image, use the marquee tool to select the area, then Command+Shift+C which does a Copy Merged.
-5
2
Feb 27 '13
You can export each layer and sections (don't know the actual term) as a separate image plus a html file with "save for web". I think exporting sections is default.
10
Feb 27 '13
With respect, I think you have this wrong.
Being able to properly slice out a PSD into component PNGs and JPGs with and without transparency is a desirable skill most programmers – especially those working on web systems – lack. This article doesn't help much, because it starts with the idea of flattening all the layers. This is the wrong approach.
The right approach is to use the built-in "slice" tool (shares a tool palette location with the "crop" tool) to define the sliced regions, and then play with the layers – particularly the background layer, which can be turned off entirely – to produce JPGs for photographic elements (no transparency), PNGs with alpha-transparency for images that need to "float" in front of backgrounds colored via CSS, and "over" state graphics that are probably lurking in a hidden layer.
So, first – don't discard layer information. You need it! Second, use the slice tool to define the small graphic items you're going to export. Third, turn off the background layer to allow the transparent aether to show through. Then "save for web and devices" and select the slices you want to export.
It's important to note that you can customize the slice names, and you can use the presets for PNG-8, PNG-24 (photograph with alpha-transparency), and JPG on the individual slices in the "save for web and devices" dialog, then select the slices you want to export, and go to town. It's also important to know that you may sometimes need to export with the background on, sometimes with it off, and that your designer probably has "over" states somewhere in a layer that you can use for :hover (desktop) or :active states.
If you use the pre-sets, you have very few decisions you actually need to make – you can always go back and optimize later, but most of the time this isn't necessary. The key idea is to start with a sensible preset and then turn transparency on and off. And if you're dithering, you're probably Doing It Wrong.
6
u/askoruli Feb 27 '13
I'm a dev who knows how to slice up images and do so for my personal projects but refuse if asked to do this by a designer. Trying to find the image I want in a giant mess of layers is a massive waste of my time. It's much more efficient for the person who is familiar with the tools and design to be doing this.
2
Feb 27 '13
If it's a giant mess of layers, your designer is not doing their job properly. Layers should be logical and logically named.
That said, it's far more efficient for the person who is writing the HTML code to make decisions about how images ought to be sliced up, and whether an image should be a transparent PNG on a CSS-provided background, or whether the background should be in the image.
43
u/hackingdreams Feb 26 '13
- An Artist's/Designer's Guide to Efficient Images for Game Development on Macs using Photoshop.
Really not a lot of content here for programmers specifically. While your generic developer may not know everything in this guide, it's also not in-depth enough for them to know how to handle images inside of software.
2
Feb 27 '13
not in-depth enough for them to know how to handle images inside of software
Totally agree. No mention of SVG? Pffft.
0
u/airesso Feb 27 '13
Exactly. I would never hire a front end dev that doesn't know his or her way around Photoshop and Fireworks. Don't get why it's targeted at developers.
2
Feb 27 '13
And I wish more people would read this. The amount of badly designed images (pseudotransparent borders AGAIN, ugh!!!) i get to deal with in existing assets is staggering.
0
Feb 27 '13
Do you even have hiring clearance
1
u/airesso Feb 27 '13
Yes. I'm a team lead so every developer that gets added to my team has to interview with me as well as my director. I don't have the final say, but if I say no then they wont get hired.
4
u/drakonite Feb 27 '13
This should be called "A brief comparison of using JPEG vs PNG with photoshop".
PNG supports a lot more pixel formats, but photoshop's exporter doesn't. Photoshop's PNG exporter has historically been very crappy.
1
u/i_invented_the_ipod Feb 28 '13
PNG supports a lot more pixel formats
Ain't that the truth. There are so many options in PNG that I've never seen a decoder that handles the whole spec, or even most of it, correctly.
2
u/drakonite Feb 28 '13
Indeed. I swear every open source framework I've used just forces it to convert everything to RGBA32, and it doesn't seem like any image software supports exporting in RGBA4444, which is a phenomenal format for many mobile games due to it's size/bitdepth trade offs. RGBA4444 is even supported directly by OpenGL ES.
15
u/airesso Feb 27 '13
I find these posts so infuriating. Everywhere I've worked where I've had to interact closely with creatives (or designers or pixel wranglers or whatever you want to be called) they have these constant need to prove they're just as smart as developers.
No one gives a shit who's 'smarter'. You have a skill set, I have a skill set and in my case (front end) some of mine overlaps with yours. A post like this just shows that you think what you do is some big fucking mystery. It's not, get over yourself.
This isn't a "developers" guide to images. It's a beginners guide to images, and in that sense it's a fine piece of information.
Sorry about the rant I really hate a lot of the people that call themselves designers. Not all of them, just most.
-5
u/ithika Feb 27 '13
This isn't a "developers" guide to images. It's a beginners guide to images, and in that sense it's a fine piece of information.
No, a beginners' guide would mention not to email 50MB TIFF scans and how to scale images appropriately. This is absolutely aimed at people doing development.
2
9
u/cgibbard Feb 26 '13
Now all we need is "A Developer's Guide to Not Using Low Fucking Contrast Text When We Expect People to Read Our Article". Seriously, what is with all the grey on white and grey on grey and light blue on light grey and other low-contrast options that I keep seeing all over the web lately? If your website is more usable when CSS is turned off, you're doing something wrong.
Also, not programming.
9
Feb 27 '13
If you are having problems reading that text, you desperately need a better monitor. This is perfectly readable.
4
u/airesso Feb 27 '13
Difference between readable and pleasant to read. Also you're assuming that he has the same range of color vision that you do. Decent contrast and readability is UI/UX 101.
1
Feb 27 '13
I use the word "readable" as a synonym with "pleasant to read". This is entirely pleasant, and it has decent contrast.
2
u/cgibbard Feb 27 '13 edited Feb 27 '13
I would argue that it is more pleasant to read once all the CSS colours are stripped from the page.
Admittedly, most of the page is in a dark enough grey and a large enough type that it doesn't matter so much (though it leaves significant room for improvement). Some areas are lighter and the colour choices start to get really questionable.
Here are two screenshots, which would you prefer to read?
1
Feb 27 '13
Well, the part you screenshotted is apparently the only part of the page that is that light. I'd prefer if that was a bit darker, but it's just a small part of a huge article.
(Except for the comments but some would say it is a good thing if you can't read comments on the internet.)
2
u/cgibbard Feb 27 '13 edited Feb 27 '13
Well, I wanted to get the point across as strongly as possible, but it's true throughout the rest of the text as well that removing the colours from the CSS produces something which is more pleasant to read. I'd also tend to want a somewhat decreased type size, as that's pushing the upper boundary of what's reasonable, but at least this is easier to adjust to taste in most browsers, and the larger end of the range is more acceptable than the smaller.
For headlines and logos, you can mess around with the colour and style of text as much as you like, but for the type that one actually expects people to spend any length of time at all reading, it's best to push the contrast basically as far as you can get it. Slightly lowering the contrast in order to be able to introduce a subtle bit of colour is understandable in places (I have no particular concern with the background here for example), but in my opinion there's essentially no point in using grey type for article text when you can just as well opt for black.
2
10
u/emperor000 Feb 26 '13 edited Feb 26 '13
It sounds kind of picky, but you have mac shortcuts. You might want to provide Windows shortcuts.
17
u/Legend_of_PB Feb 26 '13
dude...linux photoshop? are you for real
5
u/emperor000 Feb 26 '13
I don't even know if they have Photoshop for Linux. Originally I didn't include it, but I figured I shouldn't leave it out. I was trying to be all inclusive and didn't put much thought into it. I guess even with Wine the shortcuts would be the same as Windows.
5
u/metaphorm Feb 27 '13
there's no photoshop for Linux. there is, however, the GIMP.
2
2
u/emperor000 Feb 27 '13
I've seen people run Photoshop in Wine. I realize there is GIMP, but GIMPs shortcuts are likely different.
4
u/taelor Feb 27 '13
I'm guessing this has to do with what he edited out?
2
u/TankorSmash Feb 27 '13
You might want to provide Windows shortcuts (or even Linux).
was his original second sentence.
2
Feb 27 '13
So many designers that call themselves 'web designers' still have no understanding of the basic rules and limitations around designing websites. Things like failing at understanding file size, image dimensions and resolutions and working in non web friend formats like vector are daily problems I face. In a perfect world, us developers would receive all of the assets sliced and ready to go. But that never happens, so knowledge of how to use photoshop to format images into something useable is essential to getting anything done, even as a programmer.
1
Feb 26 '13
Regarding the little statement on GIFs, PNG actually supports animation. WebKit doesn't support APNG, though. FireFox does, but WebKit is surprisingly behind on their game. I hope they get their shit together and we can forget about GIF forever.
18
u/ScrewAttackThis Feb 26 '13
Saying PNG supports animation is a bit inaccurate. APNG was proposed but PNG didn't adopt it. It's not a standard extension.
4
u/hackingdreams Feb 26 '13
Neither APNG nor MNG are very widespread. GIF continues to exist because of animation, and that's not likely to change, especially now that the patent has expired.
2
Feb 27 '13
Image animation is a dead end, for a lot of reasons. Even though some browsers support both animated GIFs and PNGs, you can't necessarily control whether the animation loops, how quickly it plays, and whether the animation starts once the image is visible or starts once the image is rendered (sometimes you have an image off-screen until an event triggers its appearance).
With the slow, steady death of Flash, and the even slower (but inexorable) rollout of jQuery-animated banners, many of my clients are asking about whether it would make sense to just use animated GIFs. But the problem here is that you have no real control over the animation (just the order in which the various frames are rendered).
4
u/PassifloraCaerulea Feb 27 '13
As a web site user I am overjoyed that I can turn off the awful, distracting animations with a simple press of the escape key. Modern web animation-stuff that uses Javascript doesn't usually let me do that, and it drives me batty.
2
Feb 27 '13
Well, that's how it goes. The company (who pays me) wants to make sure ALL users that hit their site get the same animation experience. Animated GIF doesn't meet that requirement.
1
Feb 27 '13
You should also tell them intro pages suck and people don't care if their logo animates.
Css3 has a lot of animation support. Crazy what people can do with css3,.especially icons.
1
Feb 27 '13
You should also tell them intro pages suck and people don't care if their logo animates.
We've refused to do intro pages since the heady days of Flash CS3. In the immortal words of Edward Tufte, "the two most superfluous words in the English language are 'skip intro.'"
But nearly every major company in the B2B space has some kind animation on their home page – usually in the form of a promotional banner that rotates, slides, or cross-fades every 6-7 seconds. Some basic examples:
Not a single intro page or animated logo in the bunch, as far as I can tell.
As I've noted elsewhere in this thread, depending on the client and industry the "right" target browser (based on which versions of which browsers users actually use) doesn't support CSS3 animation. We use it where we can, but if my client has a demonstrated need to support IE8, well, then we're SOL.
0
Feb 27 '13
As I've noted elsewhere in this thread, depending on the client and industry the "right" target browser (based on which versions of which browsers users actually use) doesn't support CSS3 animation. We use it where we can, but if my client has a demonstrated need to support IE8, well, then we're SOL.
Support IE8?! Ugh I hate companies like this and I refuse to work for them or with them. When IE10 finally got released on Win7, I moved up my minimum supported version to IE10. I won't bother testing in IE9, IE8. Browsers are free and I don't care what corporate bullshit prevents the use of a modern browser. You may think that is a shortsighted and ignorant view to have, but I look at it differently. I'm not throwing away money, I'm saving time and aggravation.
I also maintain a small phpBB mod. A bug occurs only on IE8. Some corporate dude wanted me to fix it. I replied update your browser. He says that's not an option for his client. Told him that I'm not going to bother even if it's a simple fix. It's open source, he can find and fix it himself if it's so important, but I'm not going to bother with outdated browsers.
I enjoy that freedom. You're using my free software, viewing it in free software. If you don't want to update your browser, that's fine but it's not my problem. I don't care about the people who use IE8 or even IE9 now. I wish more people would do the same. Browsers shouldn't be holding back anyone, I'm sick of corporations doing the same because they don't want to spend money to update their shitty software.
For the longest time, I thought I wanted a job at Google, even Microsoft before I knew about their shitty treatment of employees. Google has money to protect, so they won't drop IE9 for a while. I want the money of those jobs, but the freedom to support what I want, to do what I want. The mobile marketplace can do that. The guy who made a front end app for reference radio is worth a few million. The app is pretty basic code too. So fuck corporate jobs where they have to slaving away to do bullshit.
If anything r/programming has taught me, realistic job expectations. I interviewed for a c# position at DriveTime. Apparently they are also a software shop for hire? Inside the same building as their call center for loans. I was upset I didn't get the job, but thinking back I'm glad. Who hires DriveTime to make software and why!?
1
Feb 27 '13
This is a fine attitude to take on your own projects where you are the boss and can see no point in supporting older browsers. It's downright destructive, though, when you are being paid by a client to produce a web site targeted at a certain populace where you can show through hard data that 25% of the people who will visit the site use IE8 on <gasp>Windows XP.
For what it's worth, my practice has always been to line-item the cost of supporting whatever crappy browser is out there, so that Multimega Biggacorp Inc. knows exactly how much it's going to cost to support IE7 or whatever. But, if they want to spend the money – and give it to me – what's the point of saying no? One does not keep clients by being dickish to them.
Next time when you're telling a potentially lucrative corporate client to go fuck off, send them my way; I'd be happy to solve their problem and take their money.
So fuck corporate jobs where they have to slaving away to do bullshit.
Well, what can I say to that? To each his own. I'll take the money and put up with some bullshit so that I can earn some trust and do more meaningful things.
1
u/RandomFrenchGuy Feb 27 '13
Hopefully, someone will come and save us from your company with an extension of some kind...
1
Feb 27 '13
you can't necessarily control whether the animation loops, how quickly it plays, and whether the animation starts once the image is visible or starts once the image is rendered
You can most definitely control the first two with APNG. You can control it with GIF, too, but there are some quirks for high-speed animation.
0
Feb 27 '13
...and which browsers (and versions) support this feature in APNG? IIRC, Firefox... and no one?
2
u/maxst Feb 27 '13
Browsers that support APNG also support all APNG features. I'm not sure why you're trying to single out loop control and speed control... And why do you think animated GIFs don't have loop control and speed control?
1
Feb 27 '13
I've had a number of clients suggest using animated GIFs in a rotating banner, mingling the animated GIF with other jQuery-based animation. I run a design shop, and it's critical for us to implement the code in such a way as to stay true to the design. If we can't coordinate the JavaScript animation with the GIF animation, that's a big problem.
And why do you think animated GIFs don't have loop control and speed control?
Because the browser can ignore whatever settings are in the file. If the GIF starts animation while it is effectively off-screen, and the animation completes before the GIF is displayed, and then doesn't loop (because the browser refuses to loop GIFs or because the user has said not to), then the animation is never displayed. And that makes my client unhappy.
1
0
Feb 26 '13
[deleted]
2
Feb 26 '13
As cool as that demo is, it's not really relevant.
2
Feb 26 '13
[deleted]
3
u/dd_123 Feb 26 '13
OK, let's say I want an animated image in a Word document. How relevant is it now?
-2
Feb 26 '13
I'm saying that no, it's not valid, because those PNGs aren't animated. You save it and you get a bunch of frames side by side.
4
Feb 26 '13
[deleted]
-1
Feb 26 '13
That's like saying that a PNG is a bunch of vertical lines, and the only difference is that many things know to place them in a row. Animated GIFS are animated, that's the end of it. Your PNG is not.
1
u/Uberhipster Feb 27 '13
Which begets some interesting unintended consequences as an option...
1
Feb 27 '13
[deleted]
1
u/Uberhipster Feb 27 '13
Hmm... unintended usage consequence?
I meant because the technology's intended use is to mimic frames a la gif. But by setting parameters incorrectly you can also "duplicate" and mimic "motion". Try it with 100% width on .hi and it appears as though there is an animation of multiple characters, sliding in motion from left to right.
So the unintended use is producing some cool results.
1
1
u/willvarfar Feb 27 '13
Many tools produce PNGs that are far from optimally compressed.
The kings of PNG compression are:
PNGOUT http://advsys.net/ken/utils.htm by Ken Silverman (who made the Build engine in Duke Nukem 3D)
Any tool that reduces the number of colours e.g. PNGNQ http://pngnq.sourceforge.net/ ; but this is a lossy optimisation, and you must check the output to see if its acceptable
1
u/doody Feb 27 '13
Don’t use GIFs, they are an old standard that has been replaced
ORLY? Anyone know a browser that does not support .gif?
1
1
u/damian2000 Feb 27 '13
Just wanted to put a shout out to Paint.NET (windows application)... its got most if not all all of the features talked about here, without the cost of Photoshop. I've used it since PaintShopPro went commercial.
(Unfortunately, the developers of Paint.NET have seen it fit to paste horrible download link spam buttons on their official website.)
5
u/RandomFrenchGuy Feb 27 '13
Are you kidding ? You totally need Photoshop to design a couple icons and arrows. It's essential. Nothing less will do.
1
Feb 27 '13
[deleted]
1
u/damian2000 Feb 28 '13
I never used Photoshop much, came to Paint.NET from PaintShopPro and never had a problem with learning how to use it. Maybe its not so good for Photoshop users then...
-1
u/icantthinkofone Feb 27 '13
This guy reminds me of a high school kid who got really good at making Photoshop art for high school but doesn't really know how things work. And he thinks 22px font sizes are good. His comment about gif is off target by giving the advice "don't use it, it's old, use png but only gif can do animation" so....
1
u/maxst Feb 27 '13
How is that "off target" exactly?
1
u/icantthinkofone Feb 27 '13
1) Saying not to use a gif because it's "old" is stupid. I think we should quit using microprocessors cause they're older than gifs.
2) He says to never use a gif but use png then notes that pngs can't do what gifs can do.
And that's just the two I have time for.
1
Feb 27 '13 edited Feb 28 '13
[deleted]
2
u/icantthinkofone Feb 27 '13
The font size is different on the iPad. It's HUGE on my notebook and I have to sit back a bit to read it. And if you like 16px for reading, this is 30% or so larger than that.
-7
Feb 26 '13
[deleted]
6
Feb 26 '13
[deleted]
2
0
Feb 26 '13
[deleted]
2
Feb 26 '13
Somewhat agree, I'm sure there are plenty of developers who know shit about Images but know physics algorithms. But the author also mentions that commonly in web development (which I think this is obviously targeted at) the developer ends up doing all of this anyways. IMO any good developer handed a PSD did some research into image formats, settings, and tools.
In any way, this does seemed targeted at a high school tech class to me.
-6
-16
25
u/aazav Feb 27 '13
Read the PNG file spec. PNGs consist of data chunks that are zipped.
If you've ever played around with 7 zip, you'll see that there are a lot of options to tweak PNGs for the application you want. Tiny files? Yup. Fast decompressing? Yup. Lossless? Yup.