Categories
Eng-Business Eng-Marketing

Images on your website – are they bogging you down?

This guest post is by Nathan Bullock

So whether you’re the DIY type, and you are building your own website, or working with a website developer and supplying your own images that you want to prepare in advance, a major consideration is the file size of images.
I’ll start with an extreme example.

If you have ever taken a digital photo, transferred it to your computer, and then tried to email it… then you may have noticed that the image file size is HUGE, and will take up to 10 minutes to send (if it sends at all).
Well unless you are planning to print a wall size portrait with the image, then most of the file space is taken up by unnecessary data.

So lets apply this scenario to a webpage.
Most computer screens will not be “wall size” and often internet speeds are a factor… such as dial-up modems or 3g connections. So it makes sense to keep the file size down.

Image Editing Software

Photoshop is my weapon of choice, but there are many image editing programs available for free and paid for.
A great free image editing program I have used and can recommend is GIMP (search it on google) it is free and very similar to photoshop.

Re-sizing your image

Ok, so now we have our editing software…the next question is… how big is your image?

In the toolbar at the top of your screen, select view>actual pixels.

If you image just zoomed in further than you expected… looks like your image is too big.

Select image>image-size and re-size the image to the size you need. Most images I use are around the 500px wide range, but depending on the use of the image, you may need to make it smaller or larger.

But we’re not finished yet, now we want to reduce the file size even more.

There is a handy function in photoshop built exactly for our situation… it’s called “save for web”.

This handy tool will let you preview the compression rate of your images on the fly.
Simply go to file>save for web, and here is where the magic happens

Save for Web

Now depending on what type of image you are working with, there are several different options for file type, ie. .gif and .jpg.
If you are using a photo style image, then jpeg is almost always the best image type to use. 
If you are using a logo or solid colour image, then gif may work better.

The best option at this point is to have a play around… try different file types from the drop down menu, and choose the one that keeps the image looking the same, but reduces the file size the most.

Adjusting JPG compression.

In the save for web screen, with the jpg file type selected, there is an option to change the compression percentage.
This is where a bit of careful consideration comes in to play.

File size vs image quality.

Compression will almost always decrease the image quality… but when we are optimizing for the web, we need to find the point that file size and quality are both acceptable.

Again the best way to do this is to play around with the compression slider and view the difference between the two images.
A brilliant feature of the “save for web” function is the preview screen. It shows you both the original image along side the compressed version.

I find around 60% compression (0% being worst quality and 100% being top quality) works well for most images… but again, view the images, and see for yourself.

Ok so once you’ve saved your image… you now have web ready graphics and images.

I hope this has given you some help with images for your website.

About guest blogger:

Nathan Bullock is a web designer at Bullet Websites with over 7 years experience, and enjoys writing articles for non-tech types.

This post valuable? Support us by liking our fanpage 🙂

Want to have your post here? Check out our easy to follow guidelines

What do you think about images on your website? Please share us your opinion

SHARE THIS POST



More You Need to Know

How to Make Your Website More Visible

The online marketing world is competitive. Studies show that over 90% of web users look only at the first page of search results. If you have no presence there, it may mean certain death to your start-up. The good news is that legitimate ‘white hat’ SEO techniques can help put you on that coveted page. […]

Read More
How Much Liability Insurance Do I Need for Rental Property

Investing in a rental property can be a lucrative endeavor, but it also comes with risks. One essential aspect of managing those risks is having the right amount of liability insurance. The big question for landlords and property owners is: How much liability insurance do you need for your rental property? In this post, we’ll […]

Read More
A Guide to Making Money on TikTok

Welcome to our comprehensive guide on how to make money on TikTok! With over a billion users worldwide, TikTok has emerged as a powerful platform for content creators to showcase their creativity, entertain audiences, and monetize their influence. Whether you’re a seasoned TikToker or just getting started, this guide will walk you through the various […]

Read More