Coming to understand what PPI (pixels per inch), DPI (dots per inch) and image dimensions are, and how they relate to image size is no longer a question to ponder for nerds. With social media, blogs, and e-commerce stores, heck, with the internet and everybody trying to post onto it this is very important information.

What is PPI?

PPI = Pixels Per Inch

Pixels are how a monitor shows you what you’re looking at. Each monitor is made of of quite a few pixels.

Usually:

Bigger monitor -> more pixels
Higher resolution monitor -> more pixels

This pixel number is often given to you in megapixels, or MP, where mega means a million because there’s that many. Let’s take a common monitor with the following stats:

1920 pixels x 1080 pixels = 2,073,600 pixels = 2MP

This means that your common monitor has 2MP. An 85″ 4K LED screen with a 3840 x 2160 resolution would be 8,294,400 pixels or 8MP. You can see why they claim it “delivers incredible clarity and realism.” That’s a lot of image definition points.

So, this still doesn’t explain how to break down pixels per inch. But, the name hopefully gives you a hint. In one inch, how many unique pixels are there? This image will hopefully make this clear:

The size of each of these circles is an important talking point. If we were to still have the same 72 PPI just spread out over a larger screen size, there would still be a lot more pixels the monitor could display, but it wouldn’t be any more or less clearer of an image than the smaller sized monitor with the same PPI. It is because of this that we see black boxes above and below videos, it is a mix-matched video capture dimensions to video playing dimensions. Pixels are distributed on a monitor evenly length and width, so it is important to note that it’s both length times width that account for how many pixels there are total, usually defined in megapixels (MP).

As you can see, 72s have much less pixels (PPI) or dots (DPI) per inch of space, the 300s have a lot more in the circles.

For those of you who have ever connected your computer or laptop to a projector or a large screen tv for movie viewing, you’ll be familiar with the necessity to slightly tweak the resolution so your projection looks ok on the new display.

What is DPI?

Now that we understand PPI, DPI or dots per inch, is exactly the same thing except for what a printer can resolve. Printers work by depositing dots on a paper. You may have noticed when buying printer ink the letters CMYK:

C = cyan
M = magenta
Y = yellow
K = key/black

Most printers that deposit dots use these colours.

This isn’t always the case, and Xerox uses what’s known as a xerography that uses that charged tube to deposit the image onto that’s also commonly used now.

So, DPI is important when printing an image. First, it’s important for you to know when you’re preparing your image for printing. You’ll want to match how many DPI you export your final image at to what your printer’s printer can print.

It doesn’t make sense to output an image at 92dpi for a printer that can work at 300dpi. Same as it doesn’t make any sense to output an image that’s 600dpi for a printer that can only print 150dpi. To get this setting, usually printing places will have a how to prepare your digital images for printing How-To. If not, send them an email.

Have you ever got digital photographs back from the printer and it looks like it hasn’t completely finished loading on your screen? Still looks a little blurry? Well, that’s because there wasn’t enough dots per inch on the photo for printing.

What is Image Resolution?

Image resolution is directly related to image quality. The better an image’s resolution is, the clearer the image is. This also means the larger the image file is. Less resolution means less PPI. You can clearly see what the spectrum of image resolution looks like visually in the image below.

Sometimes you will hear this referred to as a ‘pixelated image’.

This means that the more pixels captured per inch (higher PPI) by a camera, the clearer an image is going to be. This is why camera enthusiasts will chase after higher and higher MP (megapixel) cameras, some of them getting up to 50+MP.

On higher quality screens you’ll be able to adjust your image resolution. There is a point where the human eye can no longer perceive the difference in resolution, but that doesn’t mean you won’t be able to make resolution higher. When processing images or video, this is always something to be conscious of. If you make resolution too low, it looks like the flower on the right. If you make it just right, it looks similar to what it would in real life. If you go higher resolution than this, essentially you’re just making media that takes up more hard drive space than needed, which means slower load times and too much information for media playback so your video freezes often or webpage loads slowly.

You’ll see different image resolutions on the image below. If we were to blow this image up on a wall that stretched 5m wide, you’d easily be able to see the differences. But this small, on the screen you’re viewing it on, chances are that 480p is looking pretty acceptable for an image that you’d have a hard time to complain about, especially if it’s not on an art gallery wall and just in a blog trying to explain what pixels are.

