I happen to host several dozen client’s websites (it’s part of my recurring income for my business). And some of my clients like to post pictures…lots of them. As a webmaster and the person who happens to host them, I have to push them to understand why they should optimize their images (for the record, I’m not talking about optimizing in an “SEO” frame of mind…I’m talking about optimizing as it relates to load times..for them… and bandwidth…for me).
First, for those who don’t want to wade through this article and just go immediately to the free tool, it’s TinyPNG and what it does is strips similar colors from photos and compresses them down. I have seen pictures get further reduced by as much as 75% by simply using this tool. It’s a great tool to bookmark on your browser for easy uploading and although it is free, they do accept donations (why not throw them a buck or two if you find the tool useful, right?)
Here are some other suggestions I give:
Always resize the picture to fit the framework of your website- For example, one of the company’s I work with think that it’s okay to load up a hi-def jpeg of someone that is 3000×5000 pixels. Sometimes the pictures are so big, they “break” before loading.
And while it’s true that you can adjust the image size within the admin panel, wordpress still has the load the original before it scales it down….which will cause speed loss.
A lot of my clients have an issue with this simply because they don’t know how to scale the pictures down. I almost always suggest snag-it because it is so incredibly easy to figure out and is easier than having to open up photoshop every time you want to scale a picture (it is very much so worth it if you are using creative commons photos and want to grab them from the computer screen.)
But if you have access to photoshop, you can scale that way too.
Either way, both options work.
Unless you are using hi-def photography with millions of colors, convert that .jpg to a much smaller .png- the 3 most widely used photo formats are .gifs, .pngs, and .jpgs That is in the order small smallest potential size to largest. A lot of people will tell you to reserve jpg files for actual photographs. The reality is that unless you are displaying large hi-def photos and your business depends on it, you will likely not notice a difference between a jpg and a png.
Incidentally, I almost never upload jpeg photos anymore. The difference on the web is so small and if I can improve site speed for a little image loss, I will. Pick your poison though.
Make the PNG the smallest you can make it- If you have access to photoshop, their “save for the web” option is very good for optimizing photos. If you don’t, use TinyPNG.
Make your pictures responsives as well- Considering that screen formats now jump from something as large as a desktop monitor to as small as a cell phone (and everything in between), it is also a good idea to make the images responsive to enhance the viewing. I use FooBox for nearly all my clients (I have a developer’s license). I wrote a review here if you would like to investigate.
So there you have it. In review.
- Always resize your photos to the size you are planning on displaying them. (unless you are incorporating a lightbox to make them larger)
- Use the JPEG format for hi-def photos. If you can get away with it convert it to png to lower the file size.
- If you decide to use PNG’s, you can likely reduce the image size by using the free tool TinyPNG. If you are using photoshop’s save for the web option, it won’t reduce much further though.
- Consider making your pictures responsive with Foobox.- Make it so the images will get larger or smaller based on the viewing device.