Talk
Epic Image Optimization
When optimizing a website, images are a great place to start. Reducing gigabytes—or at least megabytes—of image data can dramatically improve your site's performance and web vitals, and it’s often a quick win. But how do you build an effective image optimization solution for your project? In this talk, I will share my image optimization journey and what I learned over the past few months of building "openimg".
Bio
Andre is a full stack developer from Germany and the author of the book Full Stack Web Development with Remix. Andre lives in Cupertino, California, and works for LinkedIn. In his free time, he organizes meetups and loves to learn and write about all things web.
Share
Interview
Hey, everyone. I'm so excited to be joined by my friend, Andre Lundgraf. How are you, Andre? Hello, I'm doing great, thanks. Awesome, awesome. It's super great to see you here. I think the first time that we started interacting was around Remix time, when Remix came out. And then we met in person.
Was it the first RemixConf? Did you come to the first year? Yeah. I think that was the first time we met. Yeah, for sure, yeah. I've been to those Remix conferences and then Epic Web Conf last year, so. Yeah, yeah. That's like the biggest compliment to a conference organizer is when people come back. Like, it wasn't so bad, I guess,
that they wanted to come again, so. So thank you so much for coming and now speaking. And I'm really excited to talk with you about your talk, Epic Image Optimization. I think that is gonna be sweet. But before we get into that, I want people to get to know you a little bit. So can you give us an intro to yourself? Yeah, of course. So I'm from Germany.
I've been living in the Bay Area, close to San Francisco for the last, I think almost like three and a half years now. I have been working for LinkedIn as a senior software engineer, mostly doing web stuff. And for the last two years, I've been organizing the Remix meetups here in the area.
Had a lot of fun, like hanging out with the community. And now we have been rebranding us to All Things Web last year. I have been very consistent doing at least one meetup per month. And that's been a lot of fun, very rewarding. Other than that, in my free time, I play D&D with my friends and I'm a big gamer. Okay, awesome.
I didn't realize you were D&D and gaming into that. So that's cool. Yeah, I wanted to ask you about the All Things Web experience. So what it looks like from what I can tell from the website, you don't have like one place that you go every time,
but you kind of hop around to different offices. And I'm guessing like those different offices are sponsoring the food and everything as well. That sounds like a really smart idea. How has that been going? Yeah, it started out of necessity because we didn't have an office we could go to in San Francisco.
And then we started actually with a lot of bar hopping. We went to like chicken and waffle places, but it turns out people aren't super comfortable to join a crowd of strangers as much in a bar. And then we also wanted some talk, so we tried to find speakers. And then it was just like the logical next step.
And there's a lot of really cool companies here in the Bay Area that have been very supportive, like hosting us a bunch. Like Entry, Sanity, Max have been very supportive of that. That is awesome. Yeah, I think I like that story because I think lots of people see the idea
of organizing a meetup as being this really big, complicated, difficult thing to do. But really when you're just getting started, it can be just like, let's meet up and have lunch together or like whatever. Just it can be a pretty simple thing to get started.
Then you take the next logical step and continue to build on from there. And it can be really rewarding too. Well, I guess, why don't you tell me, has all things web been a rewarding thing for you? Like what have you seen come out of that? Yeah, absolutely. I mean, I think all you need to get started is at least one friend and then just hang out
and invite other people to join you, right? And if one person joins, great, you have a great night, have a good conversation. And if more people join, that's amazing as well, right? And then you just go from there. And yeah, that's been so much fun. I love talking to people about web stuff and just like, what has been new? Like, where do you deploy your apps? What's your experience with that?
And just like you learn so much from different experiences, you wouldn't be able to try out all the things yourself, right? So it's really great to get like feedback and input from other people. Yeah, that kind of stuff. Yeah, yeah, I love that. That is awesome. You also mentioned that you work at LinkedIn. What, can you give us a little bit more insight
on what you work on at LinkedIn? What tools are you using, that sort of thing? Yeah, so at LinkedIn, I work on the campaign manager app, which is the ad platform. It is a very, very old, very, very big Ember app. So in my day job, I do mostly Ember work. Like one big task we did lately was like
refactoring a bunch of stuff to TypeScript. But mostly it's consuming a bunch of different APIs from Java backends and then orchestrating them in our SPA. But actually this, I haven't told that a lot of people, but this week is actually my last week at LinkedIn. Oh, wow, okay. And I'm not scared, yeah. A new opportunity next week,
which I'm very, very excited about. Can you tell us that? Or are you still zip, like, lips are sealed on that? I just want to keep it a little surprise for next week. But yeah, really pumped, really excited to do a little bit of a curious switch going into dev acquisition, how you call this, like, dev rel kind of stuff.
So yeah, pretty excited for that. I'm excited for you. Yeah, I can't wait to hear about that. And when we are at the conference, that'll definitely be in place. So go talk to Andre and ask him, okay, what was it? What company did you end up at? Exactly. Well, cool. So let's talk a little bit about,
actually, the reason that you organize the event with All Things Web, and also the reason that you keep coming back here to Utah to come to these events. Why is it so important for you to go to all the trouble to get people together? Yeah, I think it's two things.
So the first thing is, I have just, like, a joy of talking to people. Just, like, the community makes the job so much more fun. Like, I'm a full-time front-end engineer, but just hanging out with people who have the same interest and just seeing the excitement of what they're trying out, what they're learning, right? Like, seeing their journeys.
That helps a lot getting your own motivation up, right? That kind of stuff is the most important thing. Just by being at RemixCon for the last two years, and then Epic WebCon for now, it's just like, over the years, if you meet the same people again, you really make good friendships, right? And then you're really excited to see the same people, and you're like, I'm going again. Are you going again? Yes, I'm going again.
Like, oh no, Andre is going. I have to go, right? Like, it's just such a beautiful energy. It's like, so cool to hang out with these people. And every year, you also find new people, right? Like, new people are coming that maybe haven't been there, or you have just not had the chance to talk to them. And that's just amazing, right? Like, that's why I'm going.
That's why I have so much excitement for meetups, but also for conferences. Conferences are basically the same as meetups, which is like, time 10, right? Or time 100, but just more people, more time together, that kind of stuff. Yeah, well, you bring a really good positive energy to our community and to our conference. So I really appreciate you coming
and also speaking about Epic Image Optimization. That's something that I think a lot of times, we just want to throw it off to some service, or maybe, I remember years ago, I was doing a static build and like building all the images, and it just took forever.
And it's this big, complicated thing. So can you give us like a spoiler-free overview of what your talk is all about? Yeah, so you pointed out that we have a website for our events, right? Like allthingsweb.dev. And I started building this last year. And events have a lot of like images, right? Like you want to show the images
that you took during the event. There's always like some thumbnails and whatnot. And when building the website, just had to decide where to host the images and how to optimize them, right? Like for good user experience, you need a good image optimization pipeline. But usually, you would just pick a service, right? Like, I think when I initially built out my blog,
years ago, I checked out your website and it was using, I think, Cloudinary, right? And you had like this nice setup for it. And I looked at the code, copied some for my blog, and then just used Cloudinary. But I never really understood much of what it's actually doing, right? Like I know, obviously, modern formats and resizing, but like not how it actually works.
And I think a really great way to dive deep into something, get like a better intuition, is just to build it yourself, even if it's not perfect, right? It's never going to be the same quality, obviously. But just, I want to see, can I just have my own little endpoint that does the optimization? So I can just have my images maybe in the public folder in my Remix app, right?
Or if I have a CDN that doesn't optimize them, do I need like this really fancy cross-service pipeline, or can I just build something simple? And that's how it started. And then, yeah, I just learned a lot of stuff on the way that I think is really cool to share. Maybe just the excitement to like try out, build something yourself to learn,
but also, obviously, the fun parts about building an image optimizer. I think it's great. I 100% agree with you. One of the first pieces of advice I got when I was learning JavaScript was from Merrick Christensen. And he said, this was back when, before Lodash was a thing, he said,
one of the best things you can do to learn JavaScript is to reimplement underscore JS without, you know, like just reimplement all those functions and stuff. And of course, this is also before we had lots of the methods that underscore now, or that underscore had at the time. And I never actually did that,
but I stand by it as being a really, really great way to upscale your ability. Even if you're not going to ship it to production, just doing it can help a lot. And maybe you do ship it to production and you could save yourself a ton of money. Exactly, right? If you look at, even if you want to compare different,
like image optimization services, right, and you look through the documentation, if you haven't built it yourself, or at least like played around with it, then it's really hard to judge if it's like a good API, or like, if this is necessary, do I need this, right? And then if you actually try it out yourself, then you at least like gain some opinions, maybe some taste, and then you can make a better decision. So yeah, 100% agree.
Very cool. So we have extended breaks at Epic Web Conf. You'll remember like it's half hour long. It's not like we have multiple tracks you need to get to. So plenty of time to talk with people. What is something that, like a topic that gets you really excited and talking that people could come up and talk with you about?
Yeah, I'm still a huge Remix fan. So if you're interested in trying out Remix or learning about Remix, or you want to share your experience about Remix, I'm very excited to talk to you. But in general, anything related to all things web, right, is what I'm passionate about. So I appreciate talking to people from, yeah, about any topic, really.
Just tell me a story. Possibly. Andre is very approachable people, so go and talk to him. Plenty of cool things to chat about. There'll be lots of cool people to talk with, too. And so yeah, I'm really looking forward to that. I have one more question for you, and that is, what are your thoughts around the rebrand with Remix and React Router,
since you mentioned Remix, and what are you looking forward to in the future? Yeah, I've actually not migrated yet. I'm still on Remix. Am I allowed to still call it Remix? No, I mean, it makes sense, right? Like, you want to consolidate, you want to make sure that you get as many people as possible into the future.
I think that makes, strategic-wise, a lot of sense. I still think, for me, Remix has just been a very important part of my development career as, like, learning, right? Like, I've been on React, tried to get really good at React, and then through Remix, I focused more on that standard. So I will always probably have a hard time not calling it Remix.
Just for me, it's more of a feeling or an ideology, right? But yeah, no, totally excited to see where it goes. Also, I'm actually even more excited about what the new stuff they're cooking is, and how I can get a little bit out of them at the conference. Yes, yes, yeah. Ryan will be there.
He'll be speaking, and Brooks will be there. Maybe we can get Michael to come and some of the other members of the team, because I would love to talk with them about, okay, I know, like, now we've got RSCs in React, right? They should have that by then. And, like, we've got some of these things kind of nailed down, so where are we at
with Reverb and the new version of Remix? I'm excited about that, too. Awesome. So, hey, Andre, thank you so much for giving us some of your time to get to know you a little bit. Really looking forward to seeing you at the conference in just a couple months. So we'll see you in Utah soon. Yeah, super excited for it. See you there.
Bye, everyone.