Creating small, sharp pictures for the web on iPad Pro

[Mauryom28v]

I need to convert my large product pictures (taken on my Nikon d3400) into crisp, clear images that won’t make my website slow to load. I’d really prefer to stay away from photoshop... I hate that I have to rent and can’t just buy.

A great example of what I consider quality product photos can be found on www.sweetwater.com

Can this type of quality be created on the iPad Pro? I’ve tried affinity, pixelmator and I like what I’m creating when it’s 1200pix or greater ... but shrinking the photos has resulted in some really poor photos. Please help.

 

[960design]

Shrinking the physical photo size does not have to cause the loss of resolution; converting the image to a lossless format like jpeg or png causes the reduction in pixel depth.

Websites typically have several resolutions to display images. For example, thumbnails are small images, that when tapped load in higher resolution images ( it does not scale the thumbnail, that would look like poo ). Intelligent software design pre-caches the higher res image in the background to make the tap look instantaneous.

We also use a "medium" resolution for mobile devices to save the user some data and display something that looks pretty good since we typically can guess the mobile screen resolution versus desktops. Among other tricks.

Does that help, or did I just fall down a tangent?

 

[Mauryom28v]

Thanks but I can’t figure out how to make any one single image look good, small.

 

[960design]

Thanks but I can’t figure out how to make any one single image look good, small.

I bet I'm just completely giving you the incorrect information.
Here is what I mean ( please forgive the homely people ):
[960Design removed link]

This displays a low resolution 'thumbnail' or small picture. When the thumbnail is clicked on a full resolution image opens within the display.
You can see the differences by right clicking on a thumbnail to 'view image in new tab' note the pixel dimensions.
Now try clicking on a thumbnail to open a larger image ( a new image ). This will be sized to fit within your screen resolution, if you want to see the hi-res image, right click to 'view image in new tab'. You should now see the full res of the iPhoneX that was taking the pictures.

This gallery was put together in 15 minutes. It is not a representation of work, it is a representation of how thumbnails and full screen images work.

 

[mofunk]

Not sure how you putting on a website. If you are using something like Square Space or creating the site yourself. There is a way to do it. You could tell the webpage to start at a certain size and then if you want to enlarge to go to b-Size.

I think you are asking "adding images to a webpage" Some type of images parameter.

Off hand I can't remember what its called but if you are building your site, then you need to create that. You are trying to crop which is not what you want.


If you are trying to make your images "crisp" aka sharp, then you will need to use a pro lens or prime lenses to see the full sharpness. For you camera I would go with a Prime lens like a 35mm f/2.8 or lower or 17-55mm f/2.8 lens. If you are shooting product, use a good tripod.

 

[Mauryom28v]

I bet I'm just completely giving you the incorrect information.
Here is what I mean ( please forgive the homely people ):
https://william.960design.com/venice/

This displays a low resolution 'thumbnail' or small picture. When the thumbnail is clicked on a full resolution image opens within the display.
You can see the differences by right clicking on a thumbnail to 'view image in new tab' note the pixel dimensions.
Now try clicking on a thumbnail to open a larger image ( a new image ). This will be sized to fit within your screen resolution, if you want to see the hi-res image, right click to 'view image in new tab'. You should now see the full res of the iPhoneX that was taking the pictures.

This gallery was put together in 15 minutes. It is not a representation of work, it is a representation of how thumbnails and full screen images work.

THANKS for sharing that! Yeah, I'm in a situation where my web guy needs one image from me and I'm unsure what his software does in the background... but my complaint is that I can't even get the smallest picture to look good. I'm not worried (yet) what you see when you click it .... just what you see when you see it. thx
[doublepost=1519323880][/doublepost]

Not sure how you putting on a website. If you are using something like Square Space or creating the site yourself. There is a way to do it. You could tell the webpage to start at a certain size and then if you want to enlarge to go to b-Size.

I think you are asking "adding images to a webpage" Some type of images parameter.

Off hand I can't remember what its called but if you are building your site, then you need to create that. You are trying to crop which is not what you want.


If you are trying to make your images "crisp" aka sharp, then you will need to use a pro lens or prime lenses to see the full sharpness. For you camera I would go with a Prime lens like a 35mm f/2.8 or lower or 17-55mm f/2.8 lens. If you are shooting product, use a good tripod.

We're uploading our picture to a template at www.ebizwebpages.com - we're not working with code. But again, I'm not complaining that our small images look bad when enlarged ... they just look bad as-is.

 

[mofunk]

Ahh gotcha. Sounds like it could be the site and not your photos. Are the images on flickr or something? There is a photography and web forum here. Maybe they could answer your question. I know some web services don't allow quality images. They will compress them and the quality is lost. Facebook does that a bit.

 

[Mauryom28v]

Thanks! I suspect they might be compressing or scaling or ??

 

[MoffeDK]

Thanks! I suspect they might be compressing or scaling or ??

[doublepost=1519372380][/doublepost]Sorry my friend you will need Photoshop on a Mac or PC to correctly resize a photo with correci aspect ratio, pixel size and format. Here you Can select preferencer pixelsize and its SHARP. This from at trained graphic designer.

 

[admwright]

[doublepost=1519372380][/doublepost]Sorry my friend you will need Photoshop on a Mac or PC to correctly resize a photo with correci aspect ratio, pixel size and format. Here you Can select preferencer pixelsize and its SHARP. This from at trained graphic designer.

You do not need Photoshop, there are many tools for doing this. I cannot give any specific recommendations for doing this on an iPad as I have not done this myself.

The workflow would be the same on an iPad as a Mac or PC:
1) resize the image to the dimensions you require, say 800x600
2) export as jpeg with a medium or high quality setting (and check that the export is not doing any other image manipulation (I use medium).
3) check image on iPad
4) upload and check image again - it should be identical to the jpeg on the iPad.

The resize and export is what I do for my wife's website (www.ginawright.co.uk - images of her paintings) if you want to see some output.

 

[Flowerwil]

I always use Photoshop..

 

[mgipe]

THANKS for sharing that! Yeah, I'm in a situation where my web guy needs one image from me and I'm unsure what his software does in the background... but my complaint is that I can't even get the smallest picture to look good. I'm not worried (yet) what you see when you click it .... just what you see when you see it. thx
[doublepost=1519323880][/doublepost]

We're uploading our picture to a template at www.ebizwebpages.com - we're not working with code. But again, I'm not complaining that our small images look bad when enlarged ... they just look bad as-is.

The pictures on that company’s web page look fuzzy and over-compressed — not a very good sign for the quality of their work. I suspect that your pictures are not the issue.

 

[Mauryom28v]

Thank you for the replies and advice.