Episode Links

Abridged Transcript

Gary Rozanc
Thank you. So, the first thing that I want to talk to you about is the biggest mistake that I see in sites created by my students and other students is the size or optimization of images. I see sites with tons of images that take forever to download, making the site nearly unusable.
So, what type of mistakes, performance or otherwise, do you see in your entry-level designers at Etsy or other places you’ve worked?
Lara
Yeah, I think you hit the nail on the head there regarding images and the size of them. I also see some really complex graphics. So, things like CSS animations or tons of really complicated graphics that make the scrolling “janky,” is the professional/technical term for that. And then often a lot of blends or overlays or things like that that can also affect site scroll. But yeah, images is really the biggest one.
Gary
As an educator, is there a way for designers to determine or approximate performance while still in the visual mock-up stages? For example, if I make students complete a checklist of file size and site assets and number of HTTP requests while still in the visual design stage, would that be a good start? Or are there other strategies that I can incorporate?
Lara
That is such a wonderful idea! When I give talks and when I talk to designers about images in particular, I like to walk through the different kinds of formats and what they should be used for. Because you can kind of get a sense of their image compression algorithms—and I’ll get into that in a second—you can start to figure out how to optimize those for speed in just Photoshop, so you don’t even have to export it in order to start to see savings.
So, for instance, JPGs are loosely based on how humans perceive things, so they’re really good at areas of low contrast, smooth gradients, stuff like that. They’re good at discarding information in those areas. So if you know what an image format is good for, you can start to kind of figure out, in the design stage, how to optimize that. So for a PNG8, for example, you’ve got 256 colors in your color palette, and PNG8s are really good at compressing horizontal and vertical patterns, so the less noise you have and the more patterns you have horizontally and vertically, the smaller your image is going to be.
I would recommend that design educators do a little bit of research on the different kinds of image formats and how their compression algorithms work, which sounds really technical, but actually it’s pretty understandable and accessible. And that way you can say, “Okay, I can pick the right image format for this thing I’m looking at, and then when I get to the ‘save for web’ dialog in Photoshop…” that’s when you can start to see how big the file size is and start to play with things, like the number of colors in your color palette, the amount of dithering if you’re at a GIF or a PNG, and the quality for a JPG.
Gary
What about SVGs and all the other types of images? Do you have a recommendation, like we should be moving more towards that? Because I could encourage a student and say, “Well, you should be using this,” and this is the first time they’ve ever been exposed to this and they’re going to almost take it as gospel before they actually start to discover on their own. So, knowing that, should I be leveraging something as a little bit better than the other?
Lara
Yeah, sure, that’s a really good question. In the case of something like an SVG, or even something like CSS3 graphics, it’s just another tool in the toolbox. I have seen many designers say, “Aw, SVGs!” or “CSS3 gradients are the new thing! I’m going to use it for everything!” and that’s also not the best approach for performance. There’s never going to be a one-size-fits-all for anything. It’s all going to be, you know, “How complex is this image? How many colors does it use? What are the rounded edges like?” It’s stuff like that.
So, SVGs are really powerful when you’ve got a very simple image, something with minimal colors, when you can draw it with a small number of paths, when it won’t bloat your HTML file. Obviously SVGs are incredibly powerful. But just like the other image formats, you’ve “got to know when to hold’em.”
Right, and that’s why I like your idea of having—I think you mentioned effectively a budget, right? So, you can start to see what your file sizes are going to be as you’re in the visual design stage, and if you give yourself a cap, you can kind of have this cap and trade. Let’s say I want to add more fonts, something more beautiful than just system fonts. Well, that’s going to add some page weight, so let’s see where I can save it with images. Maybe I can make my images smaller, maybe I can remove transparency, maybe I can do all these other… You have tons of levers when it comes to images and it’s really all about what’s right for any given visual design.
Gary
Yeah. A lot of places, a lot of schools, they may not teach HTML right away. They may back-end that, so that’s not something they learn until junior/senior year. Some places do it in the beginning, some places don’t do it at all. I’m just trying to think “How can I do this without, in just the visual stage when they have absolutely no experience with HTML and CSS, is there a way to do that?” The only thing that I can wrap my head around is just, no matter what, even if it’s a visual mock-up, that they still know file size.
Lara
Yeah, totally. Yeah, and that’s even before you export it, you can see in the “save for web” dialog how big the file is going to be. It’s pretty great.
Gary
I’ve had your book and I’ve read through it, but things really started to sync with me when I saw you speak at Generate Conference. What really got me excited was when you started talking about photography, and that really got me to rethink how could we approach photography as educators.
For the listeners unfamiliar with Lara’s talk, she presented strategies for taking photos that communicate the necessary information but have less pixel information—for example, by blurring out backgrounds that don’t really help. So, do you have any ideas for a good student project that could take photographic performance into consideration, when they initially take the photo or once they get into editing?
Lara
Yeah, totally. So, you were absolutely right in the introduction, I ran my own wedding photography business and I also studied street documentary photography and prog, and a lot of that work, as you know, has to do with taking a bunch of stuff that’s in front of you and making it look good. And you have control over nothing; you have control over none of the light sources, or the way the people are moving, or anything. And you just make it work.
So, if I’m thinking about this scene that’s in front of me, I’m thinking about composition, I’m thinking about areas of contrast, I’m thinking about distracting elements. If I’m a student who’s thinking about these things, one additional thing to think about is what parts of this image might be unimportant, what parts of this image might be areas of low contrast, and then additionally, if I were to show this image at different screen sizes—a desktop, a tablet, a mobile phone—can I use a tool like the new picture element or source set to crop the image differently. So, depending upon what parts of your image are important to communicate to the viewer, you can use this new HTML specification called “picture” to show different pieces of the image depending upon screen size, which may be really helpful on smaller screens, on larger screens, etc.
Gary
I haven’t taught my students formally the picture element…
Lara
Yeah, it’s brand new.
Gary
…But I’ve just shown them off the cuff—because that one makes perfect sense to me. But the srcset—when you get that specific size string where you have the context, the size in the context… I don’t get that.
Lara
It’s really, really hard.
Gary
Do you understand it?
Lara
Barely. So, actually we’re starting to play with this a bunch at Etsy. We have this new seller handbook… For those of you who aren’t familiar, Etsy is a marketplace where people around the world can connect to buy and sell unique goods. For people who are selling their wares, we want to provide them with a bunch of good resources to best sell their items. In this new handbook, we want it to be accessible on a range of devices, and we obviously want to have pictures and illustrations to represent what we’re talking about. We want to deliver the right image size at the right time; we don’t want to deliver unnecessary overhead to our users.
So, we’re using srcset to say, “At this screen size, deliver this file size and width and height of an image to our users.” So that, to me, makes sense. That’s not the art direction use case, that’s a different use case. But yeah, for me, it has taken a really long time to wrap my head around it, and even in implementation it takes me a lot of trial and error to get it to work the way I think it should.
Gary
The best that I can come up with is that it does what media queries would do on the back-end. And so for me, I look at it initially and think that it’s redundant, but then I stop and realize “No, it’s coming from the HTML and it’s giving the browser a set of intentions.”
Lara
The beauty of this is that the browser gets to choose which one is going to be right. So, instead of just giving it directions and saying, “At this screen size, download this one, etc.,” which can create a lot of complications if you don’t write your media queries correctly, you may end up downloading two or more images although you’re just delivering one to your user. So you’re right, instead of doing it with CSS, you’re able to do it actually in your HTML using the image element with these fancy new attributes or using the picture element depending upon the use case.
Gary
That’s great, because like I said, I was just beating my head against a brick wall trying to figure out how I was going to explain that to people. Because I do things per semester, so I feel like next semester this has to be taught in my regular everyday stuff now, I can’t just keep kicking this can down the road.
Gary
This actually kind of an aside from design education, this is my own curiosity as a designer, and I do coding and developing as well: so, somebody who has an Etsy store—there must be a heck of a lot of back-end programming that helps the end user optimize their images, because I would assume a lot of people are just going to upload the 5MB thing they just pulled off their SD card, or try to. So, is that all done on the back-end from you guys?
Lara
It sure is. So when we have a user upload an image, that goes into our image processing system, so we’re able to export that image at a variety of sizes that we can use across the site. So, like a thumbnail version, a mobile version, a zoomed-in version, and then use those appropriately across the site to make sure, again, that we’re not delivering unnecessary bytes. Then we’re also running those images through additional compression. We do a lot of experiments to make sure that the additional compression doesn’t change the look of the image. We want to make sure that the photos still look amazing, because we’ve run experiments and seen that if we compress things too heavily or if we do anything that makes it look a little bit different, either sellers will notice and that’s obviously a terrible user experience, or buyers will notice and that’s an even worse user experience. So it’s very important to us, when we’re compressing these images and exporting them at different sizes, that we retain the look and feel of the original image.
Gary
Have you come up with some kind of algorithm yet that can take advantage of the art direction aspect of the picture element?
Lara
Yeah, there’s actually been a lot of work done using math—not at Etsy, but elsewhere—to start to figure out which are the interesting parts of the image and the very necessary parts of the image, to guess where it should be cropped. Say you upload something in landscape and we need to have a square thumbnail—we need to guess what parts to crop. So, there’s a lot of stuff that’s being worked on right now to figure out if we can do an initial guess of a crop and then have the seller go and edit it if necessary.
Gary
Another thing that I wanted to ask you about: on one of the podcasts you were on, you talked about how you really value a potential hire’s problem-solving skills. To me, “problem-solving” is kind of loaded, what does it really mean. As an educator, I struggle personally with the balance of teaching students the actual skills vs. how to self-identify problems and then learn the necessary skills on their own—I struggle with which is more important. Can you dive more into what you meant about problem-solving and how you identify that when you’re interviewing somebody?
Lara
Yeah, absolutely. So, I’ll talk a little bit about why it’s important to me and then I’ll go into actually how I interview. The reason why it’s important to me is the stuff that we’re doing on my team and on many of the teams at Etsy is really cutting edge; it’s not stuff that has been done before. We’re experimenting to see what works and what doesn’t for our user base. We’re experimenting to see, again, “Does this quality of compression work or not?”; we’re experimenting to see what works for our native apps, for example—like, that’s a whole new field of work that doesn’t have a lot of best practices yet established.
So, because nothing day-to-day is already known, it’s really important to me to hire a group of people who are going to be able to figure it out. There’s not going to be a textbook or a handbook that’s going to tell you how to instrument your native apps to make sure that all the spinners look the same, or whatever it is. So, I look for problem-solving abilities. That, to me, as a manager, helps me hire people who are autonomous, who I don’t need to babysit; people who are smarter than I am, which is the most important thing to do as a manager.
The current way that I suss this out is when it’s my turn to interview someone, I walk in and either they have a laptop or I’ve brought in a laptop, and we have our normal introductions, get comfortable. I say, “Okay, we’re going to do this little exercise. Here’s some geometric images.” I usually steal them from Geometry Daily, which is a Tumblr, and they’re complex in some way, so they’ve got transparency or… they’re just basic shapes but they have different colors, or they’re rotated, or there’s something kind of unusual about them. I’m like, “I don’t expect you to know how to do this yet, but what I’m asking you to do is figure out how to represent these using just CSS. Don’t use any images yourself. Construct HTML and CSS to make this look the same in a web browser. I expect you to use Google, I expect this to take more than the time allotted, so don’t worry about finishing it. I just kind of want to see how you work.” Then the person is like, “Alright, let’s do this!” and almost without fail they’ll open up Google or CSS-Tricks and google “How to make a triangle using CSS,” which is exactly what I want to see.
I want to see what happens when, left to their own devices, they don’t know how to do something, what tool are they going to reach for first? Are they going to go into their text editor and start creating an HTML hierarchy? Are they going to immediately go on Google first and start to research that way? What happens when they get stuck, do they get defensive? Do they ask me for help? Do they ask me questions? Are they making smalltalk with me while this is happening? How comfortable are they living in the uncomfortable?
And there’s no right or wrong; there’s nothing about that where I’m like, “Oh, this is a red flag.” Everybody is going to be different. But for me, I want to make sure that somebody is not going to shut down, somebody is going to keep on digging. And at the end of the exercise, I usually pause them and say, “That’s awesome. I’ve got some more questions about how you did this,” and then I’ll ask them, “Why did you do this first and this second? What would you do next? If I were to ask you to remove half of these HTML elements, how would you approach that?” I kind of like to dig in, see what kind of additional problem-solving they could do given a little bit of direction from me. Not a lot—there’s no micromanaging hopefully happening here. But again, it’s looking for defensiveness, looking for them to be excited about learning something new, and looking to be challenged a little bit. So, I hope that that helps illustrate a little more about what I mean by problem-solving. I know it’s definitely loaded.
Gary
I got that sense, from when I was listening to the podcast, that you were talking about it on that level but not like the—you know, like designers label themselves as problem solvers, “Give me a problem and I will solve it” kind of ideology. I love that idea. Now the wheels are turning because I’m thinking about “Oh, that’d be a great project,” giving them some HTML and CSS and then have them optimizing it. I’d say, “Okay, this is a project: here’s something that exists, let’s optimize it.” But I’m trying to think, would that be good in the beginning? Because then they wouldn’t know how to optimize it, but it’s also nice because they’re not starting from scratch. So, I don’t know. I’m going to be thinking about that one for the next couple of days.
Lara
Yeah. One of the other things you can do is, given a bunch of images of different file formats, after you kind of explain how each of those file formats can be compressed, see how small they can get them.
Yes, absolutely. Yeah, it’s funny, I don’t see that at work, I see that on Twitter a lot, or I get emails like, “Help me get this to work!” and I’m like, “…No.” There’s a whole wealth of information out there. Stack Overflow is a great resource; Twitter is a great resource actually for asking questions and getting them answered. But I don’t know, in this industry, we have such a luxury of having everything be so open and having so many solid educators out there giving presentations and stuff, that to ask someone else do the work for you I think is an indicator that there’s something else going on.
So for me, I’m self-taught, I didn’t go to school for this stuff. Everything was googling, everything was Stack Overflow, everything was just trying to get it to work, and when it fails, then you just look it up. You do ask questions, but I feel like there’s a difference between being inquisitive and trying to get help getting unstuck and asking someone to help you fix it or finish it. Does that distinction make sense?
At work, sometimes we’ll get new hires who are shy about asking. I mean, it’s intimidating, right? Like, it’s going to be scary asking something for the first time, so they’ll come to me directly and say, “I don’t know how to do this thing…” and I’m like, “Cool. Ask that in group chat. Go dump that question in group chat and see who responds, because we’ve got some great number of engineers and designers here who can help you.” So, maybe it’s that. “Who else have you asked to help you with this? Who else of your peers have you asked to help you with this?” and really push it back on them to create that network resource for themselves.
Gary
There’s one thing that I forgot to ask earlier that I want to circle around back to, and it has to do with this searching for stuff. I have searched. I haven’t hit Twitter yet, so I think that’s what my next one is after I ask you this. But is there a best practices in compression?
Lara
Oh, again, so not one-size-fits-all. There’s, like, I don’t know how many different—probably a dozen different compression methods out there. So, here’s my method: I will export an image from Photoshop and whatever looks best, I’ll have done all the decreasing noise and all the blurring and whatever I need to do optimized with the quality slider, and then I’ll run everything through ImageOptim. So, ImageOptim has nine different compression algorithms that will losslessly compress your images, meaning it will look exactly the same but it will have saved a bunch of bytes. It’ll do that for PNGs, GIFs and JPGs.
Lara
It’s really trial and error, which is a bummer for teaching because you wish you had a little magic wand to be like, “If you just do this one weird trick, everything will be great,” and actually it’s much more trial and error than that.
Gary
Another thing that I’ve been really thinking a lot about lately is how can I relate things to print design and web design, and one of them that I keep coming back to is how similar performance budgets are to print budgets. So, both are constraints that limit what you can spend in bandwidth or money to create designs, and so you try to maximize the visual impact to meet the limits of the budget. Does this sound like a logical comparison to you?
Lara
I have never worked in print, so that’s a new thing to me. But I love that there’s that comparison.
Gary
Like the punk posters, they had no budget, they got paid in six-packs. So, that’s why they put everything on copying machines, that’s why they did the cut-up typography and everything, because that was the cheapest way they could produce thousands of flyers because there was no budget. And so, I think that’s a real natural transition for print designers, to start thinking about if they don’t feel comfortable teaching HTML and CSS but they are comfortable teaching visual mock-ups, they can start thinking about it that way; they’re natural parallels.
My last questions, it’s kind of big and I’m sure you can’t really answer it all, but from your perspective most undergraduate design education programs, at least within university settings, get between 10 and 12 classes to prepare a student that are specific to design, because the rest of them go to general education requirements, and those are pretty much set by the university and no one educator is going to change that balance. So, where would you put performance in the hierarchy of that? What do you need most and what can you teach on the fly at Etsy?
Lara
It’s funny, I feel like a lot of what I learned—actually 100% of what I learned—about performance was on the job. I loved it for that reason. I was able to actually problem solve for real tangible things that would benefit my company.
For me, the image formats thing is a really important one that I think can and should be taught in a classroom. “What is this image format and what is it used for?” There’s a really easy matrix. “What are the optimization levers that you can pull?” Everything else I really think has to do with internships, side projects, after school projects. Like, all the application stuff—that’s why real world is so great for those reasons, you get to actually start to dig in and solve real world problems and apply that knowledge.
Gary
Well Lara, I see I’m coming up on time here and I know you’re a very busy person, but before I let you go, is there anything you are working on that you would like to share or something you would like to promote?
Lara
Yes, absolutely. Thank you for the opportunity! I would love to promote my book, called Designing For Performance. It is specifically geared towards designers because I think that designers should be wholly empowered to understand the impact that they have on performance. It covers things like image formats, CSS, HTML. It also covers things like weighing the balance of aesthetics and speed and changing the culture of your organization. The best part is all of the proceeds from the book go to charities that help women and girls get into coding.