3 Simple Image Optimization Tips

Facebooktwitterredditpinterestlinkedintumblrmail

Does the technical aspect of your blog leave you scratching your head in confusion?

I sometimes feel completely lost when it comes to the technical aspect of anything done online. I just want to write and publish my posts. That’s it. Write and publish. Nevertheless, there is a little more that goes into building an online business.

I recently came across an article discussing WebP image formatting. WHAT??? What the heck is that?

You have got to be kidding me.

JPG, 462 KB, 1920 by 2560 pixels. Compressed not sized!!  So this image was the original pixel size. Way to large to look good here!
JPG, 462 KB, 1920 by 2560 pixels. Compressed not sized!!  So this image was the original pixel size. Way to large to look good here!

I’m still figuring out how to get my good ole JPG formatted images on my blog and make it look half decent. I was going to say “so my post doesn’t look like a kindergarten drawing” but the kids probably have a better handle on this stuff than I do.

Luckily I also came across another article on optimizing your images for your site, and am happy to say that I actually knew what 3 of the tips talked about were, and was already doing 2! Yay me. So happy JPG formatting is not dead. Yet. But just incase that day comes I best be prepared.

Learn Something New

The article from Palash Nag about  the WebP image format is still too technical for me at this point. Maybe when WebP goes mainstream with JPG, PNG and your GIF formats it may be something I look into. Right now it is just a bit to intimidating with having to add plug ins, changing WordPress themes, editing code etc.

Syed Balkhi on the other hand offered up some simple tips. These are the ones I already knew 🙂 along with some  more technical components. His focus being the 3 classic image formats. JPG, PNG, and GIF.

Defined Image Dimensions

The one thing that Syed brought to my attention that I have not been doing was defining my image dimensions prior to uploading them to WordPress. When the images are the size you want before uploading them your site doesn’t get bogged down with trying to resize in the background on the fly every time someone goes to your site.

So having the proper dimensions not only makes your page look good, it allows for faster page load. I knew this from other applications but it had completely slipped my mind when I started using WordPress. A simple oversight for someone just starting out. Especially when the learning curve is steep and everything is overwhelming. Easily rectified although it can be time consuming if you have a bunch of images already uploaded that you need to change. Keep in mind the more images you have on your site the more important it is to make sure they are sized properly. No one is going to sit around waiting for a web page to load.

Likewise, keep in mind social media platforms also use specific image dimensions for things like profile pictures, cover photos and especially advertising. When you are advertising across multiple platforms like Facebook, Instagram, and Messenger if your images are not sized properly your ad will not look proper going from one platform to the other. This can be very frustrating to navigate when you are first learning social media advertising.

File Compression

Now the one thing I was doing on my blog was compressing images to reduce the file size. This may have an even bigger impact on load times than the image dimensions do.  We have all encountered “file size to large” when trying to upload. (Lately it is everything I try to do on my phone. Grrr.) We all know that large files have long load times, and images can be very large files. WordPress will take care of this by letting you know the “file is to large”, but you can and should be compressing files with a compression software. The smaller the file the better.

I use tinyPNG.com to compress my images and have just found out that they have a WordPress plug in. I will certainly be checking that out in the very near future. They also have a photoshop plugin if you use photoshop.

Another way you can reduce the file size of your images is by removing the background. I use the free version at  remove.bg for this job.

Ultimately, you want to define your dimensions, compress the image, and voilà. A nice itty bitty file.

But What Format?

PNG, 433 by 577 pixels, 319 KB was automatically resized and the JPG converted to PNG when background was removed. Ideally this image would be 225 by 300 pixels. This is still to large to look good here.
PNG, 433 by 577 pixels, 319 KB was automatically resized and the JPG converted to PNG when background was removed. Ideally this image would be 225 by 300 pixels. This is still to large to look good here.

Just when I think I am getting things figured out, I decide to take a closer look at image formatting. I took all the technical jargon and basically broke it all down to this:

  • JPG/jpeg is the most common image format. Your phone and your DSLR/digital cameras take pictures in a JPG format. It is currently the most popular image formats in use when it comes to taking and sharing photos. 
  • PNG format is used primarily for web design.
  • GIF’s are the fun ones we use/see on social media. These are animated images.
  • WebP is also used primarily for web design. Has a smaller file size than JPG or PNG. Still not a widely accepted format without plugins and a bunch of techie stuff to make it work.

Now, I know this is the most basic description one will possibly find, but for now it works. I like to keep things simple. Besides I am not an aspiring web designer, I am a blogger. An inexperienced one at that. Maybe one day I will try my hand at web design…hmm…That being said I strive to get better, do better, learn more, so…

TESTING…TESTING…TESTING

I ran some tests to check out different file sizes with JPG, PNG, and WebP. Regrettably I am not able to upload the WebP image because I am not running a WordPress theme with the proper plugins and code that supports the format, but with this same picture I used throughout the post, the file size came in at 72.9 KB on a 768 by 1024 pixel image. Remove the background and it would be less. The JPG with the same dimensions came in at 108 KB.

JPG, 768 by 1024 pixels, 108 KB This image is within the dimension parameters of  large image. Still too big!
JPG, 768 by 1024 pixels, 108 KB This image is within the dimension parameters of  large image. Still too big!

I also ran a couple of different pictures and the WebP came in slightly higher than the JPG in terms of file size. Not sure why this happened but I think I will go back and check dimensions!

Nope that wasn’t it so hopefully someone can offer some insight as to why some WebP files are larger than JPG.

Occasionally removing backgrounds from images can cause some distortion to the image. Especially using digital photos that contain people, multiple colors, or busy back grounds. This photo I used turned out pretty good. I have had some that do not work. The average person browsing web content isn’t going to notice slight defects in the image.

What Will I Do?

After consulting Wikipedia, numerous articles, and playing around with converting formats, removing backgrounds, and altering dimensions; along with the knowledge that my current WordPress set up does not allow for WebP formatting; I am just going to keep on doing what I know.

  • I will define my dimensions.
  • I will compress the image file.
  • Upload to WordPress etc.
  • Until WebP becomes mainstream I keep using JPG and PNG.

In this order. Always. Define, compress, upload.

This way I can keep focusing on writing and publishing. When I get so big I have to get more technical I will hire someone.

Drop a Comment Below

Just for Fun. www.remove.bg allows some editing capabilities. :)  225 by 300 pixel is a great size!
Just for Fun. www.remove.bg allows some editing capabilities. 🙂  225 by 300 pixel is a great size!

Let me know what you think about the article or any helpful suggestions you have. Also are you someone that loves all the technical aspects of being online or, like me, just want to keep it simple?

Also if you KNOW why some WebP files are larger than JPG even though the literature says they shouldn’t be, I am dying to find out. (and now have the lyrics to a Savage Garden song stuck in my head)

 

Facebooktwitterredditpinterestlinkedintumblrmail

Leave a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge