What DPI do web images need to be? (spoiler alert: it doesn’t matter)

web-images

If you’ve ever had to communicate with someone about creating/resizing images for the web, I’ll bet you’ve heard a lot about “72 DPI”. As in, “images for the web should be 72 DPI while images for print should be at least 300 DPI”. You might even think it’s true.

Friends, I’m here to put the 72 DPI myth to rest.

If you’re sitting here thinking “WTF is DPI?” or “Is DPI the same as PPI?” or “Why, oh why, are there so many acronyms in the world?”, DPI stands for “dots per inch”, and PPI stands for “pixels per inch”. The term DPI is generally used for printed images since printed images are made up of tiny dots, while the term PPI is mostly used for screens, since screens contain pixels. They’re quite similar, and people often use them interchangeably, which is a little confusing, so don’t worry about it for now. Let’s think of them interchangeably for our purposes.

Now, let me show you three images from Placekitten, aka the best site ever. One is at 72 DPI, one is at 300 DPI, and one is at 1000 DPI:

72 DPI

72 DPI

300 DPI

300 DPI

1000 DPI

1000 DPI

Don’t believe me? Download them and open them in Photoshop. Take your time. I’ll be here!

Craziness! How could this be?

All you have to do is look back to what the acronym actually stands for: pixels/dots per inch. This refers to how many pixels/dots are squeezed into one inch of space on a printed page. Two images with the same pixel value (let’s say, 1000 pixels wide) will print at very different sizes depending on the set DPI. That image at 72 DPI will be 13.88 inches wide, while that same image at 300 DPI will be 3.33 inches wide. It’s just basic math. All DPI does is determine how many pixels your printer is going to cram into one inch of space on the page. That’s why a higher DPI image looks better than a lower DPI image – the more pixels you squeeze into a small area, the finer the detail in your printed image.

Remember the three images I showed you above with different DPI values that look exactly the same on the web? Here’s what they’d look like printed:

72 DPI

72 DPI

300 DPI

300 DPI

1000 DPI

1000 DPI

Ahhh, so image DPI does matter… but only if you’re printing it out.

So, how does this relate to the web, again?

Trick question – it doesn’t. Look back up again at the three original kitties – their size doesn’t change at all on your screen, because your screen understands one measurement: pixels. Pixels are all you ever need to think about. To determine how big an image should be on your website, you have to know what size in pixels it needs to fill. Your designer/developer should tell you something like “please make sure that images for this particular section of your website are X pixels wide.” The target size of your image is determined by the size of the container it needs to fill, and that measurement is different from website to website (or even in different parts of the same website), so the person who created your website (or your theme documentation, if you’re using a pre-made theme) will be able to tell you what size you should be aiming for. In pixels. Just pixels.

Hey, what about retina displays?

Glad you asked! Retina displays, also known as “high DPI” displays, are awesome in that they cram more pixels into their screens than standard displays. This means that each individual pixel is even smaller so you get a much sharper image than on a standard screen. So doesn’t image DPI matter now? Doesn’t it?

Nope. All you really need to know is that if you’re optimizing for a retina display that’s squishing double the number of pixels into the same area as a non-retina display would, you need to double the pixels in your image so it still appears crisp. So, a logo that’s 300px across normally should be saved at 600px. Then, when that image is presented at 300px as originally intended, it’ll look nice and crisp on retina screens since the image has double the number of pixels and so does the screen. The DPI/PPI setting in Photoshop is still irrelevant because you’re not printing it out.

If in doubt, remember that on the web, it’s all about the pixels. Unless you’re using a vector format like SVG, in which case, high five. You’re awesome.

Want more articles like this? Get ’em in your inbox!

Happy March! Let’s celebrate with a new wallpaper.

Hey, friend! Are you as happy about it being March as I am? If you live in a place with cold weather like I do, I’m guessing your answer is yes.

February started out great for me, but then it abruptly turned around. I started the month off with a week in Florida visiting my parents who are there this winter, and it exactly what you’d expect: warm, sunny, and relaxing. Then I came back to Toronto, where we experienced our coldest month in recorded history, and I and promptly got sick and stayed sick for almost the whole month.
Thanks, winter! <3 <3 <3

Before / After

Before / After

