- 10 Things To Do When Launching A Site
- Using PHP to connect to SFTP
- Asynchronous Virtual Pageviews with Google Analytics
- 5 Advanced Text Editing Keyboard Shortcuts
- Get the headers of a HTTP request with PHP
- How-to: Create PDF preview images in PHP – Part 2
- How-to: Create PDF preview images in PHP
- Quick Code: Get the domain name in JS
- Things to think about when designing a logo
Sizing Images Correctly – Part One
There are many advantages as to why you should spend extra time on sizing images correctly before adding them to your web page. This post is part one of two which looks at the difference between an image resized using HTML and an image resized in Photoshop.
Original Image (849px x 565px) 89.5Kb
Resized Image (300px x 200px) 14.6Kb
As an illustrative example I have displayed the same image yet have used separate techniques in which to size them in order to show the difference. The first example is the original image whereby it has been uploaded and then had the HTML edited so that the width and height values of the image are set to 300px x 200px. The second image has been deriven from the original whereby I’ve opened the image in Photoshop and resized it to 300px x 200px, then saved it and uploaded it.
The first thing you should notice from the titles is that they both have differing filesizes. Whilst the original image is resized it is still 89.5Kb in size regardless of how large and small it is, whilst the resized version is only 14.6Kb. That works out to be a difference of 74.9Kb which may not sound a lot in terms of today’s download speeds that can be achieved, yet if you consider everything else within a webpage that needs to be downloaded it would be noticeable in terms of how quickly page loads and the user receives the information.
Moving on from how the differing filesizes affects how quickly the image loads I would then look at how the image loads into the browser. What you should notice is that the resized image appears much quicker within the browser whilst the original image when being downloaded appears to load line by line as the browser is trying to display the image whilst it is still grabbing all the information about the image. Being objective you can look at it that the user still gets to see the image (albeit a little later) and does it really matter how it loads into the page. I personally feel it does matter as it is a noticeable way that the user can visually see that the image hasn’t been sized properly and to me that gives the impression that corners have been cut in terms of the development of the site.
The final difference is detail whereby in order to illustrate my point I have taken a 30px square snapshot of the island images at the top of the page and enlarged by four times its current size so we can see that they don’t appear the same. Admittedly you can argue that potentially users viewing the image would be looking at what you see at the top of the page which in this case is difficult to see any change between the two, yet on the examples above we can see that they’re rendered differently which is based upon how differently a graphics package and browser interprets the reduction in terms of pixels when resizing. One aspect that can happen to an image resized via HTML is that distortion can occur ie where detail appears it looks jagged and has rough edges. The advantage of resizing the image before adding it to the webpage is that you get what you see which I feel surely is better.
For further reading on this subject please go to my second post on Sizing Images Correctly.