WordPress School: Image Preparation

In the assignment for Lorelle’s WordPress School free online course today and over the weekend, you are to work on preparing images for uploading to WordPress.

You will be adding a variety of images to your WordPress test site such as images to accompany your posts and Pages, portraits, images for galleries, design elements, sidebar pictures and graphics, call-to-action badges and images, header art, background images…you could paint your entire site with images.

Preparing images for WordPress may mean more than what I’m going to discuss in this course. It could involve scanning historical images and documents for sharing online through your WordPress site. It might include photographing artwork, products, services, or people associated with your site’s topic. It could involve creation of graphic images, digital artwork, to share and publish. It could involve editing images to manipulate them or merely crop or tweak them.

How you prepare your images for the final stage of uploading to WordPress is your process, and you are welcome to share your experiences and methods with our active WordPress School Google+ Community, but we are going to focus on the final stage, the preparation for uploading to WordPress and publishing the images.

There is much confusion about images and multimedia in general with WordPress. Many think they can just drag-and-drop or copy and paste from any source and paste it into WordPress much like they might into a word processor. While WordPress feels much like a word processor, it isn’t. We are getting closer and closer to making it easy to take a picture with our smartphones or wifi-enabled digital cameras and have it publish with little or no stress to WordPress. Until then, there are a few steps that must be taken before an image is ready for uploading to WordPress.

WordPress Graphic Program

It will happen, just not soon enough for me. I want a way to take a picture at the highest quality and resolution with my camera or phone and have WordPress offer me a one click decision on how that image should be named (oh, let it name it beautifully for me – and wash my windows), sized, placed, and aligned in a post. I want to be able to say lighten, darken, or fix that zit on her chin with my voice, no buttons. With the WordPress Mobile App we are getting closer. Need to work on that voice command bit a little more.

I will cover the following as part of this tutorial on the pre-uploading and preparation of images for WordPress.

• How are You Going to Use the Image?
  • What Does Uploading Mean?
• How Does WordPress Handle Images?
• What Graphic Program Should I Use?
• Preparing Images for Uploading to WordPress
  • Image Size
  • File Types
  • File Size
  • File Name
• Managing Images on Your Computer
• For More Information on Image Preparation for WordPress
• Assignment

How are You Going to Use the Image?

Before you start preparing your images for WordPress, how are you going to use them in your post content? Is the image the main focus of the post or a small graphic detail? Will it need to fill the width of the post or Page or just a part of it with the text wrapping around it? Is your site a photoblog? Will the image be part of a gallery?

Knowing the end usage of the image makes the decision process in preparing the image for uploading to WordPress much easier.

• Image Size: How large must the image be to meet the needs of the post or site’s goals? It must fit on the computer screen, be viewable and identifiable, so what size does it need to be to accomplish your goals? If the image is ornamental, does it have to be wide enough to be a mural on the side of a building in your browser? If the image is critical to your photography portfolio, maybe it should be.
• File Size: Image files tend to be the largest file size item on our websites, but how big does the file have to be to meet its size requirements and site goals? There are ways to optimize the file size to reduce it with and without image quality loss, and determining how far to go is part of the preparation process. In Google’s SEO secret sauce algorithm is a check for website speeds and access times. Slow load times maybe penalized.
• File Type: In general, there are three file types for the web: JPG, PNG, and GIF. If your images are in a different format such as RAW or BMP, you must have a graphics program that will convert them into a web-based image format. As for which one to choose, you choose the file type that best meets the needs of the image, your site’s goals, and file size.

Our goal in this assignment is to prepare images with the file size and image dimensions in mind before uploading the images to WordPress.

What Does Uploading Mean?

What Does Embedding Mean?

Embedding is a term that means to fix an object firmly and deeply in a surrounding mass. Quite the description but very accurate.

When you embed an image, video, any multimedia, you are inserting it into the web page at that spot.

To embed an image in WordPress, the code links to the image on the server and displays it according to the dimension and other specifications you set when you insert the image into the post or Page.

