image interview questions
Top image frequently asked interview questions
When should certain image filetypes be used when building websites or interfaces, etc?
What are their points of strength and weakness?
I know that PNG & GIF are lossless, while JPEG is lossy.
But what is the main difference between PNG & GIF?
Why should I prefer one over the other?
What is SVG and when should I use it?
If you don't care about each and every pixel, should you always use JPEG since it's the "lightest" one?
Source: (StackOverflow)
I have a regular HTML page with some images (just regular <img /> HTML tags). I'd like to get their content, base64 encoded preferably, without the need to redownload the image (ie. it's already loaded by the browser, so now I want the content).
I'd love to achieve that with Greasemonkey and Firefox.
Source: (StackOverflow)
I'm looking for some kind of formula or algorithm to determine the brightness of a color given the RGB values. I know it can't be as simple as adding the RGB values together and having higher sums be brighter, but I'm kind of at a loss as to where to start.
Source: (StackOverflow)
I am trying to open an image / picture in the Gallery built-in app from inside my application.
I have a URI of the picture (the picture is located on the SD card).
Do you have any suggestions?
Source: (StackOverflow)
Can I create a Controller that simply returns an image asset?
I would like to route this logic through a controller, whenever a URL such as the following is requested:
www.mywebsite.com/resource/image/topbanner
The controller will look up topbanner.png and send that image directly back to the client.
I've seen examples of this where you have to create a View - I don't want to use a View. I want to do it all with just the Controller.
Is this possible?
Source: (StackOverflow)
Are there any JavaScript or jQuery APIs or methods to get the dimensions of an image on the page?
Source: (StackOverflow)
I have an app where the user can choose an image either from the built-in app images or from the iphone photo library. I use an object Occasion that has an NSString property to save the imagePath.
Now in the case of the built-in app images I do get the file name as an NSString an save in the [occasion imagePath]. But in the 2nd case where the user picks an image form the photo library I get an NSURL which I want to convert to an NSString to be able to save it in [occasion imagePath].
Is it possible to convert the NSURL to an NSString?
Source: (StackOverflow)
I'm looking to create a base table of images and then compare any new images against that to determine if the new image is an exact (or close) duplicate of the base.
For example: if you want to reduce storage of the same image 100's of times, you could store one copy of it and provide reference links to it. When a new image is entered you want to compare to an existing image to make sure it's not a duplicate ... ideas?
One idea of mine was to reduce to a small thumbnail and then randomly pick 100 pixel locations and compare.
Source: (StackOverflow)
How to properly vertical-align this image in the .frame element:
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame's height is fixed and image's height is unknown. I can add new elements in .frame if that's the only solution. I'm trying to do this on IE≥7, Webkit, Gecko.
See the jsfiddle here: http://jsfiddle.net/4RPFa/61/
Source: (StackOverflow)
Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn't seems to be a padding/margin.
What is the gap or extra space below image?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
Source: (StackOverflow)
Is it possible to set the src attribute value in CSS? At present, what iI am doing is:
<img src="pathTo/myImage.jpg"/>
and I want it to be something like this
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
I want to do this without using the background or background-image: properties in CSS.
Source: (StackOverflow)
I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the screen, but for some reason I can not. Who be will help solve the problem?
You can see a live example here.
Source: (StackOverflow)
I just got started with markdown. I love it but there is one thing bugging me: how can I change the size of an image using markdown. Docs only give the following suggestion for an image:
If it is possible I would like the picture to also be centered.
Source: (StackOverflow)
It seems like there are a few different techniques out there, so I was hoping to get a "definitive" answer on this...
On a website, it's common practice to create a logo that links to the homepage. I want to do the same, while best optimizing for search engines, screen readers, IE 6+, and browsers who have disabled CSS and/or images.
Example One: Doesn't use an h1 tag. Not as good for SEO, right?
<div id="logo">
<a rel='nofollow' href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
Example Two: Found this somewhere. The CSS seems a little hacky.
<h1 id="logo">
<a rel='nofollow' href="">Stack Overflow</a>
</h1>
/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}
Example Three: Same HTML, different approach using text-indent. This is the "Phark" approach to image replacement.
<h1 id="logo">
<a rel='nofollow' href="">Stack Overflow</a>
</h1>
/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
Example Four: The Leahy-Langridge-Jefferies method. Displays when images and/or css is turned off.
<h1 id="logo" class="logo">
<a rel='nofollow' href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}
What method is the best for this sort of thing? Please provide html and css in your answer.
Source: (StackOverflow)
I am accessing a link on my site that will provide a new image each time it is accessed.
The issue I am running into is that if I try to load the image in the background and then update the one on the page, the image doesn't change--though it is updated when I reload the page.
var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
function updateImage()
{
if(newImage.complete) {
document.getElementById("theText").src = newImage.src;
newImage = new Image();
number++;
newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
}
setTimeout(updateImage, 1000);
}
Headers as FireFox sees them:
HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT
I need to force a refresh of just that image on the page. Any ideas?
Source: (StackOverflow)