Develop Reference

showing blurry images in main page in futured posts in blogger

On the main page it's showing blurry image in futured posts.
website link:- iguidu.blogspot.com
I tried different methods but it is not working. can anyone?
related script:-

Original image is only 72px and you're rendering into a large box, You're basically using thumbnails in the place of featured image, this is the reason it's blurry. try using larger images, ideally to the expected rending size, in your case 490 x 305px

In your case, this seens to occur because of the images size. If you open each image in a new tab you will see that teir original size are 72x72 although the display size (the size that us, clients, are seeing) is 490x305.
How to correct this ? The ideal is to get a bigger image, and also an optimized one. The most optimezed format for web is .webp. Check on THIS link what is this.
Another important thing when comes to resize image is to keep the aspect ratio, but I don't think you are experiencing any issue with that, although I will let a LINK talking about it.

Slider inside image

I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png

I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas

Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image

jQuery/CSS Image resolution issue in Firefox and IE

I GOT THE SOLUTION: Using a div with background instead of the img tag works like a charm.(But it would be nice to know why did this happen, so if you have an idea feel free to comment.)
I have a kinda strange problem. I have a png image on my site, resize from 280x280 px to 40x40px (in the CSS it's 40 x auto). The problem is that the image appears pixelated on the edges, but when I change it to an other picture with a jQuery click event (same size, just colored) it appears nicely width sharp edges. If I change the order and display the colored version first, and then change it, the colored one appears pixelated. So somehow the changing affects the image I guess, but when I click on it again to change it back it's pixelated again. I tried to add the img with jQuery, no effect. Has anybody seen something like this before? Any ideas? This happens in Firefox. In IE, the pic is pixelated in both states. In chrome it works fine.
UPDATE:
This is how it looks before click:
After click:
UPDATE 2:
I thought I found a workaround, but I just found half a workaround... So I made a gif image of the first png. I display that first, then on the click event, I switch between the two png-s, and they look good. But of course, the gif on the first load has the same issue. If I change it on document.ready the png becomes pixelated...

FadeIn image like Facebook (if not fully loaded, show it fuzzy)

i am programming a jquery plugin which loads lots of images.
I would prefer to show the picture first fuzzy and if it's fully loaded, in complete.
Facebook is a good example.
How does this technique work?

This depends on the format that the image is saved in.
JPG images normally load (and hence display) from top to bottom. If however they are stored in progressive (also called interlaced) format then they will load the whole image in a grainy format and gradually increase the quality. Facebook save their images in the progressive format.
There are utilities available for converting from the first format into the second. Here is a link to a well known one (ImageMagick): ImageMagick

You just have two images: one of bad quality, and one of good quality and.
When you want to show image, you first set image.src to bad quality image, and then instantly to good image path (setTimeout with 0 delay will work too).
It works, because browser doesn't replace image in img tag until it's fully loaded. Image with bad quality will loaded much faster than good image, so user will first see fuzzy image and fully loaded image when it's loaded.
Example
img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
img.src = 'path/to/fullImage.jpg';
}, 0);

The usual approach is to set width and height on a thumbnail version of the image to full size of the big image, and replace the thumbnail with full image when the large one is loaded. When you set the full size on the thumbnail image, it becomes 'fuzzy' becuase it's interpolated to a larger size by the browser.

Load binary image using jquery

I would like to display image downloaded from specific URL using jquery ajax. How can I achieve it? (without setting image .src) I also need to rotate and scale that image.

You can create a <canvas> and populate it with an image. When loaded, the image can be rotated, scaled, drawn on, etc.
Here's a good tutorial that does exactly what you need.
In order to get this running in IE, I suggest using ExplorerCanvas.

To prevent the flicking of the image, you could first hide the image before loading and show it after the src have been loaded.
$('<img>').hide().attr('src', 'img_url').onload(function() {$(this).show()});
To rotate or do other mutation on the image, I sugguest use the Pixastic Library which is compatible across browsers.