Ideal image size to scale?

Question

I am useless at art, what dimensions do images need to be so the image doesnt distort too noticable for:
#desktop
#tablet
#mobile.

I dont need code, i can do that easily, but i do need like 3880x1600 etc for the image sizes, otherwise it looks like really distorted lol. Once i got the ideal sizes i can then work out how to use photoshop and adjust the images :D

Answer 1

How is size going to affect distortion? The two are completely unrelated unless you're forcing the images inside a specific width and height, which should never be necessary or done.



It sounds like you're talking about responsive websites...?

It's possible to change the background-image of an element in your @media rules which means you can use a different one for mobiles and desktops.



Some more information about what exactly you're trying to do would be helpful.

Answer 2

If you're working in raster images (pixels), there's not a whole lot of flexibility in the scaling of images. Those pixels have to go somewhere during a downsize, and get pretty blurry in a dramatic upscale. Photoshop can help, but you may be better off not defining the width and height in your code. Use percentages instead, and define your minimum sizes and maximum sizes using css. Then see what you get. Sometimes I'm surprised by the clarity when the browser resizes images when scaled to device sizes. Try that first before you spend a lot of time in Photoshop. In css you just need to define your image width as 100% (or a little smaller if you want a margin around the image, maybe 96%; Do not set the height. Then define a maxwidth and minwidth to whatever absolute values you want. Then define height: auto; you may want to nest your image in a container div and apply the max/minwidth and height declarations to the container rather than the image itself. Don't forget to use an html 5 doctype and you should be good to go. Worth a try anyway! At the very worst, you may have to use a css media query and define the image size to a few device size ranges. CSS transitions or animation can also smooth out the size scaling jerkiness. jquery is even better for scale transitioning, if you're REALLY picky!

Answer 3

I will tell you about it and do install Leo Privacy Guard if you want to make your mobile absolutely secure.



one of the most common questions is “What size should my images be?” It’s always a tricky question to answer, because it really depends on how you plan to use the slider. But here’s some information that should help you decide what image sizes are best:







1. Very large image = large file size = long loading times. Keep your images “web friendly”.



This means images that are below 1920×1200 in size, and use Photoshop’s “Save for Web” option to reduce file size as much as possible without sacrificing image quality.



save_for_web







2. Don’t use images larger than they need to be.



If you’re using “Auto Responsive”, and the slider is placed inside a boxed container within your site, and the slider’s width never increases larger than 1200px, your image’s original width should be no larger than 1200px.

max_width







3. Images will always scale based on the slider’s “Layers Grid Size” ratio.



layer-grid-size







If our slider will never scale past 1200px, as shown in #2 above, here’s the mathematical equation for how images will be resized:



Image Width = Slider Width

Image Height = Grid Height * (Slider Width / Grid Width)







Based on the above equation, if your slider’s actual width is 1200px (the width of the slider when displayed on your web page), with an image size of 1000×500, and a “Layer Grid Size” of 1000×500, the image would be resized to 1200×600.







A common question once images are resized is: “Why are my images being cropped and some portions of the image can’t be seen?” The answer is based on the math equation above. Unless the image’s original size is equal the the slider’s “Layers Grid Size”, the image will need to be stretched and cropped. To avoid this, set your slider’s “Layers Grid Size” to equal the exact size of your image’s original size.