DIY Web Design For Creatives

It doesn't have to be rocket science

Cheatsheet For Optimizing Your Images

January 5, 2017

One of the most misunderstood aspects of DIY web design is the use of images. No matter what site builder you are using, you need to compress and optimize your images for web viewing. Some may do this automatically for you but most do not. So do not assume yours does. Better to be safe than sorry and do all that legwork in advance.

Image compression / Optimizwhating?

When you take a picture with a digital camera or even on most phones nowadays the resolution and size are very large. Which is fine and dandy for printing or viewing on a computer and TV which can process the data and spit it out quickly, but really not so great when you are sending it to grandma with her old computer and 56k dial up modem and facebook/Instagram/twitter(insert site of choice) doesn’t load immediately.   

Grandma taking pictures with film camera

The solution is RE-SIZING & COMPRESSION. First take that picture, probably well over 2000px wide or high and in your graphic program, (yes even Microsoft Paint) RE-SIZE it to be as close to the finished size on your site. For example, most images that are in the body of your site will be no larger than about 600px wide.

PRO TIP – Most imaging programs have default settings to constrain the image which means that when you change one of the properties, the height or width. The other will change automatically. Kind of like magic. Okay not really, but cool none the less.

So now you have RE-SIZED that image it’s time to throw it up on the site 

Stop Sign

The Bits and Bytes of It

Not so fast. Now we have to compress and optimize. But hey, I already RE-SIZED it!

Table of Byte Sizes

For images to load fast on the web we need to put those bytes on a diet.  Many image programs have the ability to compress and optimize for the web. But if yours does not, there is a handy online tool called  tinypng.com that does this magic for you. I’m sure there are other online tools but this is a great one I have used before.

They use their fancy magic. Ok fine, algorithm (but magic sounds better) to losslessly compress your images and optimize them for web use.

Tada problem solved now you have an image that both looks small and weighs less so that when people load your website, that cat meme (or whatever is popular these days)  doesn’t take three minutes to load.

I apologize in advance if this sends you back to your website to re-upload a billion images. All I can say is, boy have I been there my friend. But now you never have to do that again. Because next time your image will be RE-SIZED/COMPRESSED and OPTIMIZED before you upload it to the World Wide Web.

If you found this helpful or entertaining. Click that like/share/tweet button on the side. Or leave a comment. And if you have any more burning questions, fire them to hello@truerefelctionmedia.com and maybe we’ll blog about that next time.

We're just getting started
Sign up now and never miss a tip

Thank you! Stay tuned for more great tips.
Oops! Something went wrong while submitting the form

Recent Posts