I want to load the EXIF thumbnail preview stored in a jpeg image located on a remote server, without having to download the whole image. The server does not support resuming.
Is this possible? In detail, can I assume that the thumbnail image data is alway before the full image data so that I only have to download a maximum of (e.g.) 100kb which I can parse for the thumbnail data?
I was asking the same question and found this Greasemonkey script which adds thumbnail images to an Apache auto index page.
https://userscripts.org/scripts/review/5390
For each JPEG image link it issues a range request for the jpeg / jfif header, parses the thumbnail offset and thumbnail length tag then issues a further range request for the thumbnail, creates a data uri and assigns it to a new img object.
Unfortunately it only works for certain JPEG file formats.
Related
I’m trying to reduce the size of photo thumbnails (100x75 px) generated with SixLabors ImageSharp, using the JpegEncoder. However the images don’t seem to vary in file size much, despite quality level used.
In my legacy System.Drawing code, when I used an ImageCodecInfo encoder and an EncoderParameter for Imaging.Encoder.Quality set to 30, I’d receive nice low-quality images — about 2k. Perfect for thumbnails.
With ImageSharp, no matter what I set the SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder.Quality to, the images are always about 24k. Quality can be set 0-100, and the visible quality goes down, but the file size doesn’t dip much — even when the jpegs are comically compressed. Always about 24k.
Can anyone explain why this is? Why does an image at .Quality 5 get written to about the same size as 90, despite dramatic visible compression? Are there other properties I need to set with this encoder? Should I be using a different format for better results?
image.Mutate(x => x.Resize(width, height));
SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder encoder = new SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder();
encoder.Quality = 30; //0-100. 30 was my System.Drawing code.
image.Save(thumbnailPath, encoder);
EDIT: My legacy code may have "extracted" the thumbnail image from the source image, via System.Drawing.GetThumbnailImage, then saved that. These thumbs may be very small to begin with. Sounds like this is different than scaling a new thumbnail from the source image? Legacy code:
Image theThumb = theImage.GetThumbnailImage(width, height, myCallback, IntPtr.Zero);
//set up parameter for compression quality
EncoderParameters encoderParameters = new EncoderParameters(1);
encoderParameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 30);
//codec to use
ImageCodecInfo encoder = ImageCodecInfo.GetImageEncoders()[1]; //"image/jpeg"
theThumb.Save(thumbnailPath, encoder, encoderParameters);
...Seems like the MS documentation is saying about the same -- extracted thumbnails are different than scaling the source image:
https://learn.microsoft.com/en-us/dotnet/api/system.drawing.image.getthumbnailimage?view=dotnet-plat-ext-6.0
If the Image contains an embedded thumbnail image, this method
retrieves the embedded thumbnail and scales it to the requested size.
If the Image does not contain an embedded thumbnail image, this method
creates a thumbnail image by scaling the main image.
(I'm new to .NET 6 tho, so not sure what "Platform extensions" are and if this will work in a .NET Core library. Looks like they may be part of the "Windows Compatibility Pack" NuGet package, but is for Windows-only deployments. Since I'm deploying on Mac this System.Drawing.GetThumbnailImage may not work -- thus working with ImageSharp.)
EDIT: The ImageSharp code is scaling a new image from the source, and it appears to retain EXIF data. My legacy code thumbs (extracted from the source) don't contain EXIF data. This may be the source of the bloat. Especially if there is a thumbnail in the EXIF data itself.
I'll try finding a method or library to scrub the EXIF prior to saving a new scaled thumbnail, and see if that is smaller.
Thanks!
It was the XMP metadata. Resizing source images down to thumbnails maintains their meta collections. You must remove it prior to saving. Alternatively, use the method to extract the actual thumbnail from the metadata rather than create it new.
Related question on the EXIF removal:
How do I clear an Image's EXIF data with ImageSharp?
Related question on extracting thumbnails:
How do I extract a jpeg's EXIF thumbnail using ImageSharp?
The png and jpg images of my Wordpress site are programatically converted into webp formats thanks to an extension (I've tried different, including WebP Converter for Media and WebP Express).
There are pages that display an image. I would like to add a button that enable users to download the image. I'm currently using the following code :
<a href="path/to/my/img.png" download="img">
<button type="button"> Download </button>
</a>
Nevertheless, upon hit, the image to be download corresponds to its webp version - not the png as encoded in the image path.
I would like to know :
Is it possible to force the server to serve the png image upon button click, either with a client side information (included in the image path, or in the ?) or with a server side condition (if page==X and request==Y, return png)?
(Worse but possible) Is it possible to prevent the server from converting png to webp, either by excluding some pages in a given extension, or by adding some php functions directly in the code ?
Otherwise, what other strategies have I missed to have webp images rendered but the ability to easily save as png?
Note: Chrome works as expected : png instead of webp image upon download, and, webp image upon save as on image directly. Firefox though download images as webp wether it is on the image or through the download button.
I haven't find a definitive general answer, but apparently, the WebP Express plugin skips URLs that contain a query string.
Therefore, if you ?original to the image URL in the link, you would "force" the serve not to encode your original png image into a webp format.
This just writes :
<a href="path/to/my/img.png?original" download="img">
<button type="button"> Download </button>
</a>
Note : I don't know whether this works with other plugins.
Metadata is information about an image, and can be included in JPEG image files.
EXIF metadata is information about the image recorded directly from the camera – for example, the exposure time and the date the photo was taken.
WordPress preserves EXIF information in full size images loaded to your website. It will also extract the Exif data to make it available for plugin developers.
When WordPress uploads images, in addition to uploading the Full Size image it automatically creates several differently sized versions of the image. By default: a Large, Medium and Thumbnail version.
The problem is that Wordpress is stripping the EXIF data when resizing images. The resized images become "orphan".
An "orphan" work is a work to which copyright cannot be determined or a work where the determined copyright holder cannot be contacted.
In the era of responsive images, it cannot be that the solution to keep the EXIF data of an image is to use the image in full-size.
Question:
How to force Wordpress to keep EXIF data?
Digging further:
Is there a way to insert the EXIF data in resized images once they have been resized?
Is there a way to force wordpress to use another Image Processing System that is not stripping metadata from images?
How to force Wordpress to keep EXIF data?
Switch the image processing to imagick. Your server must have it installed though.
Either by using the plugin that does that,
https://wordpress.org/plugins/mhm-forceimagemagick/
or by adding the code in your theme:
add_filter( 'wp_image_editors', array( $this, 'allowedEditors' ) );
public function allowedEditors()
{
return array('WP_Image_Editor_Imagick');
}
Is there a way to insert the EXIF data in resized images once they have been resized?
You would have to create your own functional that extend the class-wp-image-editor-imagick and include them in your functions file.
https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-image-editor-imagick.php
Is there a way to force wordpress to use another Image Processing System that is not stripping metadata from images?
Answered above.
I using plugins and trying find it in source code WordPress, but i can only change quality for thumbnails. I need 30-40% quality jpeg images instead 90% (default)
go to media upload. You can change size of image you upload.
I want to genrate a thumbnails of image without save its differentlty
ImageResizer supports resizing images and it can output the thumbnail to a stream (for example a MemoryStream), so you don't have to save the image on disk. It has a very good support for ASP.NET and it can be installed using NuGet.