Image Extensions – What They Mean and How to Use Them

This week’s question is a multi-part question that all basically relates back to image extensions.

Image Extensions - What They Mean and How to Use Them

Question:

I know NOTHING about how to use images and all of the acronyms scare me and keep me from doing ANYTHING. How do I upload them into WordPress and how should I save them on my computer to use for other projects? Do I save them in download folders or documents or does it matter?

When you say save as .jpg can you give me an example of how to label it so I can tell what type it is?

Answer:

Saving Images

On Your Hard Drive

In saving them to your computer you can do it in whatever way is easiest for you to find them. I have all my stock photos in a folder and when I need one I just go grab it from that folder. When I edit them for myself or a client I’ll save the edited image to a separate designated file.

For example on client images, I have a separate folder set up for each client, then a project folder which I will save the images in. Each new project gets a new folder within that client’s folder.

In WordPress

When saving them in WordPress you would upload it to your media file and attach it to your post by adding it to the specific post you want to use it in. In the post, place your cursor where you want to insert the image and at the top of the post area you’ll click on the “add media” button.

Media

Then click “upload files”. From here click on “select files” to browse for the image you want to upload from your computer.

Media

Alternatively, if you already have an image you want to use uploaded to your Media Library you can just go there and insert it into your post without having to upload it again.

Image Extensions

When you buy images from stock photo sites they will have which formats the images come in so you can see and buy appropriately.

.jpg

When you’re working with images you can save the images in whatever format the software will allow. If you have an photo you’ve taken with your digital camera its most likely in a JPEG (same as .jpg) file. So, in your image editor you would most likely save it back in the same format. .jpg images have lots of colors and gradients which make them the best choice for photos.

.png

If you have an image with a transparent background (which means the image is cut out so you can add it to a webpage so the background will show through) you will need to save it as a .png.

If you are using an image editor such as Gimp or PicMonkey, you would be able to have layers of images on top of each other that are in different formats (.jpg and .png). If you are using one with a transparent background (.png) you would have to save it as a .png to preserve the transparency within the image.

When you save it, the layers compress to make it a flat image so if you save it as a .jpg it would have whatever background that shows in the image saved with it. If you saved it as a transparent .png image the background will be invisible so when you add it to your website whatever background is on your website will show through.

Example

Grasping this concept was a little difficult for me at first so I want to make it as clear as possible. The eCover below technically has a background around the image but it is transparent (invisible). To make sure it stays transparent when I save it I have to save it as .png image. This means the image will pick up whatever color or texture that it is inserted on.

Master PicMonkey

Here is a side by side example of what it looks like now on my blog (white background) on the left and if my background were red on the right. You can see the image itself is overlayed onto the background.

Background Comparison

 

 

Tip:

If you work with lots of images, well even if you’re just starting out, plan out a file system. You will thank yourself in the long run because you will amass many images and if you have an easy way of locating you will save so much time. Hunting for an image when you don’t have a good system in place can be like finding a needle in a haystack.

Working with Images Q&A-031214

I look forward to answering your Image related questions, so feel free to ask. 🙂

Print Friendly, PDF & Email

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.