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.
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 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.
I've read many articles and discussions in forums and I still cann't figure out the difference between resizing a large image with php(not with html) and creating thumbnails. Except for the fact that the most people suggest phpthumb and imageMagick for thumbnails I don't understand why I should or not prefer to use these and not php functions like imagecreatefromgif(png,jpeg) and imagecopyresampled which can do this job(according to what I read.). What I'm trying to do is to create many galleries, so I want the images the user uploads to be resized in a smaller size if they are too large. Moreover, I need these images to be resized in smaller pictures that will be shown to gallery and when the user clicks on them they get their real size. So far, the user can upload an image that will be saved in a folder. I resize my images for galleries with html(which I know it's wrong) and I use fancybox for clicking and enlarging part with which I am satisfied. Please help understand the difference and give me the your advice what is the best thing to do. Thanks
Take this scenario.
I'm a highly equiped professional photographer and your photo application will store every image I take. I shoot in RAW so my images are massive. I also want to upload the original hi res JPEGs.
Now if you do not resize these images to thumbnails (by whatever mechanism you choose), if I try and view a particular album, I might have to load a 10x 20Mb images, only to have them resized down to 80x60pixels (and become totally crackling/noisy and extremely pixelated).
So what can you do?
Resize the images on your server, using something like ImageMagick as you suggest to generate multiple versions of this image.
This way you can deliver optimzed qualities for every occassion.
You should always intend to display an image in it's native resolution/dimension to avoid rastering or resizing noise.
And also, you want to save the different versions of the images.
imagecreatefromgif() will use the GD library by default.
Some reasons why one might prefer ImageMagick are detailed here and here.
That said, if you're happy with what you've got already and if there's no realistic chance of running into any GD dealbreakers later on, you certainly may reasonably decide to stay with what you have.
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.