Image optimization within a website page

→ Are you a new visitor? Please visit the page guidance for new visitors ←

Image optimization within a website page

Welcome back to another article about website optimizations, in this article I thought of writing something about image optimization (again). In my other articles I’ve told you how you can optimize your images so that your website overall is faster, however I missed one little thing there so I thought of making an entirely different article about image optimization within a website page. You’re thinking probably why would I do this since you already optimized your images like I said in my other articles, right? Well even after an image compression, some images are still really big, so you need to be careful how you play with them inside your website.

What does it mean to scale an image?

A lot of users do not think about what it means to scale an image directly from your html website page, meaning you’re using that big resolution image to scale it to a thumb size of 120/150 pixels for example. The issue here is that while the images are scaled and look small, on the client side they will have to download the entire image size even if they scaled it for a smaller size. That is what to scaled an image using html code is, basically the file size remains the same, but the image size is smaller. lets see in an example of image that is 640×500 pixels :

Basically you’re scaling the image directly using the width and height img parameters, but still using the full file size of the image650x500pixels.png file.

So when you think about the image size you would need to think of its file size also, normally if the image file size is smaller, eg. you scale the image using a different application for thumbs for instance, the image size and file size get smaller proportionally.

What is the best way to get the image in thumb size?

Well it usually depends on the script and what approach to link images you are using. If you are using wordpress or any other cms, these should include similar functions for creating the thumb size. For instance, using wordpress you can use these functions:

That is a really easy way to create the thumbs. if you are using your own script, searching a bit on google led me to a script from webcheasheet.com here:

There are others scripts like timthumb that allows you to use remote images directly in your script, I highly recommend you to STOP using such scripts, these can be used if not secured properly to upload shell scripts to your hosting account, I’ve seen this happening unfortunately and wasn’t really nice cleaning up afterwards. In any case, please do not rely on timthumb similar scripts. I have seen a lot of wordpress themes using that script for thumbs, I really am not sure why still using it since wordpress is kind enough to help us generate thumbs directly.

Ok, back to our things, I’m pretty sure there are a lot more other scripts out there that you can use for generating the thumbs for images, the issue here to make sure your scripts are safe and secure and does their job.

I really hope this article helped you guys in optimizing  your images and in turn speeding up your websites. That’s the whole purpose of using thumbs actually. Don’t forget, a browser has a limited number of  files that can download at one time, meaning if it stays too much to download a certain file, it will look really slow!

That’s it for now, comment below if you think I should be adding or change something above. Until next time.

Request an article ←