As for this month’s wallpaper, I departed from my usual theme of botanical goodness and ventured into (stylized) space instead. I’m sure you can easily make the March-Mars connection, especially if you speak French and/or know that both the month and the planet are named after the same Roman god. I’m enjoying this second year of monthly wallpaper making because it’s a great opportunity to branch out into different styles that I didn’t try the first time around. Speaking of which, if you’d like to check out my first March wallpaper, you can do so here.

Image of February wallpapers

Download

Desktop (2560 x 1440) • Tablet (2048 x 2048) • Mobile (640 x 1136)

Happy almost spring!

On connection, community, and “dark matter”

A while ago, I bookmarked an interesting post at The Pastry Box about the idea of ‘dark matter developers’. When I recently stumbled upon it again and re-read it, the following passage stuck out to me:

Apparently 90% of the stuff in the universe is “dark matter”: undetectable, doesn’t interact with other matter, can’t be seen even with a really big telescope. Our “dark matter developers”, who aren’t part of the community, who barely even know that the community exists… how are we to help them?

This particular post is all about web development, which has an extremely vocal and active community that’s constantly innovating and moving the industry forward. However, as the author rightly points out, the loudest community members who are constantly delighting us with new and exciting techniques and projects are actually a very small minority. Though the point of that post was to compare the active community to a large group of sleepy, disengaged 9–5ers who aren’t paying attention, the idea of ‘dark matter’ in communities made me start to branch off on the topic of non-participation in a different way.

I started to think about how we can all be ‘dark matter’ in some situations but active in others. When is it okay to sit back and passively/sporadically consume and when is it better to publicly create and participate? The more I thought about it, the more I realized that, like most things… it depends.

Being ‘dark matter’ is okay sometimes

When you first stumble upon a community that piques your interest, a natural reaction can be to sit back and quietly absorb as much as possible. For example, I read a bunch of interior design and cooking blogs and I’m perfectly happy to sit back and consume that information without adding much to the discussion myself. I don’t feel the need to be seen or heard in these communities because these aren’t really my main passions (though I do like them!), and I have no burning desire to become known as an expert, especially since I’m not one. I just want to learn! I might be known IRL as the person who obsesses over paint colours and cooks a pretty great risotto but that’s about it. I might get into reading about a topic for a while and then drop out of that sphere completely. No big deal.

And on the flip side, it’s nice to remember that there are always people out there silently enjoying what you put out. Even if you don’t always get a ton of likes, comments, or important social metric du jour and you feel as though you’re sometimes talking to air, there are always people out there who are enjoying what you’re putting out there and just aren’t inclined to participate.

But… being invisible doesn’t always feel good

On the other hand, chronically lurking in communities that really excite you can feel lousy. Feeling invisible sucks when you actually do have something substantial to say but are too scared or shy to say it. You’ll find yourself having great ideas that’ll be attributed to other people because they took the step of actually vocalizing it. You’ll find yourself following all sorts of great people in your industry/area of interest, but they’ll have no clue who you are. Maybe you have some great ideas to offer, and no one will ever know if you keep them to yourself. It’s that cliché about a tree falling – I think you know the one.

I’ve had an on-and-off relationship with community participation, to be honest. Sometimes I’m engaged and other times I tend to keep a little quieter, and either can feel right at the time. In general, though, I’ve come to think that if you’re either a) making money from something or b) really passionate about it, you owe it to yourself to put yourself out there and participate in your community — in whatever way and quantity feels best, of course. If you keep all your ideas to yourself, you’re doing a disservice to both yourself (after all, how can people hire you/collaborate with you/tell you you’re awesome if they don’t know what you’re up to?) and to the rest of the community (which will be lacking in your awesomeness).

This doesn’t mean turning yourself into someone that you’re not, because that’s a one way ticket to burnout land. I’m never going to be as loud or out there as some other people are because that’s just how it goes when you’re more on the more introverted side like I am. That’s okay! But regardless of how you connect, reaching out to other people and feeling like part of a community is really important and it’s worth the effort when it’s in an area you really care about.

K, that’s cool, but how do I start?

I’ll probably get into more detail about this in another post because there are so many ways to connect, but here are a few ideas to get you going:

  • Volunteering and teaching. I’ve met tons of amazing people because of mentoring and leading workshops through Ladies Learning Code. If you’re American, I think that Girl Develop It is similar.
  • Meeting people in person! I love me some Internet, but there’s nothing like connecting with someone in real life. Personally I most enjoy meeting up with people one-on-one, but when I want to meet some new people, meetup.com has approximately a zillion ways to do so. For example, if you’re a developer in Toronto, you could check out #DevTO or the Toronto WordPress Meetup Group.
  • Participating in Facebook groups, which are arguably one of Facebook’s only redeeming features these days (sorry, Facebook – it’s true). There are plenty to choose from – some are free to join while others are add-on components to paid e-courses. Some cool groups I belong to of include We Create The Internet and the Freelance to Freedom Project Community.
  • Joining a community of likeminded people. For example, I’m a part of SPARK, a community of designers that’s full of high quality people and interesting conversations.

