Love Your Images

Love Your Images

Images are awesome. They bring untold life to your webpage, and make reading content so much more enjoyable.

However, all of these awesome images could be destroying your WordPress site’s performance. If your images are too big, or if they’re saved in the wrong format, you can make your site painfully slow.

So, with a lil’ love, let’s talk about how to fix our images and help keep our sites super fast.

This is is gonna be easy. And I’m going to give you three ways to tackle this problem: from novice to expert.

Novices – WP-only solution for Image optimization

If you have no skills with Photoshop, just log into your WordPress site and upload this plugin*:

http://wordpress.org/plugins/wp-smushit/

Designers – Photoshop

If you have Photoshop skills, then you should be optimizing your images “before” you upload them to your website. So open a few images in Photoshop right now, and follow these rules:

  1. 1. Go to Image > Image Size
    Make sure that the resolution is set to 72. This is the only resolution you should use online. No more questions about this setting. Feel free to change the Pixel Dimension settings by hand.
    image-size
  2. Go to File > Save for web
    If the image you are saving is a solid (no transparency) photo, then the only setting you should use is .jpg. for best compression results. No questions.
    Try moving the quality slider down to 33%. Look in the bottom left corner of this control panel to see how big the image is.
    The image that I’m using is brought down to 99.63K.
    You want get the file size down as far as you can without any noticeable corruption in the image.
    There is no magic to this. Just slide the quality slider while watching the image. Just reduce the file size. I usually compress between 50% and 30%.
  3. If you are saving a logo or graphic, then it is safe to use .png or .gif. You can play with these settings to see which one gives you the best compression.
  4. Choose the one that give you a smaller file size.
    save-for-web
  5.  Upload these optimized images to your WordPress site. You can still run smush.it for further compression if you want.

Geeks – Command Line

If you are a total geek, then you might want to compress your images from the command line. I love this method! I use this method even after I optimize my images with Photoshop.

A fantastic tutorial about how to set this up has already been written by Smashing Magazine, so read it, and geek out:

Meet ImageOptim-CLI, a Batch Compression Tool

commandLove your images

Compressing your images with love makes for a much faster website. And a faster website makes your visitors happier to.

More WP tips later.

Stay awesome!

*Neither goBRANDgo! nor Ben have an affiliation with Smoosh.it. There was another plugin listed alongside Smush.it, but prior to publication, it was discovered that there were unnecessary security issues presented with the selected alternates. Sorry!
Enjoying our insights? Enter your email below to subscribe to our monthly newsletter.
Previous
Next