Develop Reference

HTML : load thumbnail image and full image faster

I have a blog website that loads the images slowly i want to know how to make them load faster and:
I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so?
-how to i preload images ? or is there any better way ?

Here are some pointers.
Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading. You can use JavaScript or CSS (background-image) to achieve such a placeholder.
Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.
Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!

Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.
My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.
This post might also help Load a low-res background image first, then a high-res one

jQuery Download Images to Folder

I was looking at this question Download image with JavaScript which shows how to download an image.
I want to be able to do something similar but more automated. I would like to navigate to an imgur page, enter some search parameters then use jQuery to download any .jpeg or .png
I have the basic layout
navigate to imgur and search
find all .jpeg and .png in page
run code similar to other question to download
What I want to know, is can I specify a specific folder to save the images to?
Can I automate the click of the Save button?
If this is not possible in pure jQuery/javascript my other choice is to default to using iMacros with some javascript mixed in, I would however like to avoid this.

This is not possible using only JavaScript.
A user's interaction will always be required in order to save a file. Imagine the mess we'd be in if that weren't the case... Viruses everywhere!

Reading the activeDocument in Photoshop and send it to web page or clipboard API

I'm new to Photoshop scripting and javascript. How can I read via code the image inside the active window in Photoshop CS5-C6 and paste that image into a web page DIV?
FYI I'm a complete newbie to programming. My goal is to build a simple Mac App prototype with a wrapper running a web app inside. That web app needs to connect to Photoshop via TCP and read the image inside the selected window document and then paste it somehow into the web app's html. (Photoshop has feature inside the edit menu called 'remote connections' that converts Photoshop into a server and allows any external applications to read/write stuff inside Photoshop by sending javascript over TCP)
So, how can I:
1) Access Photoshop over TCP via javascript?
2) How can I get the image inside the active Photoshop window and paste into the web app?

I might need some additional information to help more accurately, but if I understand correctly I'd say you are running your code on your local machine.
Please post the development environment you are using (Visual Studio, eclipse, etc.)
First Approach
You will want to save you Photoshop image and add that file to your project. Just in case, I would recommend actually moving the image into your project folder first.
So, if you saved the image to "C:/Username/Pictures" - move it to "C:/Documents/Visual Studio 2010/Projects/MyWebPage"
Once you've done that, just add an IMG tag and the file path. If you moved the image into the project folder, the path should just be the filename:
<div>
<img src="myPhotoshopImage.gif" alt="Image">
</div>
You can put whatever you like inside the alt quotations (""), it doesn't effect the way it works. You can also specify the dimensions by adding height and width (this is optional) like so:
<div>
<img src="myPhotoshopImage.gif" alt="Image" height="260" width="420">
</div>
Second Approach
If you don't want to worry about managing your image files in your project, you can choose to host them online.
First, save your imagine in photoshop. Then choose an image hosting service. I would suggest ImageShack for an easy start. I would also suggest creating an account to keep track of everything.
Log in to ImageShack and go to the "Media Upload" tab. Click the "Browse" button and locate your image. Click OK. If you want your image to appear the same as it looks on your computer, make sure "Do Not Resize" is selected. Finally, click "Upload Now" & "Continue to Image Links" on the following page.
You will notice they have generated an HTML link for you already, which will work - but will also act as a link to ImageShack if clicked on. If you want to avoid that, just follow the same pattern:
<div>
<img src="http://img541.imageshack.us/img541/2232/123vm.jpg" alt="Image" height="260" width="420">
</div>
You'll need to do some research on any other actions you want the embedded image to take. A great place to start is W3Schools.
Edit - Forgot to mention... If you are wanting to use some javascript functions to work with the image, give your image an "id" attribute:
<img src="something.jpg" alt="whatever" id="headerImage">
You can now access the image via javascript:
function foo() {
var myImage = document.getElementById("headerImage");
myImage.height = 1000;
myImage.width = 832;
};
Also, if you are having any trouble, make sure your image is saved as a common filetype (not .psd)

There is a python wrapper for connecting to photoshop called photoshopConnection
One thing you can do is get the actual file info from PS and then copy the file itself into the webapp. I do not think the photoshop server supports streaming data in the fashion you are looking to.

Generating image preview of a doc or pdf file

Hey guys I have searched a lot but didnt get any working solution for this problem.
I am working on a site using jsp and on this we have to upload forms in doc / docx/ pdf format. I want to generate the preview of the first page of the form. So that user can checkout whats in the form before downloading it.
Hope someone will come up with some solution for this.
Thanks

Not sure what OS platform you are on for your jsp, but my recommendation would be to have a virtual printer driver that can "print" the document at hand to an image file (or as HTML). Then you can manipulate the output of the printer driver anyway you want. Extends itself nicely to other file formats as well.
Another version of this technique would be to programatically open the document with Microsoft Word (using ole automation), then do a screen capture after the document opens. Word can load PDF files as well. You'll have to find a creative way to get the document into a Windows desktop process from your server. But it could work.

Well.. what you can do is..
Hyperlink the form names with relative paths of your jsp with download option. You need to write a servlet to download the form.. preview this jsp in pop up window.
or
use iframes in html create a div tag to preview and download the same form you are displaying. You need to write a servlet to download the form.
Make sure you set the appropriate contentType of your forms doc/pdf/jsp using response.contentType("image/jpg");
response.contentType("application/pdf");
response.contentType("application/doc");

Getting drag and dropped files icon using Javascript

I want to get an icon's image when a user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?

I would suggest a mix of:
This great drag and drop upload library:
http://valums.com/ajax-upload/
This javascript code to preview uploaded images before they upload
How to upload preview image before upload through JavaScript
You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.
Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...
An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.
You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !

You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)
Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.

Here is a great tutorial that I think can help you with many problems. If I understood your problem right.
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer
Here you've a "Using drag feedback images", maybe this can help to you :)