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
