I have an image gallery with pretty large images (around 1200/800) I want to create thumbnail (150/300px) navigation to these large images displayed near full size on the page.
My question, should I create 150/300px thumbnails or should I use the original images resized to 150/300px. Knowing the large images are already displayed and are to be downloaded by the client.
Definitely create thumbnails. Even reducing an 800x800 down to 300x300 will take the file size down by a factor of 7. You can use more agressive JPEG compression on the thumbnails to get even more savings. If you load all the full size images on the navigation page you're going to be waiting a while to see the page come up, even if you end up needing all the same images later.
Related
When uploading an image in Prestashop, my image is resized accordingly to settings. Can I remove the resize treatment and use native uploaded images in my website?
Images are resized in different size needed for different uses in Prestashop, so disabled fully this feature is not an good idea.
but to get the original image, you need to change path image in your file.tpl
https://example.com/img/p/{$id_product}/{$name_product}.jpg
I've noticed that many website change all their user-uploaded images to .jpg or .png format.
I am wondering what are the pros and cons of converting images to the same format.
Possible points of consideration are:
Security (I heard it is possible to put malicious code in images of certain filetypes)
Storage
Image quality
Scalability
Typically, after a user uploads a photo to a web application, some processing will be done to the image. For example, if a user uploads an avatar image, it will be cropped so that it is square, and resized so that all avatar images are the same size. Sometimes, we may want multiple resolutions of the same image for different display purposes (avatar icon vs. profile page). ImageMagick is often the tool of choice for performing image processing on the server.
On our Drupal 7 website with thousands of images, JPEG quality in GD toolkit was set at 100%.
This caused well-optimized images to be 150-200% larger if 'image styles' were used instead of 'original images'. But we need to use styles to keep images ratio consistent. CSS 'object-fit' is not an option for cross-browser reasons.
What will happen to the quality of existing images if we reduce quality to 60%?
Update: As far as I tested it should not have any effect on the existing images
(New) image style image (thumbnail) is generated if old one is not found. There is no point of re-generating thumbnails every time they are displayed since it would required too much server/resources.
If you want some thumbnail regenerated it should be enough to just delete thumbnail file. Next time it's called it will be generated again.
There is also a module for that: https://www.drupal.org/project/imagestyleflush
Check on this thread to see other options:
https://drupal.stackexchange.com/questions/12864/rebuild-images-from-image-style
I'm wondering if anyone knows a good strategy for solving this problem:
I'm creating a social networking site using Laravel 4. Users can upload pictures to their own gallery. These pictures can be any shape and size but the gallery on their profile will only display a cropped and resized thumbnail of the image (200px x 200px), which you can click on to view the full image.
Im using the Laravel plugin Intervention right now, which saves the original image, then resizes and crops that image and saves it again ( so now I have 2 copies). I then display the cropped/resized image as the thumbnail that links to the full size original image. However, I find that making copies of every image will be a tedious waste of space on my server since there could be thousands of images uploaded to the site.
Is there a way to grab the original image, resize and crop it on the fly and display it only when the user loads the page without having to save the thumbnail to the server? or am I stuck with having to make a cropped copy for every image?
A great example that shows what I'm looking to achieve is the way Facebook crops pictures into squares in a users picture gallery or how they are cropped and resized on the newsfeed when a user uploads multiple images to a status.
Any advice is greatly appreciated!
Have you seen League/Glide yet? It's basically a wrapper for Intervention/Image and Intervention/ImageCache. Glide's Laravel setup video gets you set up in two minutes (pay attention to the second example).
Yes Intervention let's you manipulate and display on the fly too.
Here's a simple example (obviously you would actually do it with a controller etc)
Route::get('img/profile/picture.jpg', function(){
$img = Image::make('path/to/profile/picture.jpg');
// resize, crop, whatever
return $img->response();
});
And then you just set the right URI to this route as src of your image.
Intervention Docs
Keep in mind that this will use more server resources and make the image response take longer
I have created website where users can upload image with any size.
I have served images with get_serving_url function.
I have added to end of image modifiers to resize image to 200px size.
http://127.0.0.1:8080/_ah/img/dtrh0i6I_V5JGulg2_LKZw===s200
I have uploaded image 1000x800 - and all right - I have image with size 200x160
If I have uploaded image 100x50 - in result I have resized image with size 200x100. But this is not a good. I need to show original small image, if image size lower that 200px.
How to do this on Google App Engine + Python with get_serving_url?
What you need can't be done automatically using get_serving_url.
I think the easiest way to implement that would be saving the image along with a needs_resize property and calling get_serving_url without size parameter if that is not the case (which serves the original image).