I think we can all agree that pictures or graphics are one of the most essential ingredients of a blog. You probably spend a lot of time taking fabulous pictures for your posts or searching the internet for the perfect image. What you might not know though is that those pictures could be hurting your blog.
When I say hurting your blog, I mean slowing it down. Pictures are usually the number one reason blogs load slow.
A slow blog will drive readers away faster than it can load! « Click to tweet
Have no fear though. I am going to show you how to save and upload your pictures to your blog for optimum load speed (which will also help your SEO).
First, let’s do a little research. I want you to look up the width of your blog content area. To do this, you can use your browser’s developer tools. Here’s a quick video to show you how:
Now that you know the width of your blog content area, you can resize your images to display them at full width.
Whenever possible, resize your pictures to be the exact width you want it to display in your blog.
Why not use code to resize the picture?
When you use code to resize a picture, the browser has to load the natural image size first, and then shrink it to the size it has been coded to display. That is a lot of unnecessary load time! For example, say the image you upload is 1066 x 1600 px, but you are displaying it on your blog as 650 x 976 px. The browser first loads the whole image and then shrinks it down to the 650 px image. That is 1,071,200 extra pixels that the browser has to load!
Even if you are making a small change to the display size, the extra pixels are substantial. A picture with the original size of 800 x 800 px that is sized to display at 780 x 780 px still has to load 316,000 extra pixels. That is why you shouldn’t use code to adjust the display size of your image.
Why not use the size options in WordPress?
This is a better option than adding your own sizing to the code, but it still isn’t the best option. When you use a size option (medium, large, or thumbnail), WordPress makes a new copy of the image. Instead of having one image saved on your blog, you now have two images. The browser won’t have to load a large image and then shrink it down, but you are taking up more space on your server by storing the large image there.
If you absolutely need to upload a large image, but will be displaying it at a smaller size, use the size options instead of controlling the size with HTML. This way the browser doesn’t have to upload the large image and then size it to your code. It will only load the image WordPress saved at the standard size.
How to prepare pictures for your blog.
Here is how to resize your pictures using either Photoshop (my preferred method) or Picmonkey.
Resizing, optimizing, and cropping with Photoshop
If you want to the dimensions of your picture, you can resize your image during the crop. Click the crop tool, set your dimensions, and then crop the image as desired. For fastest upload, set the resolution between 72 and 96.
72 used to be the standard for web, but it is a changing world these days and with retina ready devices there is a lot of debate on which resolution to use. For pictures within posts, I still stick to 72 ppi resolution.
If you do not need to crop your picture, you can resize it by going to Image > Image Size
Click constrain properties and then adjust the image width to your desired size and set the resolution to 72.
Once you have your image sized and edited it is time to save it.
Click file and then choose Save for Web and Devices.
By saving for web and devices, Photoshop will strip any unnecessary information from the photo (like the camera and lens information). This makes it a smaller file.
If the picture does not have any fonts or graphics added to it, save it as a JPEG. If you added fonts or other artwork to the pictures, save your image as a PNG 24 file.
When saving your picture, always change the name from the default. Make sure the name clearly depicts the picture. Search engine bots read dashes as spaces, so include dashes between each word. For example, I would save the picture above as, purple-white-wedding-centerpiece.jpg
Resizing, optimizing, and cropping without Photoshop
First, use Picmonkey to resize your image. Picmonkey is a very popular, free online photo editing program.
Once you have uploaded your picture to Picmonkey, navigate to Basic edits and find the section called Resize. Under Change size to, input the width that you want the picture to display on your blog and make sure to check Keep proportions. Hit Apply
You can also resize it by using the cropping tool if you wish to change the dimensions.
Once you are done, you can save the image. Save it with a clear name that describes the picture. Use dashes between the words.
Picmonkey resizes images, but it doesn’t optimize them for the web.
To optimize them you can use any of the following free tools:
These tools strip unnecessary data from the picture (what type of camera, date, time, lens, etc). This is called a lossless optimization. It doesn’t change the quality of your image, but dramatically decreases the file size.
The proof is in the pudding.
If having a fast loading website is important to you, then take the extra time to resize your images before you upload them to your blog. Let’s take a look at the difference in file sizes.
As you can see, resizing your pictures before uploading them to your blog can significantly change the file size. (ignore the titles of the images – this is not best blog image practice.)
How to optimize past blog posts.
In a perfect world, you would go through and update all your posts with correct image sizing. Most likely, you have a few posts under your belt though and that would take AGES. Here is what I recommend:
First, go manually update your 5 most recent posts. Re-save the photos with the proper size and name. Delete the old images from the post. Upload and insert the new ones. Next, find and update your top 10 posts from the last 6 months (using Google Analytics). You want those pages to load fast! Do it over a few days or weeks. Don’t burn yourself out.
For the rest of your images, there is a plugin called EWWW Image Optimizer. It doesn’t change the size of your image, but it will go through all of your uploaded media files and losslessly compress them. This will help reduce your load speed. Once you are done with the bulk image optimization, you can delete this plugin. Since you’re going to be sizing your images before uploading them from now on, there is no need for the plugin. 😉
I recently used EWWW Image Optimizer on a clients blog. Look at the load speed of her site before and after compressing her image files:
Before:
After:
13 seconds is a huge difference!
Don’t let images slow down your blog!
Always resize your photos from the original size before uploading them to your blog. Also make sure to optimize them using save for web and devices or using one of the lossless optimization tools listed above.
I’d love to hear how much faster your blog loads after you optimize your images. Take a test right now to see how fast it is loading. Work on optimizing your images and then come back and tell me how much faster your site loads!
Very informative and helpful post. I have been suffering from a similar issue on my website. Page loading speed was poor. In google’s page speed insights I found that weighty images are the main reason behind it. I have fixed those and now the speed is quite good.
Thanks for taking the time to explain things in such great detail in a way that is easy to understand.
Curious… the latest version of WordPress seems to manage image resizing just fine.
In fact, I’ve drawn the conclusion (having changed themes and moved the posts around a bit) that having larger than needed images makes it possible to change to a theme with larger images without having to edit every one of my posts.
However, trusting WordPress to do the resizing behind the scenes means I’ll have to rely on the WordPress developers to chose an appropriate compression level, but so far that hasn’t been a problem.
Also, if you install jetpack you can configure it to serve the images from their CDN instead of your blog.
Did you ever consider storing your images on a different server?. I myself tried using Facebook but thats not possible because they just show up as broken images. I always thought of using a service that could let you store your images for free, but then if that server shut down then I’d be screwed. So I have always kept the images on my blog, uploaded to the same server.
In this digital era, every developers and designer need to resize images as in a regular basis. I’m a newbie for coding so sometimes I prefer to use online image resizer tool. After surfing many tools I came across your article and the app you have suggested is utterly amazing. As I have mentioned, I have used online tools so now it will be efficient to use your app with the instructions you have given. Thanks for sharing such a useful information.
You’re welcome!
This post is going to help me so much! My husband has been helping me with my blog and all the technical stuff I don’t understand- he’s a programmer. We ran a gtmetrix scan to see how fast the blog and pages were loading and it is loading the pictures and resizing them because he used code to make photos the size we wanted.
You’re welcome. Hopefully you blog speeds up now that you’re optimizing those images!
Hi Kristie,
Found your blog the other day, so many great tips. I need to devote an entire day to sit down and binge read. 🙂
Ran the test and got an “F”, no bueno. 🙁 Looks like I’ll be spending time resizing images.
On that note, for most of my destination images I’ve been hosting them on Smugmug but with my own domain – ie. http://photos.travelingwellforless.com/TravelingWellForLessPhotos and then inserting the html code into my post.
I’ve been doing this to help speed up loading times. But do you think it’s hurting my SEO?
What are your thoughts?
Thanks 🙂
Hi Kristie–thank you for this helpful post, and it was a pleasant surprise that when I watched the video, it happened to be the Genesis theme that I just started using on my blog! I do have a question about optimizing the photos I already have in my old posts (I got an F score for image optimization in your test link). Will it break any links by changing the name and optimizing past pics? I have a lot of Pinterest traffic which is based on the photos I already have on the blog. Some other larger blogs have also linked pictures on their sites to some of my projects as well. I don’t want to mess that traffic to my blog up by renaming and optimizing the photos.
Renaming will break any links that are directly to the image. If you wanted to optimize them and maintain the links, you would need to resave them with the exact same file name.
Optimizing past photos can be a head ache, so use one of these plugins to compress your file size: EWWW Image Optimizer or WP Smush.
Thank you! I had started saving images individually for the web via PhotoShop a few months ago, but I didn’t know how to update all previous pictures. My blog is heavily based on bright, sunny images of London, so I want them to be plentiful and FAST! The plug-in you suggested for WordPress seems to work well, as I just downloaded it and ran it on all photos. I’ll be sure to let you know how it goes. Looking forward to a speedy site full of sunshine now 😉
Glad the plugin worked well for you! Another way to help speed up old post is to use a lazy load plugin. Basically, it doesn’t load the image until the visitor scrolls down. Look up BJ Lazy Load.
Also, check out my post on 12 ways to speed up your blog.
Hi,
Definitely, images are the main part for any blog. I badly need these image optimization tips. Thank you for passing your tips to all !
Regards: Pooja
Your video leaves a lot to be desired. Not to be rude, but you talk waaaaay to fast and move fast, to the point I can’t find where you are before it’s over. Great post but the video is useless. sorry, but I find it similar tofast motion. I’ve never commented a negative comment before but this really got me. Give people a chance to follow you not chase behind.
Karen, thank you for your honest feedback – it helps me improve. I’m so sorry the video was so horrible that it made you leave your first negative comment. I re-made the video (I had to do it a billion times, slowing down is a hard thing for me, turns out) and tried to slow down and explain things better.
Hopefully the new tutorial is more helpful.
What a great post !!! This is loaded with important information and really good tips. I’m a skimmer and I read this article word for word. Tried a few of the tools and pinned for later review. Thanks for sharing !!!
I too am a skimmer, so it really means a lot to me to hear you read this whole post.
Thanks so much, wish I would have known this from the start! I have another picture question. Is there someway I can figure what pictures in my media are not being used in blog posts? Unfortunately when I started blogging I was not diligent removing ones I decided not to use…now my media is a mess!
You can find unattached pictures, which means pictures that aren’t uploaded to a specific post. Go to Media > Library and then under the first filter, instead of a all media items select Unattached This will also bring up any pictures you are using in your backgrounds though, so be careful not to delete those.
I have a few posts just like you mentioned though, where I uploaded a bunch of pictures and then didn’t use them all. Ooops! I haven’t found a good way to find all of those. When I do though, I’ll let you know!
Great info. I recently started a second blog, and I’ve been taking care to make the images smaller in picmonkey, but I didn’t know it would help to optimize them. Pinned it! #SITSBlogging
It does, and optimized pictures means better load time. Faster load time means better user experience and better SEO. Win Win.
WOW. I wish I had seen this post when I began blogging a year ago. I am sharing so others may be more fortunate. I recently have begun to do some of this … but I have a lot of improvements to make. Thank you for telling me how!
You’re welcome Susan. At least you know for going forward now! Thanks for sharing on your Facebook page, I really appreciate that.
Good info. I didn’t realize all this stuff was going on under the surface. I may not be able to do ALL this stuff, but even resizing my photos before publication will help. Thanks so sharing! #SITSSharefest
Of all the things on this list, resizing is the number one thing that will help! So if that’s all you can do, than that will help significantly. Cameras take such high quality pictures these days, even phone cameras. That quality is awesome for printing, but can really slow things down on the web.
Thanks for your comment!
I’ve been resizing in photoshop, but I didn’t know the tip about saving for the web—plus, I never pay attention to anything but the pixel size (I save mine to 700px wide and then load them in my post as ‘original size’). Some photos are still over 100kb when I resize them. I think this will help.
Thanks! 🙂
Pixel size is a great thing to be paying attention to ( and uploading to original size). You’re already way better off than a lot of bloggers, good job! You’ll have to let me know what your image sizes are once you save for web!
Thank you so much for sharing so much insightful information!! This is so helpful! Will definitely have to work on resizing my images over the next couple of weeks.
Stopping by from Sits Girls sharefest!
xoxo
Jessica
Glad you found it helpful! I loved looking at your wedding photos, beautiful!
These tips are very helpful. I really need to go back and resize pictures. I had no idea WP made duplicate copies. Stopping by from SITS Sharefest and Pinned to my Blogging tips board.
Thanks for pinning the post. Take your time resizing, but it will help your load time!
super awesome tips, thanks!!! #SITSBlogging
You’re welcome!
Hi,
I learned about the cropping tool on the left, so thanks for the screen shot. I’m doing a post about photo tips this weekend, so your ideas should prove helpful. Visiting from SITS Girls.
Let me know when hour photo tips go live, I’d love to check it out. Glad the screenshot was helpful!
Useful information. I already resize all my images, but hadn’t fully understood about optimising them as well.
Just one query: I ran the speed test from the link you included, but as there is no explanation of how to interpret the results I have no idea what they mean!
Glad to hear you are already resizing your images before uploading them (you take great pictures, by the way). Web page test is a bet technical, I just use it to see how fast it is loading, for interpreting what to do with load speed, I use Google’s page load inspector. It does a better job explaining what you can fix. FIY, most blogs hover around a 70-80 score for desktop. So, don’t stress it if your blog is scored there.
I’ll have to work on a post soon about speed optimization and understanding the page speed tests!
Perfect timing Kristie, I needed to figure this out and your tutorials are always helpful. I had no idea that my images were not optimized [I thought that because I was resizing them in Picmonkey they were fine] and I am now working on optimizing all of them with the plugin, looks like my 3000 images might take a while.
Jen
Yes Jen, I think that will take a long time for your blog! Knowing how long it took me to get those pics there…. Good luck!
Thanks for the great tips! This was something I struggled with a lot when I had a photography blog. Just downloaded the plugin, because although I’m careful about my image sizes, every little bit counts. 🙂
I didn’t know you had a photography blog, that’s awesome! Speaking of blog pictures, what site was it that you love to get your stock photos from?
I have noticed a marked decrease in my page loading time since you gave me these tips…thank you so much!!
Glad your blog is loading faster Anne!