When working on a word processing document or email, you may click and drag or insert an image into the document using one of the embed tools such as an image attachment. This puts a copy of the image into the document tying the two together.

Before the addition of the image, the document file size might be 50K. Afterward it might be 200K depending upon the size of the image. An image adds weight to a document as a copy of it is embedded into the document.

The same thing happens in WordPress. You are embedding a copy of the image into a web page.

In that document, the image was on your computer and you embedded into a document file on your computer. We have to do the same with a web page. The image must be on the web server where your web page virtually sits. We have to move a copy of the image to the server before you can use it in WordPress. We used to move it using an FTP Client, a file manager for websites. Today, we upload through WordPress, streamlining the process and bypassing the FTP Client.

A student explained it to the class this way:

Imagine you meet this cool girl and you want her phone number. She gives it to you, but you forget the slip of paper at the bar where you met. It’s 9 in the morning and the bar won’t open until six, so you can’t call or connect with this girl no matter how much you want. On the web, your image is the slip of paper with the phone number on it, and you are the web server. Until you have it in your hands, not much you can do.

Uploading an image to WordPress, WordPress puts the image in a well-named folder on the server for you, putting that piece of paper in your hands where you can do something about it.

How Does WordPress Handle Images?

Understanding how WordPress handles images will help you prepare those images for uploading to WordPress.

When you upload an image to WordPress, WordPress imports the image to your server in the following simplified steps.

1. The image is copied and transferred into a folder (directory) on your web host server typically named for the year and the month (wp-content/upload/2015/02/).
2. The following information is collected and stored in the WordPress MySQL database. WordPress stores the file name as the title (database unique key) and sets the image size options based on the full-size of the image (the largest the image maybe displayed):
   • Location of image file
   • Date and time of upload
   • File name
   • File size
   • File type
   • Dimensions

Preparing your image for uploading takes each of these elements into your preparation steps.

What Graphic Program Should I Use?

Compression and Resolution

Image compression reduces the irrelevance and redundancy of data in the image data to reduce the file size to be able to store or transmit data in an optimized, efficient form, thus a faster loading image.

The graphic program’s optimization feature looks for related colored pixels or pixels not important to the overall image> It either drops or blends them with other colors. There won’t be blank holes in the picture. You may not even notice the change. This is called visually lossless compression. When you view the image in the web browser, a de-compressor is accessed to expand the image pixels.

When exporting an image, check the options to optimize or compress the image. Some programs base their compression and optimization rates on a percentage from the original, the bigger the number the greater the optimization and compression. A 20% compression reduces the file size by approximately 20%. Other program present this the opposite way, with the smaller number representing the amount of the original quality and resolution of the image remaining. A 20% compression means the image has been reduced by 80%. Most programs will display the file size as part of the optimization process to help you determine which way to go on the slider.

There are different types of image compression: quality, resolution, and component. Each changes the scale of the pixel integration and scalability. Experiment with images to determine which work best for your needs.

See the related articles at the bottom for specifics and more information.

To prepare images for uploading to WordPress, you will need a graphic program. There are several options ranging from free to expensive, and from online to downloaded and installed on your computer (apps verses software).

What you need to look for in a graphics editor is the ability to:

• Resize an image
• Modify and edit the image (crop, add text)
• Export as a JPG, PNG, or GIF
• Optimize the exported image (reduce the file size, resolution, and image compression rate)

Not a complete list by any means, among the choices to consider are:

• Corel Paint Shop Pro or Corel’s AfterShot Pro
• Photoshop (part of Adobe’s Creative Suite available alone or as a package)
• GIMP (aka the GNU Image Manipulation Program) (free and open source)
• Pixlr online photo editor (requires Flash)
• ACDSee Photo Editor
• Photos – Google+ (free/Google+ required – limited editing)
• Picasa (free)
• Paint.NET (Free)
• PhoXo (free)
• IrfanView (free)

