This post is supposed to be a quick-tip on how you can optimize your images for web pages. But it feels like I also want to give some thoughts about website speed. There are many websites saying that your images must be optimized for the web, that should be updated and say, "your images must be optimized for web and mobile devices" in which the amazing Adobe Photoshop can help us with.
But before the tutorial and showing you the amazing results, I just want to give some thoughts on faster web pages. Optimizing your images can benefit, you, your users and search engines such as Google.
Website Owner
I love fast loading web pages. Over a month ago, Alexa says this website's load time is around 4 to 6 seconds. That's horrible. So I decided to make this website load faster. Here are some of the things I've done to make it possible:
- I removed Infolinks ads to achieve speed in exchange for few bucks.
- I removed my Twitter and Google plus follow buttons.
- I removed Facebook like box, it loads images of Facebook users which is slow. The one you're seeing on the right sidebar is just an optimized image.
- I removed some jQuery plugins such as the "Recent Posts" plugin, the one you're seeing in the right sidebar is just a hard coded HTML.
- I limited "Related Posts" plugin to show just 5 items. Each item is a callback that makes a slow page load.
- I removed my stylesheet hosted in Google drive. Google drive HTML/CSS hosting is really slow.
- In short, lessen your HTTP requests.
Now a page from this site loads around 1 to 2 seconds. They say that it should be 1.5 seconds or less. But for now, the current speed is just okay for me. I'm still looking for ways to improve it, it's just I don't have much time for that yet.
Your Visitors
You readers or website visitors also love your website to be fast even though you won't hear them saying it to your face. Everyone loves instant nowadays, instant noodles, instant result, etc. The same with web pages, users wants to read, or should I say scan, your content and get what's in your brain in an instant. One way to do this is making your web pages load fast.
What you and your users love, Google love. If your visitors like their experience to your site, they might share it or link back to it. And Google can see it, which can give your website a chance to rank higher in search results. Currently, around 80% of this site's traffic comes from Google. Thank you Google!
How to Optimize an Image for Web and Devices using Photoshop?
Easy. Watch the video I made for you below:
The Result.
I chose to have a 'high' quality image. So from 80 kilobytes, it becomes 14 kilobytes.
Here's the 80 kilobytes version:
...and now here's the 14 kilobytes version.
As for my eyes, it makes almost no difference aside from it's file size which is more than 4x smaller compared to the original. You can download the two images above and view their properties. Or you can do the few easy steps on the video above to see for yourself.
I think this is a nice start for making your web pages load faster, and as always, thanks for reading!
For FREE programming tutorials, click the red button below and subscribe! :)
website