I have a database, that stores items and a link to an image for every item. Now the images can't be storen localy (there wouldn't be anough space and other reasons as well), so I link to images on other servers.
When I wan't to display the items (with it's image), I run while statement with mysql_fetch_array like this (simplified):
$result = mysql_query("SELECT * FROM items");
while($row = mysql_fetch_array($result)) {
echo "<h1>".$row['name']."</h1>";
echo "<img width='200' src='".$row['img']."' />";
}
But the image load takes forever, because some of the external images have large sizes, however I only need it 200px wide.
Is there a way to smaller the image 'on the go', or something to speed the loading up?
(Using php/html)
Thanks, Mike.
Anything you do "on the go" will be even slower, since for you to resize the image you have to first download it.
You can resize the image and save a smaller version, doing so is pretty straightforward. There are plenty of examples in the documentation and comments here.
But you only get a benefit out of it if you save the smaller images and serve them from your server (or from somewhere else you can put them, like Amazon S3) on future requests.
You can write a quick script which makes a smaller version of every image your database references offline then start serving them instead of writing <img> tags pointing to the remote versions.
No.
The image is a certain (file) size, and it is stored somewhere that you don't control.
In order to reduce the size, you have to transfer the data to somewhere you do control — and that takes more or less the same time as it would take to transfer to the browser (after which you have to spent time editing the image, and then time transferring it to the browser).
There is no direct way of resizing the images on the fly since it will require a lot of CPU computations, so it is just simpler to serve the full res image and let the browser resize it.
If you decide you want to resize the images on the server and then server lower res images, you can use this PHP class. I it pretty simple to use and works pretty fast.
Hope this helps.
If you own the external location of the image and have a lot of images I would create a scale function.
E.g:
"domain.com/yourimage?w=200"
where "w" would be width, telling the server to resize it before you retrieve it.
Related
I need a image resize system for a project so I decided to upload original images into DB encoded with with base64, I would like to keep stored only original images since they are easy to manage(add/edit/delete).
The output is made dynamically with php and IMagick atm.
The main problem I met is the output slow time, specifically the processing time needed it too long because I use resize+compress.
I need this compression because my visitors have slow internet connection and sometimes images are really big for just a preview.
Alternative solutions I though is to store in DB some resized images but won't be eficient because it will take more space and images size will change over time.
So, my question is: is there a method to deliver images dynamically faster? How?
You won't get around caching the resized images in some way. The thumbnails don't need to be stored in the data base; you could also write them to disk. Only recompute the resized versions if the original image has changed.
I've got an application I'm building with PHP which calls photos from a database according to however many images there are for a given plant species. I have the script resize the otherwise large photos to 100x100. This process REALLY takes a bite out of page load time and my computer's CPU gets up to 100% and is working quite hard.
I think it's because all images are loading at once... Is there a way to have them load only when the previous one is finished? Or is there a more efficient way of rendering images like this? Here is the snippet that loads 'em:
$imagesArray = explode(", ",$images);
unset($imagesArray[count($imagesArray)-1]); // get rid of the last array key which is blank.
echo '<tr><td>Images:</td><td>';
foreach ($imagesArray as $imgloc)
{
echo '<a target="_blank" href="plant_images/'.$imgloc.'"><img src="plant_images/'.$imgloc.'" width="100" height="100" alt="'.$row[2].'" title="'.$row[2].'" /></a> ';
}
Here is a screenshot of a partially loaded image in the page (this is a lot better than what happens other times! Seriously, some species have 10-12 images and my computer takes about 15 seconds to load the page, painfully)
http://www.captainscall.site11.com/temp_stuff/slow-img.png
I found this already, mildly helpful.
Thank you kindly,
Khanahk
The users browser will usually cache the images, so that the user will only experience slow loading the first time he/she visits the page.
However, you should consider having thumbnails of all the images that are being displayed. You don't need to make these thumbnails your self, in 2013 we have computers to do that.
A quick google search will probably give you some software that can make resized copies of all your pictures in no time, or if you know some coding you can make your own script to to this. You can for instance use Imagick in PHP (see http://php.net/manual/en/imagick.scaleimage.php). Then just store two sizes of the images on your server, one for thumbnails and one set with higher resolution.
One advantage of doing this is that you will decrease the outgoing data from your server (if your server has a lot of unique visitors, there will be a lot of traffic due to the size of the images). Also your users will experience less loading time for your site (as you said, waiting for images to load is boring).
You could probably tell the browser with javascript in what order to load the images, but that wouldn't solve your problem, which mainly is that your images are too big.
I think you should:
Serverside: you need to cache an image if it already generated, the next time you can use the cache version. You can create a physical image file for next used.
Client side: you can use library to lazy load your image
http://www.appelsiini.net/projects/lazyload
You can implement a JavaScript function that load image after some specific second.
Introduction: My Webpage shows the remote server PNG images of Size 90 by 90. I want to re-size it to 50 by 50. There are 300 of images on single webpage which make it slow. Normally My Webpage daily opens by 2k users.
By Searching a Lot I Found these methods but I don't Know Which is Better Please help..
Here Are My Approaches:
On The Fly.
re-size and Save it to database.
re-size and save it to my web directory.
I am using mysql to fetch rows each row has name, 'url to image', id , time, description. This 'url to image' is my problem.
I think Saving to MYSQL Database is good which make retrieving from it easier and maybe faster than others.
Please provide me any idea of coding where to start. I am Trying this image re-sizing for first time..
Thank You
Go with #3, don't store images in a database, and if you have much views and many images, doing it on the fly isn't very effective.
No, do it once, and save it to the filesystem, with a link in the database like you have now.
Also, if possible, do it as soon as a new image is uploaded.
I wouldn't personally save the image to the database, but that is more my personal choice.
I would probably opt for resizing them all and saving them out to the website, and returning the correct images than resizing on the fly. If you're always going to be returning the image in 50x50, why are they uploaded as 90x90 in the first place? Can't you resize them when you upload them?
Well :
On the fly : slow and incredibly ineficient, as you saw
Save on database : are you out of your mind, do NOT save images in DB
Save in web directory : that's my boy. Resize the image the first time it is accessed and cache it on your directory. Next time, you won't have to download it and resize, just serve it. Delete useless files every week or so.
I'm currently working on a portfolio site wherein I would have to load a large quantity of photos on the same page.
These images are loaded dynamically through PHP, and at the moment I have opted to save thumbnail versions of these images beforehand and load these.
My concern, however, is that this might not be an optimal solution should the site have a large number of users: I would basically have duplicates of each image multiplied by the number of images users have uploaded.
My question for you is whether or not there are better solutions to this problem? A way to load a page as fast as possible without compromising too much space?
Thanks a ton.
Loading a webpage full of lots of images will be slow. The reason for this is because of the bandwidth needed to transfer these images.
You have a couple of options
Load full images in tiled mode. These images will be full images, just resized to fit in a "thumbnail" view. The advantage of this is that you are only saving 1 image, but that image is full sized, and will take a long time to load.
Load the thumbnails as you said you are doing. The advantage to this is performance, but you need to store two copies of each image. Also, depending on how you tackle the thumbnail creation, you may require users to upload two copies of the image to provide their own thumbnail... which could stink.
Load thumbnails, but dynamically generate them on upload. You are essentially keeping two copies of the image on disk, but you are dynamically creating it through some php image modification API. This will load faster, but still eats up disk space. It also minimizes user/administrative requirements to provide a thumbnail.
Load thumbnails on-demand, as the page is requested. This approach would take some testing, as I've never tried it. Basically, you would invoke the php image modification API (or better yet out-source to a native solution!) to create a one-time-use (or cached) thumbnail to be used. You might say "OMG, that'll take so long!". I think this approach might actually be usable if you apply an appropriate caching mechanism so you aren't constantly recreating the same thumbnails. It will keep down on bandwidth, and since the limiting factor here is the network connection, it might be faster then just sending the full images (since the limiting factor of creating the thumbnails would now be CPU/Memory/Hard Disk).
I think #4 is an interesting concept, and might be worth exploring.
What i think is :
A. Take Advantage of Cache (System Cache , Cache In Headers , HTTP Cache .. all Cache )
B. Don't generate Thumb all the time
C. Use a Job Queing System such as Gearman or beanstalkd to generate thumbs so that you don't have to do it instantly
D. Use Imagick is more efficient
E. Paginate
F. Example only generate thumb when the original file has been modified
$file = "a.jpg" ;
$thumbFile = "a.thumb.jpg" ;
$createThumb = true;
if(is_file($thumbFile))
{
if((filemtime($file) - 10) < filemtime($thumbFile));
{
$createThumb = false;
}
}
if($createThumb === true)
{
$thumb = new Imagick();
$thumb->readImage($file);
$thumb->thumbnailImage(50, null);
$thumb->writeImage($thumbFile);
$thumb->destroy();
}
Consider using a sprite or a collage of all the images, so that only one larger image is loaded, saving bandwidth and decreasing page load time.
Also, as suggested already, pagination and and async loading can improve it some.
References:
http://css-tricks.com/css-sprites/
http://en.wikipedia.org/wiki/Sprite_(computer_graphics)#Sprites_by_CSS
Yes, caching the thumbnails is a good idea, and will work out fine when done right. This kind of thing is a great place for horizontal scaling.
You should look into using a
CDN. (Or
possibly implementing something similar.) The caching system will
generate images of commonly-requested sizes, and groom those off if
they become infrequently requested at a later time.
You could also scale horizontally and transplant this service to another server or
vserver in your network or cloud.
It is a disk-intensive and bandwidth-intensive thing, image delivery. Not as bad as video!
Generate thumbnail of large images on-the-fly. (Some hint)
Load images asynchronously (Try JAIL)
Paginate
Caching is also an option, works from the second time the site is loaded though.
I have site I am working on and the images take forever to load, they are coming from the server, and are being uploaded using php upload, the images being uploaded ar 1212x2564 or similar
here is the html img attribute I am using
<img src="upload/<?php echo $array['image'] ?>" width="500" />
My site is http://www.willruppelglass.com/
why is it taking forever for my images to load?
The images are enormous, and are being downloaded at their original resolution. Giving the image a specific width either as an HTML parameter or using CSS will only stretch/shrink the original image, it will not change the resolution or file size for you.
To speed up the loading, you should create thumbnail versions of your images, whose actual resolution is 500px.
If you let us know what OS you're using, we can recommend tools for creating the thumbnails.
Those images are huge, they need to be drastically reduced in size if you expect them to load in a reasonable amount of time.
You can use WebResizer to help you out with this for free or use your favorite graphics editing program.
if you a new to these thing sometimes it is worth using something like wordpress as this contains automatic image resizing. You can define the size of images you want to use in certain areas and wp will create an image of the correct site even if you upload the original full size image. Obviously this require some configuration but it might easier than trying to build an image resizer from scratch using php.
You need to use server-side image processing to scale them down to an acceptable size for the web.
http://www.zeronese.net/knowledge-base/articles/article-1060.html
Your images are way too big. I mean, they aren't just a little big, they are way too big. I never recommend anything bigger than 1600px max.