Experiment with the free ones or do a little research on the paid graphics editors. Make your decision on the requirements of preparing images for the web as well as your general photography and image handling needs.

Preparing Images for Uploading to WordPress

We’ve covered some of the basics to prepare you and your images for uploading to WordPress. On Monday, the tutorial will be all about the actual uploading and embedding process. Now we prepare the images.

Inches to Pixels

There are several tools on the web to calculate pixels to inches or centimeters. Everything on the web is measured in pixels.

An 4×6 inch (10x15cm) print is about 1200×1800 pixels. An 8×10 inch (20×25.5cm) print is 2400×3000 pixels. A typical website’s content area is rarely wider than 1000 pixels.

• Unit Conversion – Inches to Pixels
• Pixelyzer Calculator
• Convert inch to pixel (Y) – Translators Cafe
• Standard photo print size to pixels chart – PicMonkey

You need to prepare the following on an image:

• Image Size: The viewable size of the image, typically measured by pixels with emphasis on the width more than height.
• File Size: The actual size of the file. The bigger the image size, the bigger the file size. The file size is measured in bytes, typically kilobytes (KB) or megabytes (MB).
• File Type: The image must be JPG, PNG, or GIF. The choice is based upon the desired end result and needs of the site.
• File Name: The file name is the name of the file. WordPress uses the file name to generate the image title automatically, so save yourself a step and name the image properly before uploading.

Image Size

The first task is to determine the maximum width of the area you will be adding the image to on your site. Uploading an image that could cover a football field is a waste of bandwidth and time if you are going to use it at 100 pixels width (about half a thumb length).

In general, if you are uploading the image to the post or Page content area, the maximum width is typically 800-1500 pixels wide. If you are uploading the image to be placed in the sidebar, the width is generally no wider than 400 pixels, typically half that. If you are uploading an image for the header art, your WordPress Theme’s header feature will give you the exact specifications.

Does Every Image Have to Go Through This Process?

No, it doesn’t.

Not every image must be prepared thoroughly for uploading to WordPress. If your camera or phone is set to take web image quality and size, little resizing or optimization is necessary as the device does it for you when you take the picture.

WordPress has an image editor built into it, but it is very simple, and extremely slow with poor Internet connections. I like having a little more control of my efforts and time.

However, we are learning WordPress from the inside out, and learning how to prepare and manage images before they get to WordPress will help you in the long run. I use this process for screenshot captures, tutorial images, photographs, artwork, everything thing I put on the web. Sometimes I don’t have to, but that extra step makes all the difference in saving you time later.

Click this linked image set as a media file. It goes to a blank screen with the image. Click on other images within this tutorial to view an example of an attachment image.

If you are uploading images casually, having huge, high quality images isn’t as important as it is for a photography or graphic portfolio site, which requires larger and higher resolution images. Take this into consideration as you choose your file sizes and quality.

This is your starting point. On the web, images are best measured first by their width, not their height. Upload images close to the width of your intended purpose.

Now, let’s throw in a little WordPress magic to the mix.

WordPress offers a feature to display images as attachments. This means they are attached to the post as links. The image may appear at any size on the web page, from thumbnail small to full-size wide, with a link around it. Click the image and it will go to the attachment page displaying the image at the maximum width that will fit into the web page. A little image is now big, large enough to inspect closer. The branding is there surrounding the image, and there is even a comment box for someone to comment on the image.

While the image may be a thumbnail on the page, clicking to view the attachment could take the reader to an image that is 1200 pixels wide or more.

Should you upload all of your images then at 1200 pixels?

No. Some pictures should be viewed large, while others are perfectly fine smaller without the need for a closer inspection. Again, it depends upon the end goals for the image and the site.

In the WordPress Publishing Checklist you were provided some image specifications. Here they are again with more specific details.

• If the image is 60% or less the width of the content column, set the image aligned to the right or left with the text wrapping around.
  • If the image does not need to be enlarged and viewed closer, size the image to 600 pixels width or smaller.
  • If the image needs to be viewed enlarged, size the image to greater than 600 pixels width but no wider than 1500 pixels.
