For Optimized Speeds
Recently, we’ve been talking a lot about image size optimization, resizing images, and the things you need to do to get your blog posts to load faster.
One item that commonly gets overlooked (and left at defaults) is a simple little tweak to the WordPress Media Settings.
It’s quite likely that the last time you looked at your media settings was the day you set up your blog!
Here, you want to set the image dimensions that you use most often.
For most people these media sizes are:
Thumbnail – Used at the top of the post – No smaller than 200 x 200 if you want Facebook to “see” the thumbnail as a viable image when sharing a link. If you want a bigger thumbnail image, just up the size.
Medium – Used for the width of your content body – While my blog will support a 600 width, I used a 550 width to save lots of headache if I ever change themes. If your theme is narrower in the content body, change this number.
Large – The maximum size supported by your ligthbox – If you do not currently use a lightbox, I would not set this to anything larger than 1024 x 1024.
If you’re setting up rectangular rather than square dimensions and need to check your ratios, this little math tip may help.
So what do these dimensions actually DO??
When you upload an image – for example one that is 2048×1535 (though I don’t recommend doing that) – WordPress will not only keep the original (called “full size”) but make three additional cropped versions (“thumbnail”, “Medium”, “Large”) for a total of FOUR unique copies of the image.
If the image was smaller than any of these cropped dimensions, then, of course, the larger versions will not be created.
Well then… What do you DO with these image versions??
When you are in your post/page editor and working on an article, you click “add media” and locate the image you wish to add.
You probably realize that you only see ONE version of the image even though there are now four versions.
Click on the image, and look in the image gallery sidebar and under “size” you will see a drop-down menu. Here’s your other versions!
Select the one you want and click “Insert Image”.
If I’m adding a thumbnail to my post, I select “thumbnail”. If I’m adding a screenshot or camera shot or other full-content-width media, I select “medium”.
For example, the picture just above this is “medium”.
What this accomplishes is making sure that WordPress embeds the smallest possible version of the image – that is still at least as large as you need – so that the reader does not need to download the “Full Sized” version just to read the blog post!
Some Fine Tuning
Once you’ve added the image, click on the image, select edit image, and open the image settings.
Set the title tag, alt tag, link (remove the link if you don’t need it).
Clicking over to “Advanced” lets you easily constrain the image to a slightly smaller size perhaps making it fit better in certain work flows. Keep in mind that this only impacts the styling of the image but does NOT re-crop the image so the full version still has to be loaded by the visitor.
You may choose to add a little css styling around the image or make the link open in a new window – and then you’re done!
Don’t Make This Mistake!
If you are uploading a rectangular image – you need to be particularly careful using the “thumbnail” option. If I’m going to be using this option, I almost always go into Paint.net (or any other image editor) and expand the canvas to make the image square before uploading it to WordPress.
This helps avoid some silliness! (PS: You can find Erica’s ebook here.)
WordPress Media Image Size Settings
Now that you know where this setting is – and why it’s important – it’s time to tweak it on YOUR blog!
It starts by knowing the width of your theme’s content area as well as the dimensions of any lightbox or slideshow plugin you use.
Then, as you write content, or go back and optimize old content, simply make sure you’re using the right version of the image!
~ Kim ~
Simple Tech Tips For Marketing