You can see above what some of the different resolutions you may hear actually mean. Not always but often (because of the savvy consumer and complaints about misleading information), image resolution is explained in a standard term, so if you have a 1080p monitor but it’s 46″ wide and not 22″ wide, the pixels you have available on your monitor will be more than the 1920px wide this definition implies.

Image Dimensions

So, let’s say we have taken a photograph with a camera that has given us:

2000 px wide x 2000 px tall = 4 MP image

This is set, we cannot change this. It is the specifications of the camera and is related to the terms full frame, 4/3rds, 35mm, etc. which is all about the camera image sensor size.

This means we’re left with the following options at the printers:

2000 px / 300 dpi = 6.67″ wide and tall image

2000 px / 92 dpi = 21.73″ wide and tall image

2000 px / 72 dpi = 27.77″ wide and tall image

So we can see that the more DPI we have, (300 dpi is a typical spec on a printer) the smaller the image is going to be when printed. Almost a 5×7 photo print size! This is also why film is so powerful, it’s not displayed in pixels or dots, it’s analog so there is no bytes to represent colour depth, it’s essentially infinite and is only subject to the limitations of the enlarger at the print shop.

If we were working in PPI, like your computer monitor, this size limitation usually isn’t such a big deal because images ready for web viewing are typically at around 92 ppi and your screen usually isn’t larger than 21″ plus images aren’t usually full screen width, but if they are you know how to make them look good full width now! I’ve scaled the images to the size I want to spread across the page for you to view, but also the software I’m using to show you this website (NGINX server, and WordPress software with plugins) also automatically conveniently does some resizing of the image to make it quicker loading.

Image Size

Which leads directly into how this is all related to image size.

For internet images we’re trying to do a few things. We know that we want to push our image file sizes smaller so that it takes up less space on our server/computer/hard drive, which also means that same image can get transferred through the internet to your computer monitor or smartphone screen faster because there is just less information in that image to transfer. This translates into quicker webpage loading times, which everybody wants.

Ever notice a website where a page’s images just loads so slow it’s like it’s a printer line by line printing out the images you’re trying to look at? Well, it’s very related to large image size.

However, if we push this too far, we get images that have very low resolution. See images above for a reminder about what low resolution means.

So, what factors directly relate to file size?

• camera quality – a Samsung Galaxy S10 has a camera capable of capturing 10MP on the rear wide camera. A Sony Alpha IV can capture 33MP images. A Hasselblad X2D 100C can capture 100MP images. These (mega)pixels are each handled slightly differently by each camera’s sensor, which is the camera’s colour brain which is it’s capacity to detect colour. This colour sensor has unique and likely proprietary defined colour depth that makes cameras each different, even within the same manufacturer.
• color depth – think of it as pencil crayons. The more colour depth you have, the more pencil crayons you have, the more pencil crayons you have, the bigger pencil box you need. More colour depth means more data bits you need to define each colour value.
• codec / file format – *.jpeg, *.jpg, *.gif, *.png, *.webp, *.raw etc. These are all file formats. Each of them compresses colour depth differently as well as rather complex next-pixel colour prediction models. *.raw is a file format that’s supposed to be right straight from the camera with zero colour compression, so it’s a huge file. *.jpg files are hugely compressed colour depth and is actually quite an old format. *.webp is a very modern image format that is rapidly spreading across the internet.
• pixels – we’ve discussed this above, but when you have more pixels you have more colour space to define.

File size is effected by image size. Assuming all else is the same, by reducing our image size in both dimensions by half we get a quarter smaller image.

1000 px wide x 1000 px tall = 1 MP image

2000 px wide x 2000 px tall = 4 MP image

We can reduce the colour depth profile of an image.

1000 px of colour @ 32 bytes of colour = 32Mb
1000 px of colour @ 16 bytes of colour = 16Mb

We can use a different file format, some popular ones for web are shown below in the chart:

Conclusion

I’m sure this all just adds more questions. Hopefully it inspires you to look at the specs of your next camera purchase, or even the specs on your smartphone.

But at the very least, I hope it helps you when you’re trying to decide how to export images from Photoshop and then upload them to the internet.

Bigger isn’t always better, and no matter what you’re doing, it’s very important to think about what you plan on using it for. For example, you don’t need a Hasselblad camera if you’re only ever going to be uploading your photographs to your Facebook media feed. But, you’d probably want a Hasselblad if you’re going to be creating 40 ft wide billboards with your images.

program: thunderbird

