With the ever increasing speed of everyday users Internet connections it seems to become more and more apparent to me that people are not taking any time to optimize any of their images, especially on Myspace.
I visit a lot of websites everyday, and among them a lot of Myspace pages. Out of these sites I would estimate that at least 1 in 10 of them will not have taken any care to optimize their images which results in long load times (which are much worse on slower connections). For most users it will be unlikely to become a problem as 8Mb broadband is pretty much the standard now, but this doesn’t mean that it won’t be a problem. I notice it much more on Myspace because I visit a lot of pages which are using div layouts and the majority of people who are using them either don’t care about load times or don’t know what to do to decrease them, for example I visited a page today that took me on my 8Mb connection roughly a minute to load fully, and it was mainly because of one image in the background that must have been 10+Mb, I really don’t know how anyone on a slower connection would have coped. Anyway, enough of me complaining, lets start adding some kind of structure and usefulness in this post.
The Factors
There are a number of factors that cause an image to be a large size but the main reasons are the image compression type, resolution (dots per inch), image dimensions. You have control over all of these, but lowering any of them will more than likely cause a loss in quality. The key is to find a balance between quality and image size, once you have done that you just need to repeat the process with your other images.
Image compression
What most people would consider as “changing the extension” or file type of an image is actually changing the way the image is compressed. I could go into details about the different types and how they store the data, but it wouldn’t be interesting, instead I will just tell you of the main three compressions used and when to use each of them.
The Main Three
JPEG - Everyone has heard of a JPEG before, it is the most common image compression technique used by graphics programs, digital cameras, etc. In most graphics packages you can choose to change the quality of the JPEG you are outputting which will make a difference to the file size, for example the image at the top of this post is 7.5Kb in size (I saved it at 80% quality), 100% quality would have made it 10Kb (which doesn’t seem much because it’s a small image, but imagine if the image dimensions were much bigger, it would make a much bigger difference at what quality you save it as). What I usually do on larger images is lower the quality until I see a noticeable difference, then save it, this is usually around 70-80% but does depend on the image.
GIF - This is another widely used compression technique. It is often used to keep transparency or for animated images (animated GIF’s). Usually it depends on the image if a GIF will be smaller than a JPEG, to understand why I will tell you a little about how GIF’s store data. GIF’s store each color used in the image, and only these colors, therefore if you have an image which only uses two colors (e.g. black and white) then a GIF will more than likely be smaller than the JPEG.
PNG - This is a relatively new image compression technique and is being used more and more these days. PNG comes in two modes, 8bit and 24bit, the latter being obviously bigger but higher quality than the former (not to mention the 24bit compression can handle transparency too). PNG’s also work a bit like GIF’s in the way that they store each color that is used. I usually find that PNG’s are better than GIF’s when it is a more complex image (more colors). Don’t forget that the PNG’s transparency won’t work in older versions of browsers (IE6 and below), although that is becoming less of a concern these days, you still should think about it.
Overall it’s not that much effort to “optimize” your images, there is even software out there to try and do it for you (if you don’t have a semi-decent graphics package that is). A tool I have come across in the past is this one, there is also a great list of software to do it for you here, not forgetting to mention the well known free graphics package; GIMP.
Related:
Responses to “Optimizing Images for Faster Load Times”
October 22nd, 2008 at 2:48 pm
I’m new to the web and myspce. All info that can help me to increase my knowledge is great. not sure what all that means. but i did sign up for webranking’s help.
May 9th, 2009 at 12:39 am
Yes image optimization is a great idea! BUT! Most places like myspace and probably also most of the free image host sites will automatically recompress them to smaller sizes to save on bandwidth and storage space. Also when using the new Safari 4 Beta, it tells you exactly how long it takes to load the page, and how much time is spent on what. When loading my home page (not even a profile, and without any custom images or design) i can see that it takes 10 seconds to load all of the html and images combined, and then 40 seconds on “XHR” which is javascript trying to communicate with myspace. this is the case on most of their pages unfortunately, and most high load times on myspace aren’t usually the result of unoptimized images, but myspace’s buggy HTML code, un matched tags, and a hefty supply of javascript.
October 13th, 2008 at 10:58 am
[…] Nick Edwards wrote an interesting post today onHere’s a quick excerptWith the ever increasing speed of everyday users Internet connections it seems to become more and more apparent to me that people are not taking any time to optimize any of their images, especially on bMyspace/b. I visit a lot of websites b…/b […]