Have you taken note of your image sizes? A guide on image compression and how to do it
18 November 2011
One of the most distressing moments in a computer professional’s life is when their mother tells them she wants to email them some photos. Unless you have a very high speed internet connection, this means your inbox will be backed up for the next hour as you download six image files that would barely fit on a CD.
We can blame the problem on the free availability of high speed broadband and near-infinite storage, or we can blame it on ignorance, but most people have no concept of what a megabyte actually is. When you ask them how big the image is, they will most likely say “about the size of the screen, maybe a bit narrower”.
Unfortunately, this ignorance of file sizes extends to people who build and own websites - if you didn’t grow up with a background in computers, and learnt how to build websites using free tools such as WordPress, then you might not be too savvy about speeding up your user experience.
Here are a few things to note, before we get to the actual process of compressing an image.
The most common types of image files on the internet are:
- JPEG - These files can lose quality, but generally load the fastest (are the smallest in terms of file size)
- PNG (Portable Network Graphics) - A newer format that does not lose quality, and always looks better on the web, but can be around 25% larger than JPEG files
- GIF - Usually used for moving images, or tiny, flat icons.
If your images are not in these file formats (you can tell by the file extension at the end of the file), you’ll need to convert them. You can do this in Gimp, Photoshop (if you have it), or even MS Paint, simply by changing the File Type dropdown menu when you click “Save As”.
Now that your file is in the right format, it’s time to make sure it’s sized appropriately. If you have a blog, or just about any website, you probably don’t need your image to be more than 600 pixels wide. Any more and your website will simply resize it to fit. If you want visitors to be able to click on it to see a larger version, we’ll deal with that in a minute.
First, what you need to do is open the file in an image editing program. If you have Photoshop, that will do, but free editors like The Gimp or Paint.Net will work just as well.
- Simply click “Image” and then “Resize”
- Make sure “Maintain Aspect Ratio” is selected (this will make sure your image is resized in proportion) and change the width to the maximum width of where it will be displayed.
- Save the file (preferably as a new file, rather than overwriting the original), making sure it is in one of the file formats above
This will then save the file in a smaller size for you to upload.
So what is an acceptable file size? Well, for most web-pages, you want your images to load quickly. A file that is around 600 pixels wide should be no more than 100kb - any larger and your site might take too long to load for people with small internet connections.
Lastly, if you want your visitors to be able to see an enlarged version, go back to your original image and see what size it is. If you took it with a digital camera, it will probably be around 3000 pixels wide, which is nearly 3 times the width of the average computer screen. Size this down to about 1200 pixels, and upload the file separately to your web server.
Lastly, link the image displayed on your web page to the larger file you uploaded, and when visitors click it they will be taken to the bigger file.
Posted in: Website Design, Website Content,
Readers CommentsNo comments have been made about this blog.
Leave a Comment
- Writing SEO-Friendly Blog Posts
Date: 05 December 2012
- Reasons Why your PageRank Go Down
Date: 03 December 2012
- Top 10 Website Marketing Tips for Small Business
Date: 30 November 2012
- Apple’s iPad Mini: Advantages for Business
Date: 28 November 2012
- SEO Extensions for Google Chrome
Date: 26 November 2012
- Protecting your identity, why start-ups should pay heed to IP law
Date: 02 November 2012
- What are the main concerns with digital marketing to the mass market?
Date: 24 October 2012
- What are the key factors to take into account when setting up a complete e-commerce website?
Date: 22 October 2012
- The importance of branding in the online business market
Date: 19 October 2012
- How does the growth of tablet PCs affect your decisions in website design?
Date: 17 October 2012
Blog ArchivesDecember 2012
- Affiliate Marketing
- Book Review
- Business Competition
- Business Management
- Business partners
- Business Planning
- Business Psychology
- Business Strategies
- customer Management
- Digital Marketing
- Email Marketing
- Financial Planning
- Google Places
- Information Technology
- Internet Marketing
- Internet Security
- Investment and Funding
- IT Security
- Link Building
- Market Research
- Mobile Devices
- Mobile Marketing
- niche markets
- Online Business
- Payment methods
- People Management
- Personal Development
- Project Management
- Search Engine Optimization
- Social Corporate Responsibility
- Social Media
- Social Networking
- Spam Tactics
- Startup Advice
- Team Management
- Time Management
- Use of technology
- Video Marketing
- web 2.0
- Web Developmnet
- Website Content
- Website Design
- Website Management
- Website Sales
- Website Traffic