I've recently come across a situation to work with progressive images. My understanding is, image has to be stored as progressive and browsers will do the loading job.
To prove this, I've created an image as progressive image (with 3 parses and 5 parses) and used it in a sample HTML file with <img> tag. I've uploaded the HTML and image the server. And I don't see any progressive loading.
Is there anything we should do to enable it? As I said, I thought browser will do the loading part automatically.
<<Update>>
Here the example HTML - https://dl.dropboxusercontent.com/u/2456662/Progressive/progressive-demo.html
First two images are exported as progressive images with 3 parses and 5 parses respectivey. Thrid image is the base line image.
When I access the HTML, all 3 are downloaded like base line (regular model). Progressive should load the entire picture in the first shot followed by other pixels - right?
Related
I maintain a website that uses WordPress. From time-to-time, one of my associates opens a page in the browser, highlights some text and images, and copy/pastes it into Microsoft Word, in order to provide summaries of content to one of our higher-ups.
Ordinarily, this would be an uneventful task. However, this process is now not working. When we highlight, then copy/paste content from a page, the text will transfer over to Word, but the images will not. We simply see an empty rectangle where the images should be. A screenshot, demonstrating that web page content that is copied, displays as nothing more than an empty rectangle when pasted.
This behavior is consistent across IE, Chrome, Opera, and Firefox. This problem occurs whether we use Microsoft Word or OpenOffice Writer. No updates were made to Word or our browsers during this time.
Of course, we want the images to display in Word, rather than empty rectangles. What can we do to make the images display in Word?
Insert image from your local system if problem persist, then its your Word issue. If local images are showing perfectly then just save a copy of image from online resource to your local system and add images from there. may be its just because of word is taking online reference for image and could not connect to internet to resolve them and showing you broken image. or the image you are adding is not supported by the older version of word such as .svg graphics. make sure you are adding images with .jpeg/jpg , .png, .gif file extension.
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.
I found this...
html to jpg with c#
However...
I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.
It looks like you should be able to do it using javascript with this technique:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Make sure to take note of the following caveat however:
Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.
EDIT: You may also want to check out these related questions:
Save HTML5 canvas contents, including dragged-upon images
How to save a HTML5 Canvas as Image on a server
I understand the answer to this is most likely No... but I wanted to ask.
Is it possible to have one img start downloading first?
Basically I have a place holder GIF (that shows in the place of images as they download and I want to get that GIF downloaded as quickly as possible.
Am I able to somehow fast track the downloading of one img (the GIF)?
thx
Try putting an <img> tag with the gif as src before all other <img> tags and hide it with visibility:hidden
You could include that image as a data URI (if it's not too large), so that there's no separate network request made to fetch that image. It will, of course, increase the size of the actual HTML content served.
You could also preload the image using JavaScript by making a new image object and setting the src attribute.
You can have placeholder gifs, eg (in css)
img{background-image:url(default_image.png)}
However, there is no good way to force one image to load before another. Browsers can load in whatever order they want.
You can make it more likely that the placeholder is downloaded first:
If the placeholder is the same on all pages, it can get cached, so that on the next page, it is already loaded
Make sure that the placeholder image is early in the page (makes the browser start loading earlier, a browser will probably load images in the order they appear in the html). If image shouldn't be displayed there, just do something like width="0" or visibility: hidden;
Put the placeholder somewhere that the server serves quickly (avoid dynamically controlled folders - serve it in a static directory, eg. in the public/ folder for Apache)
Make the placeholder image small
Encourage caching by setting the cache headers so that the image expires in the far future (eg. 1 year), and so that the browser doesn't need to check back with the server. Also make sure private caching is off for the image (allow public server caching).
Data URIs are not that great. From Wikipedia:
Data URIs are not separately cached from their containing documents
(e.g. CSS or HTML files) so data are downloaded every time the
containing documents are redownloaded.
Referencing the same resource (such as an embedded small image) more
than once from the same document results in multiple copies of the
embedded resource. In comparison, an external resource can be
referenced arbitrarily many times, yet downloaded and decoded only
once.
If you use the placeholder image in 10 places on your page, you are going to have a much larger page.
You could try to dynamically load everything you don't want loaded before that gif (and is somewhat significant in size). Then, you could load that gif, and after it's done - load the rest of the content.
This could be done using Javascript. I'm not sure if there's already a library that helps you do this easily, but it shouldn't be too hard to do.
I'd start off using something along the lines of "on document.ready, load that important gif, then when that finishes, load the rest":
$(document).ready( function() {
var myImportantImg = $('<img />');
$(myImportantImg).on('load', function() {
// attach myImportantImg somewhere
// load rest
});
$(myImportantImg).attr('src', 'http://url.to/myImg.gif');
});
From what I read using Data URI Scheme in conjunction with css would be a good option:
img.placeholder {
background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}
Include the above code in a <style>-tag in the documents <head>-section to make sure it's loaded with the page, and tag the appropriate images with the placeholder-class:
<img src="..." class="placeholder">
i want to develop an iPhone optimized website, which includes an generated image. To generate the image i call an external website (aspx). Example:
https://url/filedownload.aspx?documentid=1234&mimetype=image/jpeg
This is no problem on any standard browser on the pc, the images shows up after 2 seconds. But on the iphone there is only the blue question mark showing.
The resultion is ~ 170 * 100 72dpi.
This is certainly a server-side issue, as suggested - a working link or a sample of the source is needed to help resolve. In the meantime, some other things to check; does the image type created match that of the content type specified?
I would then try adding the exact same image (as a static physical file) to the website, load this in an iPhone (to prove there is nothing fundamentally wrong with the image file data) and then compare response headers from your dynamic image code to ensure they are the same - do you require attachment-filename for example?