How Big Am I – GIF, JPEG, PNG

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:

seasons-greetings

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.

Wedding guests in Udaipur

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.

33 thoughts on “How Big Am I – GIF, JPEG, PNG

      1. 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.

        Like

        1. 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.

          Like

        2. 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.

          Like

  1. Pingback: How Big – Gif, Jpeg, Png | Light Reading

  2. 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.

    Like

    1. 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.

      Like

  3. 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.

    Like

  4. Pingback: Image uploading? Size is everything | one cool site

  5. 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.

    Like

    1. 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.

      Like

  6. 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

    Like

  7. 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.

    Like

  8. 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.

    Like

    1. 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.

      Like

  9. 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. 🙂

    Like

    1. 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.

      Like

  10. 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

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s