I've set on imagecache a fixed scale for my images (230 x 150).
Upscaling option is unchecked.
Successively, I've uploaded new images (original size 230 x 150) but for some reason they are resized: 80 x 52
Instead, if I check the "Allow upscaling" option, the size is correct, but the quality is very bad.
So basically, it behaves like if my images are very small, but my original images have the correct size.
thanks
The effect of the 'allow upscaling' option hints on the problem not being caused by imagecache itself, but rather that some other setting/module is downscaling the images already before imagecache is doing its thing. You could try to verify this by checking the image sizes of the originally uploaded images (usually in 'files/images' or somewhere else outside of 'files/imagecache').
What mechanism/module do you use to upload the images? (There might be a scaling setting somewhere in that context.)
Related
I have an image upload function on my application that is using firebase as a backend. I've enabled the Resize Images extension, but the quality was too low on jpeg and webp files. In order to counteract this I added some Sharp Output Options as follows:
{"jpeg": {"quality": 100}, "webp": {"quality": 100, "lossless": true}}
There's no real information out there about what the potential values are for these fields.
You can see their suggested formatting for the Sharp Output Options here:
That's all the info I can find.
However, the image quality did not change after this config. Both before and after setting this configuration the image sizes were identical.
How can I properly set this configuration and increase the quality of the compressed images?
My solution was to increase the pixel size of the images. Instead of targeting 400x400, I chose 800x800. The file size was slightly larger, but only about an extra 7kb for an image that was originally 1.3mb. After firebase's compression, my 800x800 image was around 22kb, but with much better resolution than the 15kb 400x400 image I was trying at first.
I have the same problem.
When I tried to convert .jpg to .jpeg and set the option to {"quality": 5}, a clear deterioration was confirmed.
And the following three had the same degree of deterioration.
No options
{"Quality": 100}
No conversion
It seems that sharp in the extension has already been resized for minimal degradation.
Looking at the source file, sharp's outputOptions were only applied during the conversion.
I thought the cause was elsewhere and decided to finish my investigation into this extension.
However, I'm worried about rotate, which seems to be meaningless ...
SourceFile
https://github.com/firebase/extensions/blob/8efd4e18afdb62218e1422deee1d60c89df9ebb9/storage-resize-images/functions/src/resize-image.ts#L19
Sharp
https://sharp.pixelplumbing.com/api-output#jpeg
Having some issues on my Wordpress installation.
I'm noticing that on some monitors faint/semi-opaque boxes are appearing in my JPG images.
I didn't notice this until I was viewing my website on a friend's computer.
They aren't appearing on the original images, just when they are uploaded to my server and WP displays them.
I am about to add a filter changing the jpeg compression quality to 100%, rather than 90%, but before I go and re-upload all of my images, have any of you guys experienced this?
Thanks!
Do you mean a box like a border around the image, or an overlay on top of the image? Also is it appearing only on the webpage, or also when you look at the images on the server?
It sounds like a response sensitivity problem in the monitors. Is it any particular brand of monitor?
Other things could contribute to the problem.
Your images may subsample the Cb and Cr components and your JPEG decoder may not be evening out the subsampled components. get a JPEG dumping program and see if the sampling rates are higher for Y than Cb and Cr.
You image may be over-quantized (quality).
I have a lot of images with a resolution around 500x1500 and I want to show all those images in a grid on my website. Each picture in the grid should be 200x200px.
If I scale down the images with CSS from 500x1500px to 200x200px and I show 10 200x200px images on my website, does this mean that the visitor first have to download the 500x1500px images and then their browser scales the pictures down?
If that is the case, then it's a bad solution to do it like this, right? Instead I should have two versions of each picture, one 500x1500px version and one 200x200px version. Am I right?
The question then is what's the easiest way to scale down hundreds of images?
Yes, I think it is the case that the browser will download the larger image and then scale it. You can check for yourself by opening the dev tools on the browser (press F12 if you're using Chrome) and monitoring the network traffic when you reload your site.
The easiest way to scale down hundreds of images is find or write a program to do it.
You are right. You can set height and width of the images but 1) the user will have to download a bigger image than necessary and 2) the height x width ratio will be trouble (the big one is 1x3 and the small one is 1x1). I would either use http://www.imagemagick.org/ , gimp or a similar tool to crop the images, but the problem is that the cropped area might not be very good. Only a human can select a good fit for the cropped area :-(
Edit1: Perhaps a well-trained neural network could select the most "interesting" part of every image programatically but that's kind of a lot of trouble to do that. Still it could be pretty interesting :-)
I'm trying to add images to a banner that was included with the WordPress template I'm using, but it's cropping the images instead of scaling them properly.
I noticed that the height of the banner was too small, but I can't seem to be able to change it in the CSS code.
This is the page where I'm trying to sort out the banner - Money Matters Home, and this is the original image that I uploaded - home-banner-1.png
As you can see, it's being cropped from the original, despite the fact that I've tried to change the height of the banner. The original image dimensions are 900 x 278, and it should scale naturally to 1152 x 355, but isn't.
Does anyone know how to sort this out? I feel like I'm missing something really obvious here!
You could just re-size the image in Photoshop or Gimp to the exact dimensions of the WordPress header.
Use your browsers developer inspect tool to figure out the exact dimensions.
Change dimensions of your image first to 870x230 (as i see the dimensions of current banner) - you can do it in Photoshop or even Paint.
Then when you upload image in Wordpress via Uploader, Upload the Image file and Select "Original" option in Size of image before saving rather than small/medium/large etc
Your current image banner file is: http://bojomedia.co.uk/preview/moneymatters/wp-content/uploads/2013/08/home-banner-1-temp-870x230.png
note 870x230 at the end of that file name - This is wordpress generated cropped version of original file that's being used there.
I hope this helps.
I am having trouble with the banners on this Drupal Site (www.ciob.org.uk) The static banners are somewhat pixelated when viewed in the front end. In the back end they are listed and shown as they would appear. These seem fine and have no pixelation.
I also have an issue where the banner is 700x230 on the image info yet when I have uploaded an image it cuts 30 pixels off the right side.
Any help on either of these issues would help.
Thanks
You use Imagecache to process your images. ImageCache will resize all images to the dimensions that are configured in his preset. For your case, 700*230
This is your image proccessed with imagecache : http://www.ciob.org.uk/sites/ciob.org.uk/files/imagecache/700x230sc/images/Skills%20Survey%202011%20Banner_1.jpg
This is the image you uploaded : http://www.ciob.org.uk/sites/ciob.org.uk/files/images/Skills%20Survey%202011%20Banner_1.jpg
Th original image is 680*230 pixel, and imagecache will upscale it to 700 pixel wide, that's also why you loose some content on the right.
You can either :
Use an Original image with correct
dimension (700*230)
Don't allow
imagecache to upscale images (there
is an option for that), but you will
probably some blank area in the
banner, on the front page.