Pixel? My Image has Pixels?

My Image has Pixels
What is a pixel? And how do I train you to think in pixels? Image … pixels. How strange. Let’s talk about image pixels.

What is a pixel?

When digital cameras first came out, I remember trying to get a print of an early digital image of my sons playing mini-golf. For whatever reason, the print came out dotted. I must have reduced the number of pixels in the image (because one does that for web) and tried to print the image with the reduced pixels.

So here is one little mantra: for print, think … big number of pixels. Thousands of pixels. Often a digital camera will take a photo that is 3000px or 4000px wide – leave it that wide for a print. For the web, 3000px takes too long to load. So think: Hundreds of pixels. Reduce the size of image to hundreds.

So what is a pixel?

Here is the Wikipedia definition:

In digital imaging, a pixel, pel, or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.

The Wikipedia article goes on with lots of technical information. In dealing with images for the web, there are a few important things to know about pixels. That’s what we are covering in this post.

Get to Know Your Pixels

If you have a theme for your site, how wide in pixels is the space where you post? Here is one way to figure this out. Using a photo editor, create any image that is 600 pixels wide. Some responsive themes may even resize your image to fit into the space.

Now load your 600px wide image into a post. Using preview, how does it look? Is it too wide? So try smaller. Is it narrower than you would like? Try wider. After a playing with a few different sizes, you can get a better idea of how wide to make your images.

220px pixels width in this image
This image is 220 pixels wide.
If you want images that float to the right or the left of the text (in WordPress, one can usually, depending on your theme’s CSS, do this from the Media Manager under ATTACHMENT DISPLAY SETTINGS with alignment of right or left), a size I often use 150px or 200px. If you want a thumbnail photo, go with 100px by 100px or 150px by 150px.

The image on the right (on the right unless you are reading this on your smartphone) is 220px wide. That might work for you.

Favicons and Pixels

