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.
Related
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page?
For example, i currently have a large image (1200x 1200) which i need to be fitted to 100x100. Would this be possible via jQuery or would it have to be done manually?
Thanks.
You would have to change your image sizes on the server and then change the page HTML or javascript to reference those smaller images. jQuery runs in the browser so, it can't take a 1200x1200 image on the server and somehow make it 100x100 before it gets downloaded.
But, changing the images to the smaller size on the server WILL drastically improve your page load time.
Yes it certainly will increase your page load speed.
And, resizing the image on the server is a better option.
reference:
Should I generate each thumbnail dynamically every time it is requested, or store them on image upload?
To resize images server-side, you can use WideImage library.
With an instruction like this :
WideImage::load($path)
->resize(100, 100)
->output("jpg");
You load your image, resize it in memory and return its data in the desired format.
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page? Would this be possible via jQuery
No. This would require that the browser download the large image over the network and then process it to reduce it in size.
If you want to speed things up, you need to make the images smaller before they leave the server.
You don't need to do this manually though. Image resizing can be done programatically.
I have a products website where in I have around 100 images of high quality. Each image is around 6-7MB in size.
In my database I have stored the path of all the images along with their names. The images are saved in a folder /images/product_name/, But when I go to display these images in a web page, the page takes forever to load. All I do is send the id to the table, get the image paths and display it in the products page.
It would be very helpful if I could get any sort of advice on how to optimize the process.
The images you send to the client are most likely way too big. 7MB of size sounds very large for a product picture so 100*7MB = 700MB of data transfered if you display all the product images.
If you only need small images, scale them down to some KB's (thumbnails) and use those to display in your table.
NOTE: you can just preprend a prefix like "tmb_" or "tmb_200x200_" to the original filename, and you won't have to touch the paths in the database.
From reading your comments I think you are looking for some automated process to optimize the files and serve them at a more decent filesize.
You should take a look at imageMagick or the GD library which allows you to resize images (among many other things - http://php.net/manual/en/book.imagick.php) and optimize them. This can be combined with something like the YUI Image cropper to allow you to choose certain parts of the image to show in the thumbnail.
This is best done at the point of upload so the Server doesn't unnecessarily regenerate the images each time they are requested, and stored under a thumbnail column in the database.
If you must show bigger images I suggest you use a lightbox (see an example here - http://leandrovieira.com/projects/jquery/lightbox/) or similar technique that only loads the larger image when the client requests it.
Use http://luci.criosweb.ro/riot/ to compress images.
It is one of the simple and free tools recommended by Google to compress images.
Also as it was mentioned before make sure the thumbs you send to the listing pages are around 100px and only if the user clicks to zoom in show him the large ones one by one, and still even in the zoom option you should only display a 1000px size image max and that should not have more then 200-500k depending on format and quality.
Do you have optimized your images (in term of file size) ? Like on Smush.it for example http://www.smushit.com/ysmush.it/
You should really optimize your images. You can use a commercial product like Photoshop or use a free one like the GIMP to optimize the files.
Loading about 700 MBs of images will take exactly 1 day for me!!
reduce the size of the images to a thumbnail and when the user clicks on the thumbnail then load the original file. This can increase the performance.
I currently have a website that aggregates images, the problem is those images are very large, and when I display them at smaller sizes, they still eat up a lot of computation.
I'm curious as to how to actually force reduced size/quality without just smooshing it into a <div> element.
Here is my site in question, you can see how 'laggy' it gets when you produce images:
http://newgameplus.nikuai.net/TEST/index.html
I was using timthumb.php to resize the images, but the host doesn't allow that script for some reason.
The best way to do this is to use some sort of image re-factoring service.
I have written my own one that uses ffmpeg and imagemagik to resize images on the fly and to generate arbitrarily sized thumbnails from videos. I memcache the results to make subsequent requests super snappy, and have some interesting additions such as automatic Point of Interest detection using Face Detection and Image Entropy, with the aim being "nice thumbnails, no matter the size"
An example of such a service is src.sencha.io - the documentation for this service is here but I have included the important bits below.
Specify Image Size
<img src='http://src.sencha.io/320/200/http://yourdomain.com/path/to/image.jpg'
alt='My constrained image'
width='320'
height='200' />
This will take your image (http://yourdomain.com/path/to/image.jpg) and run in through the resizing service, returning a 320x200 version of your image. You cannot set the gravity/point-of-interest using this service though (as far as I can tell).
You can also use this service to change formats, resize dataurls, do percentage resizes and use the resizing service to detect the width/height of the user agent requesting the image.
There are many such services available on the web.
I agree with slash: It depends on how the images are being resized. One thing I do for a site is use photoshop (or GIMP) to resize the image to the exact dimensions i need for the page i'm using the image for. Then i also include the same dimensions in the width-height attributes on the image itself.
Additionally, you can use your photo editing software to check the size of your image if you were to save it with a different file extension, and (specifically with jpeg and png files) photoshop will let you reduce the quality, which lowers file size and speeds up page loading.
I am working on a site at the moment, that requires the admins of the site to be able to upload pretty much any size of image, I then need to find a way to get the image down to the size required for the front end of the end the site, all this needs to be done without know what size of image the user is uploading, but the image always needs to scale to 209x293 without looking awful.
Is this even possible?
You should argue with your client, to forget that rule(accept ANY image), and accept rather, only images in that proportion, or better, you can use a tool to crop the image, forcing the user to crop an image in your needed resolution.
Jcrop is a library in Jquery which can help you a lot if you want to create that cropping feature.
Don't know your precise requirements, but since you tagged it with CodeIgniter, you can check out the Image Manipulation Class which has everything you need to do the job.
Not knowing the size of images before uploading is, you know, quite a common problem...Just be careful of the MAX SIZE, which is set in your php.ini.
You might find useful also the page on file uploading right in php's manual.
I am writing an PHP script to upload image files to the server and I have a few questions?
Is there a way to decrease the size of images in terms of kilobytes?
When I am using those files what is the best practice to embed those images into page? I mean do I always have to download the whole page?
Lastly, When resizing the pages(like 250X250 pixels) what is the pratice in order not to face the resolution problems?
I hope my questions are not too general. Thanks in advance!
Take a look at this http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/ - There are many other free tools out there to convert images after the upload. The resolution shouldn't be an issue that is usually a problem when you give a size to an image object in html that is huge and not proportioned.
Here is another php resizer I have used this code before to do what you are requesting.
Is there a way to decrease the size of
images in terms of kilobytes?
You'll need to create a new image, based on the one you received.
You should first take a look at the PHP GD functions.
For instance: http://ch2.php.net/manual/en/function.imagecreatefromjpeg.php
When I am using those files what is
the best practice to embed those
images into page? I mean do I always
have to download the whole page?
What do you mean by embedding?
If you are talking about decreasing the size of the image before is uploaded, you can't with PHP, unless you use something like HTML5/Flash to pre-process the file before being sent.
What you want to do, after a user uploads that image, verify that the file is a real image, then using some library (if you use a framework, it probably has a way to resize images) resize the image to whatever max width or max height or max width and height you are wanting.
This will decrease the size of an image.
For the 2nd question, if I understand it, you are talking about what about when a user uploads a 500x500 and you want it to be 400x250, then you must scale and crop, this way the image is never stretched but a few pixels from the top or the bottom will probably be removed.