I have a web page that has to load a bunch of small PNG images. Number of iamges and which images need to be embedded is dynamic and depends on parameters. Each image is approx 20 kb.
Is there an option to embed images in html to reduce number of http requests?
You can do that via : http://en.wikipedia.org/wiki/Data_URI_scheme
This works on all browsers except IE. To support IE, you would need to use a JavaScript URI that returns a base 64 PNG Data.
If your images are icons or the like, you can try the "sprite" method to reduce the number of HTTP request. Put all images in a single image, and use CSS to display only the needed part of the main image
Related
I'm trying out Cloudinary to get optimized images, and as a placeholder I want a blurred image. If the image is in my root media folder, this is no problem, see for instance this url:
https://res.cloudinary.com/dvghwblv8/image/upload/e_blur:2000,f_webp/sample.jpg
However, if I want to apply an effect to an image in one of my folders, I get a 404:
https://res.cloudinary.com/dvghwblv8/image/upload/q_auto,f_webp,e_blur:1000/samples/landscapes/landscape-panorama
Notice that as soon as I remove my effect, I do get my image:
https://res.cloudinary.com/dvghwblv8/image/upload/q_auto,f_webp/samples/landscapes/landscape-panorama
Why can I not apply effects to images that are in a folder?
Generally, when Cloudinary returns an error for an image/video URL that failed to load due to a problem with the image/video or URL, they will return an HTTP header containing more information about why the request failed.
They also return this header for requests where an image was returned but there was a warning, such as when the default image placeholder was sent instead of the requested image.
This information is sent in the x-cld-error header, and you can see the value by using your browser's web developer tools to examine the request and response for the image which didn't load correctly.
In your current case, the specific error is:
Maximum image size is 25 Megapixels. Requested 25.62 Megapixels
The error is returned as the dimensions of the output image (10,906px by 2,349px - (which are the original image dimensions as no resizing has been requested in your URL) - contains more Megapixels than your account's limit.
You can bypass this error by applying some resizing transformations to your image which will reduce the total number of megapixels of the output. You will not only want to do that to avoid this issue but also because delivering such a large image will result in a large output image in terms of bytes which will then count against your Bandwidth quota in Cloudinary for every request - for instance, the q_auto,f_webp is almost 3MB in size at the original image dimensions.
For example, you can ask Cloudinary to scale the image to 2,000px width (by adding c_scale and w_2000) as follows and then your blurred image will generate and be returned:
https://res.cloudinary.com/dvghwblv8/image/upload/c_scale,q_auto,f_webp,e_blur:1000,w_2000/samples/landscapes/landscape-panorama
The above resized version is also only 14.4KB in size and the same w_2000 version and without e_blur it's 115KB - a lot less than the 3MB image when just using q_auto,f_webp and the original (10,906x2,349) dimensions.
I haven't dive in to trying the library out because I am trying to find out if this is possible.
I want to have the client side create a thumbnail as well as optimize the orignal file for web use. So upload maybe a 30x30 or 50x50 thumbnail and then a full size image like 600x600 or 800x800 With the same post request. Then I will be able to provide the serve the photos directly from what was uploaded.
If this is possible, what would the thumbnail be, post file[1] and full image, size file[0]
Is it possible to set it up to allow multiple post request for multiple images where each request has both a thumbnail and a full size image?
Is not a built in feature in dropzone but it is possible, but I think the easiest approach using dropzone would be to send the full image as a file, and the thumbnail as a text input field with the thumbnail base 64 encoded.
And yes you can configure dropzone to send an independent request for every image with one of this pairs per request.
Browser can render progressive images progressively.
And the images can only be progressively decoded if they were progressively encoded.
e.g., GIF or PNG images saved with the "interlaced" option, or JPEG images saved with the "progressive" option.
I want to render the progressive images in my MFC based application just like the browser does.
Windows Imaging Component provide IWICProgressiveLevelControl interface to decode image progressively.
But I can't find out any example to show how to stream and display image progressively at the same time using IWICProgressiveLevelControl.
Any advice would be appreciated. Thanks.
There's a good sample here:
https://code.msdn.microsoft.com/Windows-Imaging-Component-3af3cd49
Once you've used IWICProgressiveLevelControl::SetCurrentLevel to select the scan, the decoder will behave normally but only use the scans up to and including the one you selected. So any call to CopyPixels or any IWICBitmapSource components in your chain will receive the fully decoded image at the selected scan level.
The trick, as demonstrated in the sample, is that you can't use IWICProgressiveLevelControl::GetLevelCount and select the max level immediately if you don't know the complete file is available. As the documentation for the sample states,
IWICProgressiveLevelControl allows you to control which progressive level of detail to use on the frame decode. It also allows you to query the total number of progressive levels in the file; however it is not recommended to use this method on JPEG images because the total count is not known until the entire image has been downloaded, defeating the purpose of progressive decode. Instead, this sample demonstrates the recommended practice of iteratively requesting increasing levels of detail until WIC returns WINCODEC_ERR_INVALIDPROGRESSIVELEVEL.
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.
In a webappp I am currently creating the user has to provide images that get stored server side in a database. To minimize server load I am handling image resizing client-side courtesy of the HTML5 Canvas and getting the user to pre-approve the quality of the resized image.
The issue I have run into is this - the file size of the resized image is big. If I resize the same image with Paint.NET I can get a perfectly decent light weight 8 bit PNG image. Even the 32 bit Paint.NET image is smaller than the one that turns up on the server via toDataURL. I tried playing around with the toDataURL quality parameter but changing it has no effect whatsoever - exactly the same data size.
I should mention tha t I am testing with Chrome 20.0.1132.57 m and that the only browsers that are relevant to the app are the desktop versions of Chrome and Safari.
I know I could do some server side image processing but I want to avoid that if possible. Question - what, if anything can I do to cut down on the image file size sent out from the browser?
Browsers may happily ignore any quality parameter given for the toDataUrl and such. I don't believe honoring it is mandatory by the specification.
The only way to control the quality exactly would be
Write your own PNG compressor in JS or use something you can steal from the internets https://github.com/imaya/CanvasTool.PngEncoder
Dump <canvas> data to ArrayBuffer
Pass this to WebWorker
Let WebWorker compress it using your PNG compressor library
I believe there exist JPEG/PNG encoding and decoding solutions already.
Alternative you may try canvas.mozGetAsFile() / canvas.toBlob(), but I'll believe browsers still won't honour quality parameters.
https://developer.mozilla.org/en/DOM/HTMLCanvasElement/