Page 1 of 1
Image display speed
Posted: Thu Nov 17, 2011 4:44 pm
by 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.
Re: Image display speed
Posted: Tue Nov 22, 2011 9:34 pm
by 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!
Re: Image display speed
Posted: Wed Nov 23, 2011 2:39 am
by hallsofvallhalla
Thanks!!!!!!!
I expected more answers so thanks for the info.
Re: Image display speed
Posted: Wed Nov 23, 2011 1:14 pm
by 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
- 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
Re: Image display speed
Posted: Wed Nov 23, 2011 8:04 pm
by 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.
Re: Image display speed
Posted: Thu Nov 24, 2011 7:58 am
by metacatdud
Callan S. wrote: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
Re: Image display speed
Posted: Thu Nov 24, 2011 12:43 pm
by 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.
Re: Image display speed
Posted: Fri Nov 25, 2011 6:50 am
by 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.
Re: Image display speed
Posted: Fri Nov 25, 2011 6:59 am
by Jackolantern
Winawer wrote: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.
Re: Image display speed
Posted: Fri Nov 25, 2011 8:25 am
by Winawer
Jackolantern wrote:Winawer wrote: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.