Images sizes on your web pages

[kevsboredagain]

Perhaps watch the video first and then read the long explanation as to why this happens on so many sites.

https://youtu.be/ZBUtSx70RGw

I have reviewed many websites on LMH and looked at countless more over the past 7 years. One problem regarding images in particular is seen so often, I have decided to write a short guide on how to avoid it.

How you add images to your web page will depend on which tools you use to make the page in the first place. You may hand code it, use a drag and drop editor, an HTML editor, a CMS or something else. Which tool you use is not really important.

Let’s say you want your page to display a relatively small 60x100 pixel image. You find the image on your hard drive, perhaps taken with your camera and place it on your page and resize it using your preferred page editing method.
The end result is some code which will display your image. An example of the code required is shown below. This is standard HTML and your line of code will most likely be different. It may use CSS to define the image or section size, just define the width or height only or even have no sizes at all. Unless you are editing and know HTML, you probably don’t even look at the code.

<img src="myimage.jpg" alt="My Image" height="60" width="100">

After adding the image, you view your page in your favorite web browser and everything looks perfect. Job done!

Not so fast. What have you actually done here?

Let’s say, for this example, the image on your hard drive is 2048x1200 pixels in size. You only wanted to display an image on your page of 60x100 so you defined the size in the HTML/CSS or told your editor to make the image only 60x100.

You have actually placed an image 2048x1200 on your web page and given the browser instructions to display it at 60x100. But it looks perfectly fine and loads quickly, so where is the problem? Who cares that I used a larger image?

- It looks fine because the browser is re-sizing the image. This is not really an issue.
- It loads quickly. Only for you it does!

You have probably viewed your page several times as you worked on it, so now all your images are in the browser cache. After you publish the page online, you will only download the images once. After that, they will be loaded from your browser cache. This makes the page appear much faster.

So what is the effect on page speed? A new visitor to your site will have no choice but to load your large image of 2024x1200 and let the browser resize it. The effect of this is slowly loading images. In this example the image downloaded is 2048x1200 pixels= 2,457,600 total pixel. The image you want to display is 60x100=6000 pixels.

The image therefore takes 406 times longer to load than if you had used a 60x100 image in the first place and this will be very noticeable to every first time visitor to your web page.
How to avoid the problem? If you want a 60x100 image then use a graphics editor to make the image this size before using in a web page. Some tools such as Wordpress can do this for you but it’s still easy to make mistakes.

The problem is easy to spot with browsers like Firefox. Right click on any web page image and chose view image info. It shows the size and scaling. Ideally, no scaling should be required.

Clearly I have chosen an extreme example but the problem exists on so many sites.

Note that there are some cases where image sizes are deliberately scaled down, for example responsive pages. In this case, the images used should be the maximum size which you wish to display.

The video below show the difference using an image of the correct size and the same image not resized before use. This page cache is being refreshed 3 times. The image was repeated 6 times to make the effect easier to see. Keep in mind this test was performed on a fast 50MB cable connection.

https://youtu.be/ZBUtSx70RGw

The correctly sized images appear after merely a flicker but the images which have been used incorrectly take a while to draw.

You can test the page here: http://goo.gl/MGPBeL

See what happens when you simply refresh. All the pictures appear quickly because they are loaded from cache. Now try Ctrl-F5 to reload the browser cache. This is what the first time visitor will see.

[CSE]

Hopefully this information is taken in by the members here. When making a responsive website (Which we have not) it is even more important. Then you have to code your CCS correctly to redirect the user to the correct image size on certain devices.

[russellt]

I try to do this as a matter of course using photoshop. I simply re-size an image then save it with the image size in the file name eg filename_300x200.jpg or create an image sub-folder eg/images/300x200/ and save the resized images in the respective folder.

It all seems a bit clunky. Is there a more streamlined way to create, manage and link to resized copies of the original?

Could the webserver(rather than the browser) do it on the fly?

thanks.

[greenbarn]

Thanks for putting this together kev.
It's a bit of a confusing topic - I guess that the image quality setting when first processing the photos can also have an effect? IIRC the suggested value for screen use is only 72ppi - is that still the advice (was it ever )