How do you best like to connect? Or, hey, DO you even like to connect? I’d love to hear what you have to say.

P.S. Speaking of connection and community, the social network I’m most active right now is Instagram. If we’re not friends there yet, let’s change that!

It’s February! Time for a new wallpaper!

Hi! Can you believe that January is already over and we’re already one month into 2015?! I’ve just about stopped writing 2014 on cheques and forms now, so that’s something.

I find this time if the year to be even more interesting than early January in some ways, because all the new year’s excitement has settled down and most of us are back into our usual routines. And now that we’re back in the swing of things, how does the day-to-day in 2015 differ from last year?

As for me, I’m definitely operating a little differently this year than I did last year. For one, I’m investing much more time and energy back into my business than I did last year (where I mostly focused on client work alone). I recently enrolled in Digital Strategy School (which has been great so far!) and just I took a fantastic web content writing workshop at Camp Tech this past weekend, which was super eye-opening and will probably lead to a full overhaul of my entire website. No big deal.

I’ve also been sticking to my one small new year’s resolution — to go outside and walk every single day. I made my one resolution super manageable, and lo and behold, I’ve actually stuck to it. Those of you who commute to a work space or live in a warm climate might think that it’s weird/sad to have to force yourself outside, but when you work from home and live in a place where winter is the worst, it’s not exactly enticing. However, I really believe that you can only be successful in your work and in helping other people if you take care of yourself, so that’s what I’m doing!

Oh, wait, were you here for the wallpapers?

Okay, okay, here they are!

Image of February wallpapers

Download

Desktop (2560 x 1440) • Tablet (2048 x 2048) • Mobile (640 x 1136)

And how about you? I’d love to hear how January treated you and how your 2015 is going so far! Feel free to tell me here or on Twitter.

Happy New Year + New January Wallpaper!

Hey, friends! I’m aliiiive!

2014 was an interesting year, and at the same time, I didn’t really talk much about it. It’s always challenging to find the right balance between recording/reflecting on your life and actually living it, and this past year I obviously spent much more time doing the latter. As much as I advocate for living in the present moment and not overthinking things too much (despite what my Twitter bio might say), there’s also something nice about sharing parts of your life with others. So, with that said, you’ll be seeing more of me around the ol’ Interwebs in 2015. Hurray!

First off, I’m excited to restart my monthly wallpaper series! I really enjoyed doing making them in 2013 and was happy to see them all over my friends’ devices. Here’s the brand spankin’ new wallpaper for January, sized for computers, tablets and mobile phones:

January wallpapers for desktop, tablet and mobile by Dara Skolnick

Download

Desktop (2560 x 1440) • Tablet (2048 x 2048) • Mobile (640 x 1136)

Now that you have a shiny new wallpaper for the shiny new year (too cheesy? too bad), here a few highlights from this past year:

  1. This was my first full calendar year being self-employed! I kind of forget what having a “real” job is like, and I’m pretty okay with that.

    I spent approximately a zillion hours here.

    I spent approximately a zillion hours here.

  2. I finally took a real vacation. I somehow forgot to do this in 2013, which was silly because overworking yourself ad infinitum is a good idea for precisely no one. This past June, I spent a little over a week in Italy — home of amazing art, architecture, gelato, and, surprisingly, delicious gluten-free food.

    Street art in Italy

    Italy is known for its fine art, but did you know that it’s also full of great street art?

  3. I gave a talk at a conference for the first time. This past November I spoke at WordCamp Toronto about levelling up your WordPress development workflow and it went really well. I can’t wait to speak again some time!
     

    Here’s what some nice people had to say at the time:

    Speaking of which, if there’s a WordCamp coming up in your area, you should totally go — in my slightly biased opinion, it’s totally worth it.


Now, all that’s not to say that 2014 was the perfect year — after all, life is life and not-so-great things happen. That being said, on balance, things are pretty, pretty, pretty good.

I hope you’ve all had a great year and I wish you all the best for this upcoming one!