• If the image is 60% or more the width of the content column, set the image size to full and the alignment to center.
  • If the image does not need to be enlarged, size the image to 800-1200 pixels width to fill the width of the content area.
  • If the image needs to be enlarged further, size the image 1200 pixels width or wider, no wider than 2400 pixels wide.

Here is an example. Which is better?

This is the image full-width in the content column.

Please note that this current WordPress Theme features a flexible width, so the image is set to the maximum width of the uploaded image, not the entire width of the content column which expands to fill your browser window. Those with wide monitors will see space on either size of the image. It still makes the point between the two images.

This is the same picture set in the center in a small size. It’s lost in the text, isn’t it? To many, this is an obviously wrong presentation of an image, yet people do this all the time.

This is the effect we want to avoid for centered images, tiny islands in a sea of nothing.

I’ve included many different images and graphics within this document demonstrating examples of how to, and how not to, display images in a WordPress site. Notice that the smaller images aligned to the right or left with the text flowing around it, integrate the image into the article and make it enjoyable to read.

Next week we will work on aligning and presenting images in your WordPress site, and discuss the various size and spacial relationship issues with images.

File Types

Before we get to file size we need to talk about image file types and which one to choose. I won’t go into full depth on image file types, just covering the basics you need to know.

GIF: GIFs were among the first images created expressly for the web. They are small in size and fast loading. They also feature the ability to have a transparent background, opening up possibilities for incorporating them into your website design elements. However, they are designed to be small and don’t hold up well in larger image sizes nor resolution quality. GIFs also have the ability to be animated, which you’ve likely seen on social media.

Web designers tend to use GIFs within the design such as background or detail graphics in a WordPress Theme where transparency and small file sizes are essential and color range and quality is not.

PNG: PNGs were the next generation of image types with many characteristics of GIFs. They are generally small in file size, can manage a transparent background, and improves the resolution quality of the images. However, PNGs are best as graphics not photographs. PNG files, like GIFs, do not support the full depth and range of colors as a JPG.

PNGs are used by web designers for the majority of non-photographic images.

JPG or JPEG: JPG files are the best image type and format for photography and rich, colorful graphics. They offer the widest range of colors, tones, and resolution, able to display fine gradients of shadow and light. They also have the widest options for compression rates when exporting, tapping into the full range of optimization options.

JPG files are used by everyone for all types of images, especially photographic and colorful artwork graphics. Excellent modern image compression methods allow larger images to have reduced file sizes for faster web loading times.

File Size

Once you have resized the image to an appropriate size for uploading to WordPress, the file size should take care of itself, but not always.

Every blogger needs to set their own image file size maximums. For many years, I understood the burden well of waiting for web pages and images to load on slow and inconsistent Internet connections. It was painful to watch the image load one pixel at a time on drip Internet lines. My maximum at the time was that no image would be larger than 50K file size without a really good reason. Today, as the majority of web users enjoy slightly faster Internet speeds, I’ve doubled that to 100K give or take.

The delicate colors in this frog under a leaf would not hold up well with a GIF or PNG file format, but does with JPG set at 12% optimization, bringing the file size down to something reasonable. (Red-legged frog in the Olympic National Park, photography by Brent VanFossen.)

Yet my phone and camera takes picture at 1-10 megabytes each. Way too big for the websites I publish.

Resizing the image to meet the size I wish to publish cuts the file size down, but there are ways to reduce it even further.

One method to reduce the file size of an image is to change the file type. As mentioned, the image type impacts the size of the image. While PNG files are not appropriate for photography, for other graphics like screenshots, they are appropriate for wider sized images with a smaller file size footprint. JPGs offer the widest range of compression, reducing the file size as well.

Another way to reduce the file size is to reduce the number of colors or the resolution in the image. If your graphic program supports it, and the image will take it, reduce the number of colors from 16 bit or higher to 256 or something in between.

