• Resizing digital images for use on the Web

    Home » Forums » Newsletter and Homepage topics » Resizing digital images for use on the Web

    Author
    Topic
    #495319


    DIGITAL IMAGING

    Resizing digital images for use on the Web

    By Nathan Segal

    Whether you’re building the next new website visited by millions or simply posting the latest snapshots on Facebook, image quality matters.
    But shrinking multi-megapixel images to fit a screen can be problematic. Here are some tips that will help with the resizing process.


    The full text of this column is posted at WindowsSecrets.com/digital-imaging/resizing-digital-images-for-use-on-the-web/ (paid content, opens in a new window/tab).

    Columnists typically cannot reply to comments here, but do incorporate the best tips into future columns.[/td]

    [/tr][/tbl]

    Viewing 3 reply threads
    Author
    Replies
    • #1457680

      If you have Photoshop then it is much easier to use a Bridge/Photoshop combination.

      Open Bridge navigate to the directory containing the images you want to resize.
      Select Tools|Photoshop|ImageProcessor
      Photoshop opens with the image processor dialog box displayed.
      If this is the first time you have done this then you will have to make some changes.

      1) Leave the automatic setting ‘Process files from Bridge’
      2) Select ‘Save in Same Location. (Unless you want to save them somewhere else) (Saves the results in a sub folder labelled JPEG)
      3) File Type (I generally use JPEG but you can save as PSD or TIFF but this tends to create bigger files.)
      Check Save as JPEG
      Check Resize to fit
      Set Quality to 5
      Set width and height to 1024 (I have found this to be optimum value)
      4) Leave blank.

      I find that this results in images that are suitable for displaying on the web whether for Facebook or some other site.
      Also the values entered in the dialog box are saved so you don’t have to re-enter them unless you change something.

    • #1457709

      There are circumstances where you still need Image, Image Resize. But that’s a great overview of PhotoShop’s Save for Web. I generally just use 2 up and tweak the image for faster productivity.

      I would also note that when you scale an image, use an even divisor of pixels if possible to get the best quality. 1200 will drop to 400 better than 500, for example.

      For quick and dirty, like emailing a print to a friend, I’ll also note the excellent free Image Resizer for Windows. Right click an image to resize it to a default value or choose a custom one. It does a surprisingly good fast resize, unlike email programs, etc.
      https://imageresizer.codeplex.com/

      Finally I’ll note the XNView Shell Extension, also free. A quick right click gives you a preview and file properties. I don’t usually use it’s convert functions as I prefer more control. Adobe Bridge is certainly more advanced but not quick.

    • #1457711

      btw – on Image Resizer – I prefer the results of v2.1.

      • #1457728

        Good to see that Image Resizer has been mentioned. I have both Photoshop and IrfanView installed but Image Resizer is always my ‘go-to’ application for image resizing.

    • #1459116

      I think it is to Irfanview’s great credit that it would even be compared to Adobe Photoshop. Does everyone realize that Irfanview is 100% freeware, and Adobe Photoshop costs like $1000?
      I have been using Irfanview since before it had the “Save for Web…” plugin. Thanks to this article, it might be time for me to learn more about what it can do.
      When I want to reduce the file size of a picture, JPEG compression can’t be beat. But for screenshots or other images when I don’t want any JPEG artifacts, halos, or blurring, I save in PNG format as follows:
      Open image in Irfanview, choose Image > Decrease Color Depth, Uncheck ‘Use Floyd-Steinberg dithering’, check ‘Use best color quality’ and then custom limit the number of colors to as few as possible without negatively affecting the quality of the image. Sometimes I have to undo a few times and increase the number of colors. Most of the time 16 colors is sufficient, which allows it to be a 4-bit image. Anything over 16 requires it to be an 8-bit image. And over 256 colors requires a 16 or more bit image. I’m not an expert, but what I think this means is that for every pixel in your image, you need that many bits to store the number of possible colors that pixel might be. Of course, this is bitmap (BMP) image logic, and there is further compression done after that, but still, starting small only makes it possible to get smaller after compression.

      Next, I “Save as…” the image and choose the PNG format, and make sure the Compression Level is set to 9 (maximum) [Note: PNG compression has no effect on image quality] and that the ‘Use PNGOUT plugin’ box is checked.

      Irfanview is so versatile, and yet lightweight and fast. Did I mention its freeware? The only wish I have for Irfanview is the ability to record macros or customize menu keyboard shortcuts.

    Viewing 3 reply threads
    Reply To: Resizing digital images for use on the Web

    You can use BBCodes to format your content.
    Your account can't use all available BBCodes, they will be stripped before saving.

    Your information: