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.
Related
Google Page Speed Insights suggests me to optimize webpage images on a webpage I'm currently working on. Images are uploaded from a server. I want to display optimized images on the page but don't want the original image on the server to change. Is there any way to do this in PHP?
You should reduce image size while uploading. Try this code.
reduce image size while uploading using the following PHP code used to upload image
If you don't want the original image to change then you'll find any optimisations you perform to bring the file size down / serve a move appropriately sized image will be redundant due to the overhead of "optimising" the image on the fly. (Unless your original image is just that big)
As I see it, you have 3 options:
Unless it has a massive impact (or you can envisage it will have a massive impact) just ignore Google Page Speeds for now.
You can use lossless compression which will reduce the file size without reducing the quality of the image. This is something you can do on your server with various different apps (just google what type of server you have followed by lossless image compression)
Just create a copy of the original image upon upload (or whenever) and serve that image to your users. The benefits to this are you can have different sized images which can be rendered for different devices, e.g. small image for mobile, and again you can use lossless compression on all of them. The downside to this is you'll obviously be using more server space.
Hope this helps!
people! Please suggest me what is the best practice to store and retrieve images with my php application. My app uses different sizes of uploaded images (thumb, small, middle, big e.t.c). My current script creates all of the sizes after success image upload and stores 5 different version of every image. As the result, I'm running out of hosting storage space very fast.
So I want to ask: maybe better way to store only one original file and generate smaller sizes on the fly with php when image retrieves (maybe using some sort of cache)? Or which is the best practice by your opinion?
You can store 1 max size version of the image on the server and then use something like TimThumb to resize on load.
This question already has answers here:
PHP image resize on the fly vs storing resized images
(4 answers)
Closed 9 years ago.
Problem - I wanted to set up an image-uploading feature in my website. But I wanted to show both- the original image and a small thumbnail of the image.
Choices - Which way is better - to create a separate image (thumbnail) in a directory when the image is uploaded or to show a smaller version by reducing its height and width in the fixed ratio every time the image is requested?
How I am doing it currently - The later one sounds better to me because it won't be taking much size on the disk but it has to resize the image again and again. Which one do you think is better?
This is a general question for web application, no language in specific.
Any idea how facebook or google do it?
Question - My question is how to generate thumbnails and show them on a website - by creating a copy of the original image with smaller dimension or by generating the thumbnail dynamically every time it is requested.
Creating the thumbnail on upload is almost always the better option. If storage is a concern you could convert them on the request and then cache the result in a memory store. If its requested again before the cache expires, no conversion will be needed.
Storage is often pretty cheap, so I would probably not go for that extra complexity.
Just create a thumbnail version and save to disk. Hard disk space is very cheap. £70 for a couple of TB.
"Better" depends on the criteria you set.
For most applications, disk space is not an issue - and if storing a thumbnail is a problem, storing the original must be a huge concern - a decent digital camera photo will run to many megabytes, whereas the thumbnail should not exceed 50K.
Bandwidth and performance (as perceived by the client) are usually bigger concerns. If you have lots of people browsing a gallery of image thumbnails, serving 50Kb thumbnails will be significantly faster (and cheaper in bandwidth) than serving multi-megabyte high resolution images.
In addition, by serving thumbnails on a URL like <img src="images/thumbnail/foobar.jpg"> and setting appropriate cache headers, you should get a lot of downstream caching - this is less likely if you serve the image as <img src="thumbnail.php?image=image/foobar.jpg> because caches treat querystrings rather conservatively.
I used to work on a web site that managed hundreds of thousands of product images; we set up ImageMagick to create thumbnails automatically. Depending on your setup, it may make sense to do this when the thumbnail is first requested, rather than when the file is uploaded, because the conversion can be fairly resource hungry, and doing it at upload time would take longer than we wanted to wait. Modern hardware may make that a non-issue.
There's also a question about keeping the thumbnails in sync with the originals - if the user uploads a new image, you have to ensure you get the thumbnail updated; if the original is deleted, you must also delete the thumbnail.
Creating a thumbnail is a better option and it doesn't cost much disk space. Your client will also load smaller size when opening your pages. converting the image upon request will cost event more time to load your page ;)
If you take a look at most CMS with this built in functionality they nearly always create a thumbnail image of the image on upload and store it on the server.
This goes back to the age old saying of "do what google does" but with CMS.
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.
Coming from Rails background, I used to work with paperclip plugin, which was creating from images attachments thumbs with predefined sizes.
In wordpress, I am little confused. Here is my question or points that need more clarification:
Does timthumb creates thumbs and saves it to disk upon uploading images for the first time? or It just resizes images on the fly and caches them?
If it resizes on the fly, why I see different sizes of each image in uploads directory, such as filename.jpg filename-150x150.jpg and so on?
Isn't better for performance to just create the thumbs once upon uploading and serving them directly without calling a script? and if so, how to implement this?
Typically it resizes and caches the images upon their first request.
You're probably seeing the image resizing that WP does. These are controlled in the settings
Debatable. Yes in that it could all be done at your command, no in that someone could upload 1000 images and resizing them all at once could cause problems with the site. Thus spreading out the resizing could result in balancing the load demands. Also, parameters can be passed via the script when a page loads that creates a custom thumbnail. So if you decide your thumbnails were 10px too narrow, you can run it again and it will resize from the original. Plus the filename of the base image remains untouched - if your code says image.jpg, it will always be image.jpg, not matter the size. So if you've got 10,000 instances of thumbnails, and they all reference image-150x150 and now you want them to be 160x160, you either have to change the image names being referenced, or have a nonsensical filename. TimThumb provides a pretty good workaround for that.
Here's some basic timthumb/wordpess performance tips http://www.dollarshower.com/timthumb-and-wordpress-blog-performance/