1

I know of tools such as retinize.it and I know of the wordpress retina 2x plugin. They kind of do what I need, but because of some limitations with my current images I need a different method.

I'm a developer and my photoshop skills are sorely lacking.

I think I want to record an action? That I can run though an entire "uploads" directory, which is more than one level deep.

That action needs to double the size (or dpi?) of every image, using automatic scaling (I think that's best right?).

Edit: I should mention I'm using CSS to make these images half their size again... This is what makes these images appear crisp on retina displays, this is how it's done right?

  • You realize "doubling" anything in an image will dramatically reduce it's quality, right? You won't get "great" images and if doubling the dimensions you often won't even get usable images. – Scott Oct 15 '14 at 21:39
  • Right, but the work process for developing images for retina, is to save a 100x100 image normally then create one that's 200x200 by using image size. We then use css to make that larger image 100x100. – UzumakiDev Oct 15 '14 at 21:46
  • 6
    No. The correct process is to create a 200x200 image, then save it as 100x100. When you reduce you do not lose quality. When you enlarge you lose quality. Retina display require 2 images. You do not simply resize one image via CSS for retina displays. I mean, you can... but it's not a great workflow. – Scott Oct 15 '14 at 21:53
  • Okay, I understand that creating and image first as double the size would be more ideal, but unfortunately thses images already exist at their sizes. I understand we use two images retina being @2x. I want to scale these images though because it's my only option and (I believe) they will still look better than leaving them as is? (also using a scaling method would help, automatic, best for enlargement etc?) – UzumakiDev Oct 15 '14 at 22:00
  • 1
    If you must do this instead of creating the images at twice the size and scaling down, ImageMagick reportedly has extremely good scaling algorithms - some say better than Photoshop. It has a steep learning curve for anyone unfamiliar with the command line, but I've seen it recommended over and over again. Disclaimer: I've never used it. – Dom Oct 15 '14 at 22:18
1

So, since no one wants to answer your question but just argue with your method, I'll complete the answer:

The easiest way to do this is to record an action.

  1. Open the Actions Palette.
  2. Open any image that you want to modify.
  3. Create a new action called "Double DPI" (or something)
  4. Hit "Record"
  5. Change the resolution or just the DPI of the image (which doesn't necessarily change your image.
  6. Stop Recording.
  7. Choose File > Batch Processing
  8. Load the folder and action for this image resize thing and select Save and Close as your options.
  9. fin
0

Doubling the DPI / image size will do you more harm than good. You can't create pixel information where there is none, all you can do is interpolate between the different pixels.

This is, in effect, what "pixelation" is — interpolating with not enough information.

I would suggest going the other way around — finding a larger image, and creating the smaller ones from there. Either Photoshop "Actions" or Adobe Bridge's "Image Processor" could help you there.

  • Yes, but we use CSS to make an image half it's size again, this makes them look crisp on retina. Am I wrong? That's how I've been doing it until now and it worked. – UzumakiDev Oct 15 '14 at 21:46
  • @UzumakiDev partially incorrect. But it is possible the scaling engine of your editor doing a better job than browser. Like scaling up with smoother option and then running smart sharpen can do wonders on drawn pictues... – joojaa Oct 16 '14 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.