The Problem

Email programs sometimes do funny things to email addresses. In Thunderbird by default, outgoing email addresses are added to a ‘collected addresses’ address book, and then other addresses that you say you want to add to your address book are added to Personal Address Book (unless you’ve changed it). This leads to address chaos.

Amalgamating address books / contact lists is definitely something good to do.

The Solution

It’s actually very simple to do in Thunderbird, amalgamating or merging address books.

Open Thunderbird -> open address book -> if it’s not already there, make sure you’ve got directory pane opened from View -> select the address book you wish to move -> select the contacts you wish to move (ctrl+a works for all) -> drag them to the address book you wish to add them to.

All the better if the address book you’re merging into is synchronized somewhere.

Don’t forget to also check out the default settings so that each of your email accounts saves email addresses where you want it (for me, this is one single address book that’s synchronized between all of my devices).

Hope this helps!

software: WordPress
cloud: Google Console
plugin: WP Mail SMTP

The Problem

Google is constantly changing the layout of their backend and also modifying how users authorize apps to use their APIs. It seems like it’s ever increasingly complicated, but I digress.

With any website, it is nice to have the capacity to send mail. This is useful for contact forms, but also for error messages and automated scripts. One can use the built in PHPmail() function, but connecting with proper SMTP mailer is ideal, in order to have proper security and avoid getting emails bounced.

WordPress now has many plugins that allow you to use the Gmail API to send mail from your website. Problem is that Google, at the time of writing this, has pretty strict authentication standards: OAuth 2.0 protocol.

For this solution, we’ll be using the WP Mail SMTP plugin, but there are others that authenticate in the same way.

The Solution

First, install WP Mail SMTP from your ‘Add New Plugin’ section of the dashboard.

Quick search for ‘gmail’ will give a list of all the plugins to install, I like to use WP Mail SMTP.

Once activated, you can browse to the Settings page of the plugin and start entering in the details.

Fairly simple. Much like any other plugin install. Except now, you’ve got to enter the sphere of Google Cloud Platform, a confusing, convoluted world of programmers.

WP Mail SMTP has a configuration step by step guide that used to work, except now it’s not up to date with how to add credentials.

Google Cloud Platform is where you want to go now. Here you’ll give WP Mail SMTP access to use your Gmail account.

First, you’ll need to create a project. Name this project something meaningful, you might have to reference it again.

Once it’s created, make sure you’ve got it selected from the drop down menu at the top of the screen, and navigate to the APIs and Services tab and select Credentials.

From here, select Create Credentials from the top and select OAuth.

You’ll be directed to the consent screen for OAuth, this will be a web application.

Here you only need to add the redirect URI given to you by your plugin, in this case it will be

https://connect.wpmailsmtp.com/google/

from WP Mail SMTP settings page on your WordPress site. Click create and you’re almost there.

Head into the OAuth Consent Screen tab, where you want to move this now into published mode.

After this, you need to now give the Gmail API authority to make emails on your behalf. To do this, you have to navigate to the Library within your APIs & Services screen and search for Gmail API.

Select the Gmail API and enable the service.

To finally get the Client ID and Client Secret, click on the Credentials tab and you will see under the OAuth 2.0 Client IDs will be the ID you just created. On the right hand side will be a little button to edit the key, if you click that, you will be able to find your Client ID and Client Secret that you will have to copy/paste into the WordPress Plugin WP Mail SMTP settings.

Once you’ve copy/pasted the settings into the WordPress WP Mail SMTP settings page, click save settings and your page will refresh and this section will now have a big orange button asking you to allow the plugin to send emails using your Google account.

After clicking that big orange button, you will be asked to authenticate yourself using your Google account, make sure to select the right Google account to use for this, which is the account you used to setup the whole API Key above from the start.

Once you have successfully linked WP Mail SMTP with Google API, you are now ready to send a test email to see if it’s actually working.

Conclusions

This is becoming quite tedious to setup Gmail to use as your website emailer. It would seem more logical to take a relaxing walk around the block than to go through with this again!

However, remember that Google does this all to make sure that the emails you’re sending are actually from you and not hijacked to create spam. And also remember that you can only send so many emails using the Gmail API in a day, so be wary about email lists that a gluttonous.

It is also important to have your SPF, DKIM, and DMARC all configured if possible. This is done by setting the adding DNS records that you get from your Gmail admin console. The helpful links are beneficial to follow.