What file size should your maximum be? Here is my rule of thumb:

• If the image is to be smaller than the width of the content area, and not important to the purpose of the article, the largest I will use is 100K. I keep them typically closer to 50K and smaller.
• If the image is larger than the width of the content area, and critical to the purpose of the article, I will go up to 200K.
• Screenshots are typically 100k or less.
• Photography images are rarely smaller than 100K for quality viewing, but I keep them under 300K as much as possible.
• Header art I limit to between 100-200K, smaller if possible.
• Background images are limited to 100K if possible, smaller is always better. This depends upon what the background image is and its purpose.

File Name

Social media and blog experts: Dave Taylor, Liz Strauss, and Jeremy Wright at SOBcon 2010 in Chicago.

Images from our phones and cameras are typically named DCM1234598232435.jpg. Import them into WordPress and the title becomes “DCM1234598232435.jpg.” Not very useful or informative.

Rename all images during the export process or prior to uploading with descriptive names. Such file names are becoming a web standard.

You do not need to put dashes or underlines between the words. Today’s computers and web will easily handle spaces in the file names, so name them with something like the title of a work of art or with a description such as Steve and Sally playing in the swimming pool.jpg. Much better than img43569807.jpg.

When working with an article series or images for a specific category or topic on the site, I will often title the image with the article series title or category at the beginning of the file name such as Comment Spam - Screenshot of the Askimet Spam Button on WordPress.png or incorporate the article series at the end of the file name like Comment Spam - Screenshot of the Askimet Spam Button on WordPress - WordPress School Tutorials.png.

If I wish to give credit to the copyright holder, such as myself, or to my site as the source of the original image, I will add the name to the file name:

Comment Spam - Screenshot of the Askimet Spam Button on WordPress - Lorelle VanFossen.png
Elk Standing in Mists of Early Morning - photography by Brent VanFossen.jpg

These aren’t copyright statements, though I could include the word “copyright” in the file name. All images are copyrighted when “fixed” or published, so they are copyrighted automatically. More on that later.

Managing Images on Your Computer

Once WordPress gets your images, it sorts and organizes them by month. How do you manage and organize the images you upload to WordPress for your site?

I don’t recommend emulating WordPress. I recommend you organize images more efficiently.

While the method is up to you, here is my recommendation.

1. Create a master folder for your website featuring the name of the site.
2. Create a subfolder for articles. That folder may have different subfolders for different types of topics, possibly matching the categories and subcategories of your site.
3. Either upload images associated with those articles to the same folder, or add a subfolder in each category folder called images to keep the image files out of the confusion of your saved post documents and ideas list for that category.

For More Information on Image Preparation for WordPress

The following is more information and reading on how to prepare your images for the web.

• Images — Support — WordPress.com
• Using Images « WordPress Codex
• Image Settings — Support — WordPress.com
• Inserting Images into Posts and Pages « WordPress Codex
• Better Image Management With WordPress – Smashing Magazine
• Image optimization — Web Fundamentals
• Optimizing images for web – Adobe Photoshop Tutorials by inObscuro
• 10 Must Know Image Optimization Tips – Image SEO – Shopify
• How To Save an Image for Web…In Photoshop – MadeFreshly
• Speed Up Your WordPress – How to Save Images Optimized for Web – WPBeginner
• Tools and Tips on how to Optimize Images for the Web | HipChat Tips

Assignment

Your assignment today and over the weekend is to prepare your images for uploading to WordPress. Don’t upload them yet! Get them ready.

If you have already added images to your site, review the images to see if they comply with the above guide. Consider replacing them if you wish.

You will need to have a minimum of 3 images ready for Monday’s assignment, and 6-12 images by the end of the week.

We will be continuing work on your article series, adding the images to your second post in the series.

Soon we will be having a contest for your test site’s design and use of images within the design. Start thinking about how you want your test site to look. Details coming soon.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---