There is this little file you can add to a website called a favicon. A favicon must be a file with the extension called .ico (like this: favicon.ico). You can create one with an online favicon creator or you can create a png file in your regular photo editor and convert it using a favicon converter (here’s one I use: http://www.convertico.com/).

The reason why I mention favicons is because it is a good way to learn about pixels. A favicon must be 16px wide by 16px high. That is tiny. If you create a favicon, you will get a feel for managing pixels. Your theme may already point to a favicon file, or if you are using self-hosting WordPress, some people use a plugin to point to the favicon file.

Larger to Smaller

One lesson you will learn along the way is you can resize an image from larger pixels to smaller pixels. However, if you try to take an image with a small number of pixels and make that size larger, your image will distort.

Your Turn, Please

Do you have a feel for how to set sizes in pixels for your site? How did you figure this out? Have you ever heard of a favicon and do you have one for your site?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

40 thoughts on “Pixel? My Image has Pixels?

  1. I have heard of flavicons but haven’t messed with them. Generally the only time I mess with the puxel counts is for book covers to make them a specific size. For blog pics I tend to do the dummy method using microsofts paint program.
    Jon Jefferson recently posted…Shards of GlassMy Profile

    1. Jon, oh, I used MS Paint last week as an experiment. What an awful program! Got frustrated immediately. It seems that anything you apply is permanent. I really do like Pixlr. I tried Picasa as well – maybe I’ll write about that experience. Not great, but better than MS Paint by far.

  2. Leora — I like the latest version of WordPress because it enables you adjust the size of your image in the visual editor. You can still use the photo editor but I’m not good at figuring out heights and widths. If I have a very large image, I will resize it first on picresize.com, otherwise WP will have a hard time uploading it — or it may not upload at all. I honestly don’t worry about pixels. If the image looks good to me I figure it will look good to my readers!
    Jeannette Paladino recently posted…9 Blog Commenting Services — their Pros and ConsMy Profile

    1. Jeannette, I have yet to fool around with the WP way of playing with images. Because people still need to resize those very large images, I try to encourage a new learner to use a photo editor first.

      But I appreciate your mentioning it – I should explore it at some time to teach others how to use it.

  3. I have to admit, I have been driven mad trying to figure out the right width and height for images. Don’t even talk to me about fooling around with pixels. At this point, I work in approximations because anything more precise is like looking for a headache. 🙂

    1. Debra, approximations are a good approach! I wish I could sit down with you to figure out why you are having issues. I am thinking we could figure it out together.

      Thanks for the honesty!

  4. Hey Leora,

    I use to get so frustrated with people when I would want to know what size an image needed to be and they would go into the whole pixel thing which of course I didn’t understand at all.

    Now when I resize an image I usually will do a little less than 500 pixels because I want it big enough to be seen on social media but not to huge for my blog posts. I also compress them before uploading them to my blog so that it will also help with load time, or so I’ve been told.

    It’s still over my head but you explained it fairly well. I’m just an idiot at times, I admit.

    Hey, happy 4th of July! 😉

    ~Adrienne
    Adrienne recently posted…How To Attract The Right People To YouMy Profile

    1. Adrienne,

      500 pixels sounds like a good size – glad you have got a handle on that. And you are showing people that despite earlier confusion, you can get used to working with image sizes. Hardly an idiot at all – rather, someone who needs to spend a little time when learning something new. And how common is that!!! You are a good example for others – a leader, I should add.

      – Leora

  5. Pixels is a pain in the bxxx. The worst is, as you write, “a small number of pixels and make that size larger, your image will distort”.

    For online publishing it’s normally fine. The problem is if a digital image has to be used in printed media. It frequently distorts, as you say.

    Has happened to me when a magazine that wrote about me in Saudi wanted to publish one of my private photos taken there. Wasn’t possible so they hired a photographer to shoot pictures of me instead.
    Catarina recently posted…Public relations – how to make your business well knownMy Profile

    1. Catarina, a good example of how images can get messed up! I’ve also seen people try to fit images into boxes with the wrong proportion of width and height – makes a portrait look like an amusement park mirror. Appreciate your sharing your experience.

  6. Leora- I use Photoshop and save the image for the web. Then after I decide what image size I plan to use and then will open a new image and place the old one and again save it again for the web. I usually make them 500 x 500 squared at 72dpi. This was a great post explaining pixels.

    1. Arleen, you sound like you have pixel image management under control! I do similarly (I use Photoshop, even though I will probably be teaching clients to use Pixlr). I’m thinking you could do save for the web at the same time you do resize, but I suppose you have your reasoning for doing it in that order. 500px square sounds like a good, eye-catching size. You might want to look into which platforms prefer 600px or larger – see, for example, the recommendations by Facebook developers: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content (it’s number 4 on that list). Regarding FB image size, I found a little trick if you use Yoast SEO – there’s a way to specify the image just for Facebook in the social tab of Yoast SEO.

  7. My webmaster told me, at least for my blog because of the column sizes and positions, keep my pics at 300 pixels wide. This has seemed to me to help with loading time.

    This was a most helpful post Leora. Especially how you early on framed our thinking of when to use thousands to just hundreds of pixels! Thanks.
    Patricia Weber recently posted…4 Specifics to Celebrate for Introvert FreedomMy Profile

    1. Pat, thank you for the feedback, especially on the 1000’s vs. 100’s. That will help in explaining images at my upcoming workshop.

      Sounds like you have a webmaster who is helping you out well!

  8. Hi Leora, I used to do a lot of digital printing in the early days of wide-format so pixel counts and densities were a way of life.Today,none of my web materials are intended to be printed so I find WordPress gives me adequate options to balance visual and loading speeds, though I would tend to revert to Photoshop for anything critical.

    1. Paul, glad to hear you have found a method that works for you. In the early days of digital photography, I didn’t pay much attention to my original jpgs, as I rationalized that I was using them for web. Then some state organization wanted to award one of my photos, and I didn’t have the original! I learned my lesson about that.

  9. Yikes! A favicon??? LOL I use two images for each blog post…pixels determined by what Facebook has now decided that they will use (200 pixels x200 pixels) This article is helpful and I am going to book mark it because I just know that someday this will be relevant to something that I am doing and I’ll be scratching my head saying….”I read about that somewhere!”
    Jacqueline Gum (Jacquie) recently posted…Freedom… Where’s The Justice?My Profile

    1. Jacqueline, so glad you found it useful. Regarding Facebook, I don’t want to confuse you, but if you want to share *large* images, you should make them 600px or wider. I put the link in the comment above.

      Then again, 200px by 200px should work just fine if you don’t mind the smaller version of a post in FB.

      Favicons are good branding, but don’t get too stuck on them. Sharing what you do now is most important.

  10. Thank you! As a newish blogger I feel like I am using alot of trial and error to get the right number of pixels to get my images to fit. I will get it figured out eventually 🙂

    1. Michelle, keep working at it, asking questions when you get stuck. It is important to understand how to get the right sized image, and images do help with your content.

  11. Hi Leora,
    I use Photoshop Elements for any layering work, but simply use Paint.Net for sizing and crunching. I used the “inspect elements” feature of the front page of my website to determine that my slider is 942 by 471 pixels. Inside my blog, I keep the image size to 640 x 480.
    I also have a favicon installed which matches my motto:
    BE LOVE TO OTHERS.

    Kind Regards,
    Bill
    William Butler recently posted…What the Lines Of Our Lives Teach UsMy Profile

  12. I have found that it is always best, if possible, to resize an image size prior to importing to your site. The reason being that it saves you a ton of space if done beforehand. If you use WordPress you can resize an image in the platform. However this does not mean the original large image is gone. It just means you now have a alternate smaller size image. There is no space saving advantage in this method.

  13. Hello; thanks for clearing up a lot of questions about pixels for us. when people submit pictures of their amusement equipment I encourage them to send photos as large as possible knowing what you just said about being able to size them down but not being able to stretch them out. I usually go with 800 by 600 on the site. but my blog editing program mars edit is set to a width of 600 and then adjusts the height based on the original image. I think I do a good job with pictures for a blind guy. 🙂 my brother patrick helps sort them into the proper order. And my new friend chelsea will improve them and add my logo and url as a water mark. thanks for sharing, Max
    maxwell ivey recently posted…Remembering when I decided on my new pathMy Profile

    1. Max, I was wondering how you would respond to all my posts on images! Glad you have a method that works for you and people who can help out with the details.

    1. Beth, so glad you enjoy favicons and the branding they bring to a site! Not sure everyone would find them easy to make, but if you have a graphics bent, then you only have to figure out how to fill up 16px by 16px instead of 100’s or 1000’s.

  14. My experience with pixels has been pretty awkward at times. Have you ever tried converting a normal jpg image to 16×16 ico for favicon? It looks horrible. It happens to me all the time when I try to reduce the size of logo of website in order to make a favicon.
    Geek recently posted…How to Add Custom Ringtones in AndroidMy Profile

    1. Starting with a jpg of 1000’s of pixels and trying to create one that is 16px by 16px is not going to be easy at all – for anyone. In fact, I wouldn’t do it that way. When you get so stuck, use a square of 16px by 16px of a color that matches your site. Better yet, hire a graphic designer who can understands favicons to do one for you, if you want one that goes with your branding.

  15. Hi Leora. I’m not very good when it comes to understanding pixels, but this post has helped. And I DO have a favicon for each of my sites! (YAY, doing something right!)

    I have a much better understanding of sizes now that I’ve been blogging for 1.5 years. But when I first began, I was completely lost.

    I’d like to know how to put two created images side by side into one new image, though. Do you know how to do that? Is there a tutorial for that somewhere? (I’m currently using PAINT. I’d like to know how to do that in there.) Can you help me learn this, please?
    Lorraine Reguly recently posted…“RISKY ISSUES” IS OUT!!! (+ I have a new site!)My Profile

    1. Lorraine, I’m assuming you mean creating one jpg? You can also upload two images, say each one is 300px wide. Then put them on the same line in your post, with a space in between. That should work on most themes and browsers.

      If you want to create one long jpg, you can do this with Pixlr. I could write a post later about how to do this. I can’t recommend using Paint for much. I don’t think it can open more than one file at a time, which is what you need to do to combine the two images.

      1. Yes, I was talking about creating one image out of two. I don’t think you can do that in Paint, as it only lets you open one image at a time.

        I’m not great with using Pixlr, either. Sigh. Although I would like to learn how to do this, I think I might have to leave it to the “experts” when I need something like this done.
        Lorraine Reguly recently posted…“RISKY ISSUES” IS OUT!!! (+ I have a new site!)My Profile

      2. Lorraine, keep trying Pixlr. My latest post has a little more about Pixlr. Take it slow, learn to use layers, learn to open more than one file at a time.

        To do two images, one needs a canvas twice the size so it fits both images. That is Photoshop talk – I would have to play more with Pixlr to get the right wording. Later …

  16. Leora – photography has gone to an all new level now with Digital cameras and smart phones etc. So many photo editoring options too!! I tend to edit my images on Picasa before posting them on my blog or facebook. I will check out Favicon as I have not heard of it before.

    1. Mina, favicons are good for branding. When you are ready to work on your branding, learn more about favicons. Not a necessity, but nice to have!

  17. Fortunately I think I have a handle on image sizes and pixels and yes, I do have a favicon for my website! I had never heard of them until I was developing my site just a year ago. Ususally when I import photos into my blogs, I export them from iPhoto (many are taken with my iPhone so they’re not gigantic) and set the file size to medium. This brings my landscape photo in at 640×480 which I think is perfect for displaying in my blog.

    1. Pamela, glad you are making good use of iPhoto! Sounds like an easy to use photo editor – good for those with a Mac or iPhone. I will see if I can get it on my iPad to play.

Comments are closed.