Troubleshooting

You may get an error message when you test with an email:

"error": {
    "code": 403,
    "message": "Gmail API has not been used in project XXX before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/gmail.googleapis.com/overview?project=XXX then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",

If you do get this, follow the link it provides you to solve all your problems.

plugin: Adobe Camera Raw
program: Adobe Lightroom

The Problem

So, I got a new computer and installed Lightroom and imported all my photographs to get my new computer up to speed. I was able to view the images in the Library, but when I went into Develop, the viewing screen went gray/blank. This only happened with my original *.RAW/*.AWR photographs. With the JPG exports I had already created when editing the images and imported just now in a subfolder of the original photographs, they would all show up nicely without an issue.

It should be obvious that the *.RAW / *.AWR or whatever proprietary RAW file format your camera makes wasn’t recognized in Lightroom. Obviously this is an issue for most photographers since photographing in RAW is essential for maximum colorspace to be captured.

The Solution

Adobe has a program called Camera Raw. Download can be gathered here. It is a plugin for most of the Adobe suite that provides support for RAW files from your camera.

“Raw files contain the most complete, uncompressed image data but in a form that is not directly usable and must be processed.” ~ Borrow Lenses

Take special note of the note at the top:

For older Adobe applications, substitute with the Camera Raw 10.5 installer below.

There are pretty clear steps on the Adobe site and which installer you should choose there.

Hope this helps!

python ide: Spyder
os: Windows
package: Pickle5
package: Pickle

Introduction

In a previous article on trying to discover why a program would run in Spyder, and then when I ran it in IDLE or from command prompt it would fail saying that the packages weren’t installed. The skinny of how to resolve this issue was from command prompt type:

pip install <package name>

The explanation of this is that when one installs Spyder, it has built in Python Interpreter, which can be discovered within Sypder -> Tools -> Preferences.

Within the console of Spyder, one can also run the command:

import sys
sys.executable

and then from command prompt (or IDLE) you can run the same command (if you’re using command prompt, you’ll have to first enter into Python using the python command, which should be recognized because you have linked this command to a PATH or PYTHONPATH in your environment variables). If the two system paths match up (the location of python.exe), the exact same python packages will be used by both IDLE and Spyder.

However, if the system paths don’t match up it is likely that the two IDEs are running different Python environments.

The Problem

After I installed the necessary packages that Spyder had come installed with that I didn’t have installed with Python I had separately installed, my program was able to run.

However, my program modified files, and because the two versions of Numpy that were being used were different, the following error showed up:

Python Error: Unsupported Pickle Protocol 5

The Solution

The simple solution may have been to install the package pickle5:

pip install pickle5

which:

This package backports all features and APIs added in the pickle module in Python 3.8.3, including the PEP 574 additions. It should work with Python 3.5, 3.6 and 3.7.

and then used that in my program running in Spyder where the Pickle error was being experienced:

import pickle5 as pickle

However, when trying to install pickle5 I experienced the issue:

error: Microsoft Visual C++ 14.0 is required. Get it with “Build Tools for Visual Studios”: https://visualstudio.microsoft.com/downloads/

I went about downloading this package, but it appeared it was going to download the whole Visual Studio which was about 1.5Gb and as a general rule I try not to clutter up my computer with this kind of massive downloads (like Visual Studio is). Although, likely as a programmer you’ll have to have this in some shape installed on your computer.

So, why not just change the Python Interpreter to the one I first installed on my computer, outside of Spyder, the same one IDLE runs. For me, this was the location: C:\python\python39\python.exe (as shown in the image above, and discovered with the command prompt sys.executable report we did above).

If you do this, and restart Spyder, you’ll likely get an error saying that the console was unable to load, and to install the Spyder kernels. This command solves that:

pip install spyder-kernels

One thing I learned from all of this was that Spyder recommends the programmer to install and setup Spyder using Anaconda (though they do have a curious Important note at the top of that page explaining installing Spyder without Anaconda might be beneficial to avoid package dependency conflicts, as we have just experienced issues with being independent ironically!). I’m not sure if all of this would have been eliminated as a result of installing Spyder using Anaconda, because when I created a scheduled task I was then running the program outside of Spyder. However, I’m sure that there is a way to install Spyder such that it uses the existing Python interpreter installed on the system, which would be using the same Python interpreter from the beginning, and it hopefully would have installed the required site-packages in the same folder.

Hope this helps!