Safari doesn't appear to have an obvious option to show the size of an image, but I haven't had a lot of time to investigate yet. I can right click an image and save as a file and then see the file size, which is probably about right but a bit clunky.

How about any of the applications that will test your site load time - do they highlight individual images, or just down to page level?
Time for some more investigation!

I suspect it's all too easy to think about this stuff at the time of creating the website, but then completely forget when adding or changing a few images some time later..........

[e-richard]

Is there a more streamlined way to create, manage and link to resized copies of the original?

Take a look at http://birme.net/ which is a great way to resize a whole bunch of images all at the same time and get organized.

Could the webserver(rather than the browser) do it on the fly?.

There are ways to do that using code, but its pretty hairy code that you would have to incorporate into your website and taking time to execute it EVERY time the page is loaded kind of defeats the purpose. I also emphasised the word "every" because it would not then take advantage of the browser's cached version of the image when next visiting that page.

[russellt]

Take a look at http://birme.net/

Nice tip. thx.

but its pretty hairy code

Could you give me a clue? Is it php? javascript? or a plugin? GD library? GIMP? I don't mind digging if you point me in the right direction.

[e-richard]

A php class for resizing is here, but if you just Google for "PHP image resize" you'll find others.

[russellt]

A php class for resizing

Thanks. I played with GD Library last time I looked at this problem, but there were too many tweaks required to get things absolutely right. No doubt this class will remove some of that pain.
Whether it offers better performance than simply having folders full of files of various sizes is, indeed, a moot point. thx.

[kevsboredagain]

DPI is only really relevant when printing digital images on paper. The density of the pixels will determine how many dots per inch are printed on the print medium. For a computer display, this has no meaning except it will determine the physical size of your image on the display. An image on a web page will be a fixed number of pixels and this will normally occupy the same number of pixels on your display, if no scaling is applied. The DPI of your display determines the physical size of an image on your display. If you have a 400dpi display, then an 800 pixel image will physically measure 2 inches on this display. The higher the DPI of display, the more detail can be squeezed into every inch.

Sites which measure download speed may or may not help identify slow images. You may have large images which are deliberately large, so take a long time to download. These sites are only of use to show the loading times of each element but you would also need to be aware which element are larger than expected. You may see too images taking some time to download. Both are 1MB. One may be expected as you are displaying something full page width but the other is not because it’s only a thumbnail. Measuring the speed cannot identity which one is wrong.

The quality and compression of your image is another topic all together. In general JPG are better for photos and PNG or GIF better for logos, man-made graphics or elements with transparency. For the JPG photos you then must chose the compression. As the file is squashed smaller, the quality is compromised but there will be a level where you cannot notice much loss in quality when displayed on a web page.

For re-sizing, there are tools like Richard mentioned and even some that are as simple as right click on the image. Normally though you want to edit the image first, crop and then resize rather than a straight batch resize of all your untouched camera images, so I guess this process can be labor intensive.

If you use Wordpress or even something like Weebly, there are ways to resize your images automatically when placing into the page but it's still possible to make an error.

I normally images into a folder when I want to batch edit many for say a photo album. I'll have full size in 1 folder and thumbnails in another, so no need to rename. The graphics editor I mostly use can batch process files.

For viewing image properties in Safari, Google found me this:

Control click the page in Safari then click Inspect Element.
Select Images on the left.
Click through the images in the list. You'll see image properties on the right.

[greenbarn]

Thanks for the explanation - makes sense.

For viewing image properties in Safari, Google found me this:

Control click the page in Safari then click Inspect Element.
Select Images on the left.
Click through the images in the list. You'll see image properties on the right.

It turns out to be simpler: as you say, right click on an image and select Inspect Element. A box appears under the image showing its height and width dimensions. Job done (just need to remember to close the window that's opened up with all the HTML code in it)


Selecting Images on the left side does allow you to click through a list, with the images appearing on the right, but I didn't have any properties displayed beyond the name. There may be a setting for this - I'll do a bit more nosing at some point.