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.
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?