In my web application, I need to resize pictures to avoid loading really big files when I'm only displaying avatars or previews.
I'm using imagemagick to do the resize, but the result is always blurry. I tried a lot of command options (scale/resize/thumbnail, adding filters, changing color spaces, changing quality/density/sharpness, ...) but I never had a good result.
But when I try to display the big file in the browser and let the browser do the resize, the picture is displayed correctly, without any blur.
Here is a little test I did :
I downloaded this picture https://www.normandie-tourisme.fr/wp-content/uploads/2020/01/8118-Mont-Saint-Michel-couleur-dautomne-%C2%A9-DaLiu-Shutterstock.com-%C2%A9-DaLiu-Shutterstock.com_.jpg, renamed it st_michel.jpg and created a resized version with convert st_michel.jpg -resize 200x resize_st_michel.jpg
After that, I created a html file to display both:
<!DOCTYPE html>
<html>
<body>
<div style="display: flex">
<img src="st_michel.jpg" width=200>
<img src="resize_st_michel.jpg" width=200>
</div>
</body>
</html>
And here's the result :
As we can see, the right version (the version resized by imagemagick) is way more blurry than the browser-resized version (and I have the same results with any picture uploaded by the users of my web app).
So my question is : Can I have a picture with the same quality than the one resized by the browser using imagemagick ?
Downscaling always blurs things a bit, so you can recover some by sharpening, but text doesn't like it much.
A middle-of-the-road solution is to scale down to 400px which already produces a much smaller file, and leave the final scaling to the browser:
(left to right: full size (280K), 400px (32K), 200px+sharpen (16K)).
This will also let you have something bigger to display on high-definition displays where 200px may be a bit small.
Edit: trying to dig the matter a bit more I tried to grab your picture again but your site seems down, so I tried with a picture of mine and surprisingly the blurriness doesn't happen, I would even say that the pre-downscaled image is better than the one produced by Firefox from the full-size image (see artifacts along wing edges, and at the wing/fuselage junction):
In all rows, left it the original image (1200x800) resized to 200px, and right is an image obtained by:
convert $image.jpg -filter $f -resize 200x -quality 80 $image-200-$f-Q80.jpg
No filter (Plain) is normally the same as Lanczos. Some blurring with quadratic and cubic is expected.
BTW another reason to not downsize too much is that if someone zooms in on the page the image is rescaled from the larger size (so still scaled down) while if you transfer an image at the exact size for 100% display, zooming in will scale it up and make it blurry.
Edit2: Eventually retrieved the image. I don't see much difference between IM scale and FF scale at 200px with moderate sharpening applied (-sharpen 0x1.0):
However if you look closely (zooming on a screenshot here, so FF isn't rescaling things), the Firefox rescaling creates some weird artifacts:
Edit3: I took the liberty to pay a visit to your site and the blurriness of the thumbnails may have nothing to do with IM. It seems that your thumbnails are resized to something slightly bigger:
Top left is a screenshot of the thumbnail as shown in the page, which appears to be bigger than intended (224x153)
Top right and bottom are the actual image shown in Firefox, at its native size (220x150).
This kind of pernicious minute rescale always creates a lot of blur.
Saving as a png is a bit better and I wonder if it is due to jpg compression. The browser is just resizing the image but Imagemagick is resizing it and saving so introducing some compression?
I also added a bit of sharpening:
magick "E:\Pictures\8118-Mont-Saint-Michel-couleur-dautomne-©-DaLiu-Shutterstock.com-©-DaLiu-Shutterstock.com_.jpg" -resize 200x -unsharp 1.5x1+0.7+0.02 "E:\Pictures\resize_st_michel.png"
I always use png resized images on my website.
Related
One of the recommendations I get when I audit my website using https://web.dev/measure, is "Serves images in low resolution".
As you can see from the screenshot below, my displayed image size matches the actual size. I don't know what's wrong here and what's the expected size.
If I made the images larger, I get an opposite error saying that my images are not properly sized and should reduce the size.
All these images have an explicit height of 48px and width: auto; to make it responsive.
Any suggestions to fix this issue?
Thanks in advance.
This error is stating that web.dev would have expected you to serve a 96x96 pixel image instead of the 48x48 pixel image. Given that this expected size is 2x the served size, my guess is that web.dev is expecting a scaled up version of the image for a device with a Device Pixel Ratio (DPR) of 2. web.dev performs a series of checks for responsive images (checking for both DPR 1 and DPR 2 devices), so serving only one size will always lead to this error of either images too large or images too small.
Using srcset in your image tag can resolve this. If you follow the example in the Mozilla docs for providing options for 1x and 2x DPR screens, you should see this error get resolved.
<img src="<48px image source>"
srcset="<48px image source> 1x, <96px image source> 2x" />
The whole thing only happens if the image is at the beginning of the page (visible area without scrolling) - if the image is included later (so that you have to scroll) the "error message" does not appear
I want to make sure that all the images that users upload to my website are the same size.
The size that I want to achieve is 620px x 405px
Because I don't want any white space in my images, and I want to keep the aspect ratio, I'm guessing I'll need to crop first, before I resize?
So far I've got the following code:
photo.Resize(width: 620, height:405, preserveAspectRatio: false, preventEnlarge: true);
But obviously this isn't giving me the desired affect.
I have seen other articles online where they do some formula, but I can't get any to work for me.
Suppose someone uploads an image which is 1020 wide by 405? Which bit do you want to keep? The left hand end? Right hand end? The middle bit? Then the next image is 3000 x 3000. Now which bit do you want to crop? Perhaps this one needs resizing before cropping otherwise you might only get a window.
My recommendation is to allow the user to specify the crop area, and then you resize the resulting cropped image. There are a number of jQuery plugins that enable client side cropping. I've written about jCrop (http://www.mikesdotnetting.com/Article/161/WebMatrix-Testing-the-WebImage-Helper-With-JCrop) but I have also received some feedback that it is not reliable in some versions of IE (although I haven't tested that myself).
Everything seems pretty standard I downloaded PDF GENERATION SAMPLE and used my own assets at normal resolutions and my images look a little off.
Here's the asset
Here's what it looks like in app
And this is what it looks like in the PDF at 100% zoom
The code in the drawImage function is as simple as it gets
UIImage * demoImage = [UIImage imageNamed:#"icon_map_project.png"];
[demoImage drawInRect:CGRectMake( (pageSize.width - demoImage.size.width)/2,
350,
demoImage.size.width,
demoImage.size.height)];
Nothing fancy at all. I do admit that my familiarity with the details of how PDF work, DPI, and things like that are beyond me at this point.
I've looked at LibHaru and think it's a great system but I'd rather keep this within the confines of UIKit/CoreGraphics.
You'll notice a strange jaggedness on the right side, even shrinking the image down by 50% doesn't seem to help.
Here's a zoomed up image using Digital Color Meter with the PDF at 100% and then the app
As you can see the image simply does not render correctly into the PDF and I'm struggling to find a solution for this.
Thanks for any advice.
You draw the image in the PDF in a rectangle that matches the image size. This results in a 72dpi for the image. Because the viewer application use 96dpi or a higher value as reference for 100% zoom, when the file is displayed at 100% your image will be rendered 100% * 96/72 scale. If you enlarge the bitmap at that scale with an imaging tool you'll see a similar jaggedness. The solution is to use a larger image drawn in a 37x36pt rectangle so that the resulting image dpi is higher.
If you zoom your PDF file to 75% the image size displayed on the page should match the image size in your application (this assumption is based on a 96 dpi screen).
I have about 60 images uploaded to my site. I'd like to resize them all so they fit in a 150px × 100px box. No cropping, just scaling, but it should preserve the original proportions.
I'd prefer a simple solution using, say the ImageMagick convert command. A solution for a single arbitrary image is perfectly fine. (I know how to loop or use find in bash.)
The images are of different types (eps, jpg, ps etc) so a solution that at the same time rasterizes the image would be awesome.
Ok, it seems it was easier than I expected:
convert image.eps -scale "150x100>" file_resized.jpg
did the trick. Reference page.
I would like to resize (downscale) some images the way that Facebook does it. ImageMagick, but hey, I'm open for suggestions :)
I believe Facebook is doing this:
Say you have a max width x height of 250x200, Facebook is optimizing the use of this. Tries to use as much of the 250x200 as possible. If for instance you scale down an image and get 220x200, then they cut from the top and the bottom of the image until they use as much as possible of the 250x200 frame. Actually I think they take more from the bottom, than the top (around 1:2.5), which I believe is because most pictures have the head at the top and Facebook realizes this.
Is there any name for this kind of resizing algorithm? And is there any way to have ImageMagick do this?
Thanks in advance!
Edit
It actually appears that Facebook might not be doing this "smart" resizing technique after all. They just resize where they have a minwidth/minheight. Then when they show the image in their album, they cut from the top/bottom or left/right to use as much as possible for the frame (that is how I perceive it at least).
-Tobias
You can use ImageMagick to get the dimensions of an image, scale then crop it. As to whether you are accurately describing the algorithm Facebook uses, I don't know.
I think the following link addresses the problem you're trying to tackle:
http://www.imagemagick.org/Usage/resize/#space_fill
The example they give at the very end is...
convert logo: \
-resize 160x -resize 'x160<' -resize 50% \
-gravity center -crop 80x80+0+0 +repage space_fill_2.jpg
That command resizes an image to be 160 pixels wide, resizes it to be 160 pixels tall, takes the larger of the two resized images and shrinks it by half, and crop it to 80x80.
The following may be of interest to you:
http://www.google.com/search?q=image+entroy+cropping
I've read several documents about using image entropy to choose what part of the image to crop.
Another related link -
Django, sorl-thumbnail crop picture head
edits: added related links, specified an example command for doing a similar task with link to source of example.