Image display speed

[hallsofvallhalla]

Chrome is telling me this

A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:

I thought specifying the image size slows it down as just leaving it default would be quicker.

[metacatdud]

...Or you could write a javascript to set this for you for every image in the viewport. Somekind of lazy load but to be run before the actual page will be displayed or you could cache the files via php on server side.
Here is a "get as you go" script for jQuery

Code: Select all

$(document).ready(function(){
   var i = 0;
   pic = new Array();
   $('img').each(function(){
      var imgsrc = $(this).attr('src');
      pic[i] = new Image();
      pic[i].src=imgsrc;
      i++;
   });

   //Rest of javascript
});

Is not much but is something and to hell with that how big are this images to need this kind of intervention

Cheers!

[hallsofvallhalla]

Thanks!!!!!!!

I expected more answers so thanks for the info.

[metacatdud]

- Memcache - for distributed applications
- APC (>= PHP 5.2) - for non distributed applicaions

To be honest i didn't use memcache alot so below is an APC tut

Install
- Easy Mode using PECL Installer

Code: Select all

shell> pecl install apc-3.1.4

- Hardcore Mode by compile it

Code: Select all

shell> cd apc-3.1.4
shell# phpize
shell# ./configure
shell# make
shell# make install

If you drive a windows PC download the DLL from http://downloads.php.net/pierre/ (hope is til there)
copy the php_apc.dll to PHP extensions dir, add it to php.ini, restart server, check phpinfo() and you are done.
Let's do some tests.
A variable content. We test if is cached and if it's not we cache it. This also apply to an array or an object.
Be careful when storing objects with preloaded data. DO NOT STORE USER DATA

Code: Select all

if ($quote = apc_fetch('TheString')) {
  echo $var;
  echo " [cached]";
} else {
  $var = "some string that is meant to do something";
  echo $var;
  apc_add('TheString', $var, 120);
}

Because APC can do much more take a look here

[Callan S.]

I think it would be refering to laying out the page. When it knows the dimensions of the image it can layout the page in a more seemless manner by leaving a space just the right size there until the image loads. But when it has to wait for the image to load to find the dimensions, the page pops about in size.

[metacatdud]

I think it would be refering to laying out the page. When it knows the dimensions of the image it can layout the page in a more seemless manner by leaving a space just the right size there until the image loads. But when it has to wait for the image to load to find the dimensions, the page pops about in size.

How slow the internet connection must be to take this kind of caution. I've been developing web applications for a long time now and never bump into this problem. To work with perfect sizes on web is not ok due to the large number of resolutions and browsers. Work with fluid values and percents and i should be ok

[Chris]

If you predefine those headers the browser skips over the ones in the document, meaning it doesn't have to load them. I don't see how this would speed up download speed. Parse speed maybe.

[Winawer]

If the size isn't specified, the browser may redo the page layout on every downloaded image. This will lead to the page flickering and being unusable, which can be annoying if there's lots of images or images that download slowly.

The download speed is the same, and I doubt redoing the layout takes that many resources. It's probably mostly about perceived page load. The user can start reading the page content before the images are loaded and is basically tricked into thinking the page loads faster than it actually is.

[Jackolantern]

If the size isn't specified, the browser may redo the page layout on every downloaded image. This will lead to the page flickering and being unusable, which can be annoying if there's lots of images or images that download slowly.

The download speed is the same, and I doubt redoing the layout takes that many resources.

Would that also apply to images loaded through AJAX calls, or other client-side actions done after the page is already loaded? That could be very annoying for the page to flicker unusable if you are downloading images as part of a game running in JS, especially if they are images you can't add to a CSS sprite, such as user-uploaded pictures in a social application.

[Winawer]

If the size isn't specified, the browser may redo the page layout on every downloaded image. This will lead to the page flickering and being unusable, which can be annoying if there's lots of images or images that download slowly.

The download speed is the same, and I doubt redoing the layout takes that many resources.

Would that also apply to images loaded through AJAX calls, or other client-side actions done after the page is already loaded? That could be very annoying for the page to flicker unusable if you are downloading images as part of a game running in JS, especially if they are images you can't add to a CSS sprite, such as user-uploaded pictures in a social application.

Generally there isn't that much (simultaneous) image loading going on in an AJAX game, and most of the stuff you show will be pre-loaded even if it isn't in a spritesheet. Also, the images generally have some sort of size in CSS so the layout won't completely explode.

I don't think this whole image size thing is a big deal, browsers handle this stuff really well nowadays and computers are pretty fast.