1. Select the appropriate media file-type based on the end use application

There are three main types of media file extensions for images – GIF, PNG, and king JPG. You’re probably somewhat familiar with these extensions as they have been around for a long time and used on many of the devices you use every day.

Which media type you choose for your blog’s images impact on the image quality and site load time. Let’s review each file type for when you might want to use one over the other.     

Jpg

A JPEG is popular among most media types as it provides the most image compression but does not support transparency but does support lossy. Meaning the image file can appear to be rather large but not bulky and not take up a lot of space.  JPEGs are sometimes not ideal for a logo or graphics unless you can match the background color of the image to the background color of its final application. It is suitable for images that accompany a blog post or a featured image where they are almost always naturally rectangle, and the application doesn’t require transparency.

When possible use jpeg because it provides the most compression, be careful to not overly compress your photos to a point where they start to look grainy.

Images are powerful tools to help tell your story, but sometimes the medium is also the message. If your photo is gross, then it will distract from the message. For excellent image sources for your blog, be sure to check out Sources for great photography content and how to use them on your blog properly for a complete guide to finding images for your blog.

2. What size should my blog images be?

Images are measured essentially two way, by pixels and by file size. The more pixels, generally means the more significant the image file size.  When it comes to the web, we want the best looking photos at their smallest possible file size. To answer what is the ideal photo size for your blog’s images is hard because it depends on the application and the file format needs. My rule of thumb is the smallest size possible without degrading the image clarity.  

What are pixels?  

My computer’s dictionary defines pixels as a minute area of illumination on a display screen, one of many from which an image is composed.  If we think of pixels, we must consider that our devices screens are made up of thousands of bright pixels. A high resolution 13’ Macbook with Retina display has the capability to display 2,560 x 1,600 at 232 pixels per inch (PPI).  

According to unitconverters.net, one inch is about 96 pixels; the average laptop screen is probably around 14’ which is approximately 1,344 pixels in standard definition.  

My iPhone 6S’s back facing camera takes high-resolution photos at about 4032 x 3024 px at 72 PPI, creating a 2.3 MB JPG file at a whopping 42 in by 31 in.   We want to take photos in high resolution in the event we decide to print that photo as printers work similar to pixels, except they are trying to figure out how much ink the images will require to spread across the paper.   You may be familiar or remember DPI, or dots per square inch. Similar but different to PPI.

Let’s compare pixels to pixels here…

If you compare the numbers, the photo I took with my camera is almost double the size of the screen of my computer. Most websites fit within the screen of my computer. Therefore, images that I upload and use on my blog do not need to be any larger pixel-wise than the size of my screen.

In reality, unless the images will be used as a full-screen background or for a large image slider or something similar, then most photos can be comfortably reduced down by 50% or smaller. When it comes to adding images to blog post content, most blog posts layouts are about 600-1200 pixels wide, at their max on a desktop.  For an image that accompanies a blog post. It might only need to be, at max, 600px wide to fit with the post’s content container.

3. From your camera to your content, best practices for optimizing your images.

I hope I’ve made a compelling case for why you need to optimize your images before you upload them into your blog or website, but now I want to transition into how you might go about doing that.  

Some stock photography sites like Pexels or Pixabay will let you download a right-sized image, which is good. I’m glad they do this; it can help save a step.  

Other stock sites only offer one size or if you took a photo with your phone or camera. If you download the high-resolution image from either a stock site or from a device or camera – or even a screenshot for that matter – it’s best to open the asset up in a photo editing tool like Adobe Photoshop to resize the image and save for web.

Once I open the photo up in Photoshop, I will go to edit the image size to reduce the image to an appropriate size for it’s an application.  Probably no bigger than 1200 px wide. Then I go to File, Export, Save For Web and optimize even further by selecting the appropriate file type and compression ratio.  

To download a step-by-step cheat sheet on how to properly reduce the size of your images in Photoshop, visit blogyouwant.com/39.

When you’re exporting your images for the web from Adobe Photoshop or something similar, then I highly recommend determining a file naming process. Consider using a file naming process that makes it easy for you to find that photo by subject topic or whatever makes the most sense.  When you’re searching on your computer or within the WordPress Media Library, you’ll want the file name to have some keyword that will trigger a search query. This will save you a lot of time and headache.

I wrote a very detailed blog post with ways to organize your computer and files for success. I’ll add a link in show notes so you can read up on my best practices.  

Once the image is optimized, then I will head on over to my WordPress site and upload into the post, page or media library and try to fill out as much of the meta information as possible including file name, description, caption (if needed) and alternative text.   Depending on your theme, some of this meta information will show along with your image so be sure to test them out and know which ones do what.

Write descriptions that explain what the photo is about, almost as if you had to explain this photo to someone who couldn’t physically see it.  That is what the alt-text field is for, to help screen readers interpret a picture to a user with visual disabilities.

Optimizing for Accessibility

When you leave this information blank, and a user requests to read the image the computer will reply with something like IMG_1222 rather than appropriately saying something like a green cup in the center of a brown table. You’re listening to this podcast; I bet you can imagine a green cup on a brown table. That is what the alt text provides for users who can not see the actual photo.  

4. Optimizing the Delivery of Images

Once the images are within your WordPress media library and displaying on your site, there are still some things to consider for optimizing your blog’s images. The first and most common image optimization technique is to deliver media from a different server. Typically, this is what we call CDN hosting which a CDN is a server designed for delivery of media downloads over a content delivery network (CDN).  

Basic CDN can be pretty costly and sometimes overkill if you’re just getting started so that is why I recommend a free image optimization feature you might even already have installed on your WordPress blog.   

Maximizing your image delivery with JetPack

JetPack has a fantastic free feature called Site Accelerator, which takes your images and serves them from super fast servers.  I’m not sure how or why they do this, but it saves some big bucks and headache from trying to configure and manage your CDN. So be sure to installed and activate JetPack from Automattic and turn on the site optimization features for images and maybe other features if they work for you.  

What if you have a ton of images in your blog already that are not optimized or you have multiple users, and they are not optimizing images?

If you’ve been uploading images over the years and not optimizing them or others other creators on your site and they are uploading their images, there are a couple of WordPress plugins and other image optimization services that will reduce and optimize the size of images after they are uploaded into your media library.  I’m not a big fan of this because I’m 100% behind optimizing your images before you even upload them. But if you have a site with many images that are not already optimized or you have multiple users

Sometimes you can’t control what others are doing to plugins like Imagify.io and Smush It is services that provide plugins to optimize your images already within your website.  If you use SiteGround WordPress Hosting, they also offer server-side image optimization, and you can optimize images from the SG Optimizer plugin as part of your plan.  This is what I use for post upload image optimization, and it works great.

Speed Testing with Pingdom Speed Test

Ok, finally, my last tip for optimizing images on your site.  To make sure all of your efforts don’t go unnoticed, you probably want to test your website for page load speed.   I like to use the free speed testing tool called Pingdom Website Speed Test. A link is in the show notes.

This website you can enter your URL, and it will provide you with a speed test report for your blog with some tips on how to continue to optimize your speed.  I’m going to save this for another upcoming post, so please subscribe to this blog to get this topic and the rest of my tutorials and interviews delivered.