The size of images we upload to our sites on WordPress.com sites isn’t so critical in terms of how quickly our sites load for visitors. That’s because WordPress does some magic behind the scenes and probably has lots of servers dotted around the globe that can dish up the images quickly.
Still, there is usually no need or reason to upload very large JPEGs files to your WordPress.com site because a file of 40KB or so will look just as good on the web as a file of several megabytes.
And if we upload huge files, we can start to eat into the disk space allowed by WordPress. I have been running Light Reading for quite a while and I have nearly 700 images on this site.
Despite that, those files take up only 64 Megabytes – just 2% of the space allowed.
So How Big Are My Files
Whatever the situation with WordPress.com sites, it is useful to know how big files are when you are uploading images to your own self-hosted site, because file size can make a big difference to how quickly the page renders to the viewer.
The general rule is that photos render best and at smallest file size when they are saved as JPEGs.
But for simple graphics or text, it is almost always better (i.e. smaller file sizes) to save as a GIF or PNG-8.
Where Am I Going With This
A couple of days ago I made a ‘Seasons Greetings’ post and I uploaded an animated GIF.
With animated images, you have no choice – you cannot save them as JPEGs or PNGs. They have to be GIFs.
The file size of the animated GIF I uploaded is about 20KB – which is nice and small and well suited to the web.
Here it is:
And where am I going with this? Well, it’s this. If you want to make an animated gif – it is better to use graphics or text rather than photos. You can use photos, but the file size will be bigger.
For example, here is a simple two-stage animated GIF using a photo – and the file size is about 340KB.
Compared to most of the files I upload which are around the 40KB size, that’s huge.
How To Make An Animated Gif
If you have Photoshop, it’s easy.
For a very clear and simple to follow explanation of how to make animated gifs in Photoshop, I recommend CreativeTechs’s article on animated gifs. It explains how to make them and how to do ‘tweens’ – which are more advanced than I have ever needed to do.
Photograph Works 
Thanks for pointing this out David.
LikeLike
David, do you know how to make a gif that’ll change on “click”, and stay changed?
LikeLike
I know it is possible with Flash™ files, but I don’t know how to make an animated GIF that will start on click.
I read a suggestion to place a static image in place and then use javascript to replace the static image with the animated GIF on click, but I don’t think javascript ‘sticks’ on WP.com.
Whichever way a GIF starts (automatically or per a script), it is straightforward to make a loop stop at the last frame. In Photoshop, when you open the image under Window > Animation, the frames open at the bottom of the screen. In the left corner of the animation frame(s) the text reads Forever.
There is a little disclosure triangle next to the word and you can choose the number of times for the loop to operate, including just once. If you choose ‘once’, then it will stop at the last frame of the animation.
LikeLike
Java is not gonna stick.
I slightly recall the endless possibilities of PS… a couple computer burnouts back. Flash too. Flash could do it for sure.
I was hoping for a simpler (read: cheaper) solution… like… online/free app… or magic.
LikeLike
Bannersnack isn’t free, but it has a ‘pay for credits’ option.
LikeLike
I’ll check bannersnack out, or download the PS6 trial… should be fully functional for 30 days. I think I can manage within 30 days.Thanks for tips David.
LikeLike
A pure css would be preferred, but wp doesn’t give me access to the css files either. Inline css, doesn’t work with image hover function.
LikeLike
This is a timely and helpful post. As you know I answer questions in the WordPress.com support forums almost every day year round for hours every day. The most common cause of all image “failures” is over-sized images. Folks are uploading HUGE images directly from their cameras and need assistance to learn how to use image editing software prior to uploading images.
P.S. The animated gifs tip is likewise helpful. Thanks for including it.
LikeLike
I’m glad it’s useful. Once I am back in the swing of things, I’ll try to make a point to do a post on some of the cheap or free image editors that are out there, and some of the principles to follow to make a good web-ready image.
LikeLike
Reblogged this on one cool site and commented:
Size is everything. Lack of image preparation prior to upload leads to loss of image quality, waste of upload space and the frustration involved in troubleshooting. Worse still it can lead to creating a bad experience for your readers. Take note of this timely post and learn how to prepare your images prior to uploading them.
LikeLike
How great of you to reblog this.
🙂
LikeLike
I do mostly photos at my blog. (http://wp.me/XX8J) It looks like my JPEGs run in the 5-8 MB range. So, what’s an easy way to convert to smaller file sizes? I’m on a Mac with iPhoto. I also installed Elements, but am finding it a bit much to cope with. Learning curve is more than I can handle for now. I suppose the simplest solution would be to change the setting at the camera, but what if i were to want to do a large print?
I look forward to your post about image editors.
LikeLike
Very few cameras can actually make a jpeg that is small enough for the web, so that solution isn’t going to work.
You can use iPhoto to export photos for the web. I will do a quick post now to show you how to do it.
LikeLike
Thanks ever so much for the clear and concise response! It looks like I should be able to handle what you suggested. Should be extremely useful!
LikeLike
I followed this over from Time Thief. I started using Lightroom in order to downsize my pictures and watermark them. It took a while to get the hang of the work flow, but I can do it now quickly using presets.
Nancy
LikeLike
Yes Lightroom is excellent – especially for batch processing a number of images.
LikeLike
I came here from Time Thief too. A fellow blogger told me about Picmonkey and I’ve been editing my photos there and reducing the size right down before uploading them to WordPress. It seems to be working well. I’m only using the free options and that is giving me enough to work with.
LikeLike
Thanks for pointing me to Pickmonkey. Take a look at the quick post I am just about to put up 🙂
LikeLike
I will. Thank you. I’m a follower now so I’m looking forward to to reading more of your work.
LikeLike
Thanks for following on this. I wasn’t sure how small I could go with the size of my photos and still have reasonable quality on my blog and you’ve answered that beautifully.
LikeLike
Glad to help 🙂
LikeLike
I’ve just edited some photos for my Justin Beaver blog and they look great. I will be looking forward to getting more useful tips from your blog.
LikeLike
This was a great, informative post, David! I was made aware of this some time back, so now I always resize them in Picasa … unless I want to make other adjustments to them so I have to bring them up in PS.
LikeLike
Glad you found it helpful.
I didn’t know it was possible to resize and then export photos in Picasa. I have just taken a look and for some reason the ‘edit in Picasa’ option is greyed out. It might be because I am using Safari. I shall try it in Chrome tomorrow.
LikeLike
Perhaps it’s about what file types you have Picasa set to handle…?!
LikeLike
Found it. It’s ‘edit in Creative Kit’ in my Picasa – will try it tomorrow.
LikeLike
nightynight 🙂
LikeLike
Excellent post! Large pixel dimension animated GIFs are *very* heavy, so I’d reduce the pixel dimensions even further, especially if it has a lot of frames.
For JPG’s, if you are a MAC User, try downloading JPEGmini. PC users can use the online version to reduce the weight of their images.
By the way, Picmonkey is made by the same people who made Picnik. Couldn’t have a better recommendation than that. 🙂
LikeLike
Thanks, and thank you for the information. I tried the online version of JPEGmini (although I am on a Mac 🙂 ) and it shaved 6KB off a 45KB image I had saved for the web with Photoshop. I also ran a full-size jpeg through it and it reduced it from 7.2MB down to 1.8MB with no discernible degradation in the image.
LikeLike
That’s pretty amazing. The image I tried, and which I posted about on my site, wasn’t nearly as heavy and consequently the reduction was much less.
LikeLike
I’m new in blogging and this information helps a lot, thank you for sharing.
There is also the possiblity to use Gimp, an open source product, to scale a picture. In my blog (German) you will find a description how to do this. If someone is interested I can try to translate it to English.
(Sorry for my bad English!)
~M
LikeLike