Image cropping problem - css

When I copy a layer in photoshop, then I want to merge it with canvas, I crop it, but it's getting smaller. I want to save its original size! Could you help me please?

Seems like the cropped version you are pasting into has a relatively bigger size. That might be the reason you are feeling like it getting smaller. Observer closely what is the zoom level.

Related

My images look terrible on a image slider- what should I do to make my images look not stretched out?

It is the first time I have ever used image slider on a website, what should I do to make my images not look stretched out?
The problem is not with my slider code, my question is if this is even possible to my images look great with this kind of height/width ratio (I have tried scaling images with Sketch already and this is the best result I have gotten so far)? I also don't want to add more height to the slider since I think slider shouldn't take up that much space.
Here is the website for reference: http://sanbruno.herokuapp.com/
People who have worked a lot with sliders- what should I do to make it look great?
So let's make some calculations - as I can see at webpage you're using 2000x600px size images, what's gives us 20/6 scale = 3.(3). So for 4256px width (if you want to use it all) you should have 1276px height (4256 / 3.(3) = 1276px). So if you crop 1276px width from you original image it won't be stretched out.

Image grid on website, can I scale images down with CSS?

I have a lot of images with a resolution around 500x1500 and I want to show all those images in a grid on my website. Each picture in the grid should be 200x200px.
If I scale down the images with CSS from 500x1500px to 200x200px and I show 10 200x200px images on my website, does this mean that the visitor first have to download the 500x1500px images and then their browser scales the pictures down?
If that is the case, then it's a bad solution to do it like this, right? Instead I should have two versions of each picture, one 500x1500px version and one 200x200px version. Am I right?
The question then is what's the easiest way to scale down hundreds of images?
Yes, I think it is the case that the browser will download the larger image and then scale it. You can check for yourself by opening the dev tools on the browser (press F12 if you're using Chrome) and monitoring the network traffic when you reload your site.
The easiest way to scale down hundreds of images is find or write a program to do it.
You are right. You can set height and width of the images but 1) the user will have to download a bigger image than necessary and 2) the height x width ratio will be trouble (the big one is 1x3 and the small one is 1x1). I would either use http://www.imagemagick.org/ , gimp or a similar tool to crop the images, but the problem is that the cropped area might not be very good. Only a human can select a good fit for the cropped area :-(
Edit1: Perhaps a well-trained neural network could select the most "interesting" part of every image programatically but that's kind of a lot of trouble to do that. Still it could be pretty interesting :-)

Extract layer from the images

I have a image and I want to extract a particular portion of a whole image.
what can I do for?
I want to extract the taj Mahal from this image.
This image appears to be a JPEG. JPEG images do not contain layers. Your best bet is going to be to start with a better image. Even then, you'll almost certainly need to paint in portions. If this is really the only image you can find at the correct angle then you'll be doing a lot of hand editing to get what you want.
Try: https://www.google.com/search?q=taj+Mahal&tbm=isch

Convert PNG image to SVG / Vector

We are desperate to convert an image so that it can be used as an image map. Everything I have tried, really doesnt cut the mustard. I havent the experience to work at very high resolutions.. plus I dont know the terminology and neither have the skills or resources to invest in learning how to do this, knowing many others on here and the internet have far greater experience.
I have downloaded and played with Inkscape, but really am going round in circles...
So thought I would ask here.
What I am after is similar to Raphael Australia Map or David Lynchs, http://davidlynch.org/js/maphilight/docs/demo_usa.html
No frills, no effects, just change the state color of the map on hover and retain that event on click.
Here is what we have ...
What we have is a MAP like this.
We lost the original file, which was pure gray. I have this left :(
Anyway, we want it so that each state ( including the territory ACT ) not indicated on the above map, represented in pink #ec008c . On hover
Map needs to be FLAWLESS !! Also require that any imagery must be png and transparent bg.
Must remain exact size as above. Must be extremely accurate on svg coordinates, and optionally would like the STATE text to appear , like the QLD is shown on the image above, but not wholly necessary.
Can anyone point me in the right direction please.
Have you tried Path > Trace Bitmap in Inkscape? If you play with the settings you should be able to get a decent vectorised image.
Vectorised:
EPS:
http://dl.dropbox.com/u/13402937/Australia.eps
Adobe Illustrator:
http://dl.dropbox.com/u/13402937/Australia.ai
try to use this tool, its the potrace part to trace pixelpictures in inkscape with many features. potrace traces pictures from commandline
I have obtained extraordinary results with https://vectormagic.com/ , which can be tried online.

CSS Solution to image rendering

I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.

Resources