0

Say I want to print an image multiple times, and in groups. So the the desired result would be something like this:

:) :) :)
  text
:) :) :)
  more text
:) :) :)

Is it more efficient to create one large image like :) :) :) out of the smaller image, or to just print the smaller image :) a bunch of time?

This is a Rails application. The small image is about 3 kB, and the large image is about 12 kB.

Joe Morano
  • 1,715
  • 10
  • 50
  • 114
  • Define your criteria of efficiency. Example: a small picture will save bandwith and download faster but several prints might take more CPU. – borjab Nov 26 '15 at 09:47
  • @borjab Interesting, so in other words the small picture would cut down on load time but would be harder on the server? – Joe Morano Nov 26 '15 at 09:53
  • Don't know but I am sure it really helps to have more context. It is a web application? Are images really heavy? A web server application? – borjab Nov 26 '15 at 10:31
  • And surely bigger images are more work for the server. Small images can be cached and only be downloaded once. – borjab Nov 26 '15 at 10:32
  • @borjab I added some more information. – Joe Morano Nov 26 '15 at 20:27

2 Answers2

1

In this case the smaller image has some advantages:

  • Less bandwith and network time.
  • Smaller image to keep on memory caché o retrieve from disk.

A slightly harder work may be done by the client but most times this will be unapreciable. You usually want to avoid work on the server where you may have lots of request by minute.

Any way, I won't be too worried by this. The last Jquery lib is 240KB. The client will have much more load from excuting javascripts.

borjab
  • 11,149
  • 6
  • 71
  • 98
0

The larger image is the proper way to go.
What is important is the single image has only one round trip http request
where there will be three for three images.

In a test the 3 images took 2.68x or 268% more load time.

In this page load waterfall I have 3 images about 3K each.

3 3K images

This is one 12K image.

12K image

Orange is the time for Browser to connect to server.
Green is the wait time for server to put image in output buffer.
Blue is the time for the server to transmit to the Browser.

The 3K images have only a very small thin blue line which is 3 milliseconds.

Three 3K image times
430 mS total load time.

connect 65 mS
wait    72 mS
transmit 3 mS
Transfer 3515 bytes @ 878,750 Bytes/sec.

connect 64 mS
wait    71 mS
transmit 3 mS
Transfer 3515 bytes @ 878,750 Bytes/sec.

connect 76 mS
wait    73 mS
transmit 3 mS
Transfer 3123 bytes @ 780,750 Bytes/sec.

The 12K image
160 mS total load time.

connect 69 mS
wait    74 mS
receive 17 mS
Transfer 11982 bytes @ 665,667 Bytes/sec.

430 / 160 = 2.68 * 100 = 268%

Misunderstood
  • 5,534
  • 1
  • 18
  • 25