Save a WebP file as another image file format

Back in 2010, Google introduced an image file type called WebP that has a smaller file size and is optimised for viewing online. However, not all image software opens WebP files, and older browsers may have trouble too. If you can’t open such a file, there’s a simple way to save the image (in Windows), then convert it to a file type (e.g. PNG, JPG) your image software can understand.

Here’s how:

1. Right-click on the image in the browser, and select the option to Save image as (different browsers will use different wording—you’re looking for the option that lets you save the image).
2. Save the file to a location on your computer.
3. Go to that location, right-click on the file you just saved, then select Open with.
4. Select Paint. (Yes, Paint—the program that’s been in Windows since forever!)
5. In Paint, go to File > Save As.
6. Select the image file type you want to use (e.g. PNG or JPEG).
7. Give the file a name (or use the original), navigate to where you want to save it, then click Save.
8. You’ll get a message that any transparency will be lost. Click OK.
9. You can now open your newly saved file in image software that supports the file type you chose at Step 6.

More information on the WebP format and browser and software support for it: https://en.wikipedia.org/wiki/WebP

[Links last checked February 2020]

Another meaningless error message

I wonder what this one means?

Error from Paint Shop Pro

Paint Shop Pro has been around a LONG time, and I’ve used it for many years. So you’d think they would’ve found all the useless error messages over that time and fixed them. However, I got this one while using Paint Shop Pro X the other day. I was trying to connect back to the pictures on my camera. But nothing in the error message told me that.

In fact, the error message says nothing meaningful to me, the user. There’s no hint as to what caused the problem, how I can fix it, or any steps I might take to prevent the error from occurring again. It’s just gobbledegook.

You can do better than that, Corel.

PaintShop Pro: Find a color value

You find this great image and want to find out what colors have been used in it. There are several ways you can go about this — in this post I’ll describe one way to do it in PaintShop Pro X. Other graphics programs will have similar tools to the Eyedropper Tool in PaintShop Pro.

1. Open the image in PaintShop Pro X.
2. Zoom in to make it bigger, if applicable — this helps you see the individual colors better.
3. Click the Eyedropper Tool in the toolbar then move the eyedropper tool over the image.
4. As you move the eyedropper, a little box displays the RGB color values of the pixel at the tip of the eyedropper.
   

   The eyedropper tool shows the RGB value of a pixel

5. If you click on a pixel, that color is put into the Materials swatch.
   

   Color swatch

6. Click on the swatch and you get more detail about the color —  the RGB values (1 on the image below), the HSL values (2), and the Hex value (HTML field) (3).

Material Properties window showing color values

Unfortunately, PaintShop Pro doesn’t display Pantone or CMYK colors, but at least you should have something to work on with the values it does have.

PaintShop Pro: Resize an image

Before you resize an image in PaintShop Pro X, decide whether you want to keep the original or whether you’re happy to make changes to the original. If the image is a JPG, then any changes you make to the original will lose quality each time you save. It’s often safer to work on a copy, then delete the original at a later time if you no longer need it.

To make a duplicate of an open image, press Shift+D then work on the duplicate.

Hint: If you don’t know the measurements you want for the final image, but have a visual idea of how big it should be, scroll the mouse wheel to zoom in or out to the size you’d like the image to be. Take a note of that percentage (e.g. 25%) — it is listed on the tab (if you’re using PaintShop Pro X’s tabbed interface), on the toolbar, and in the title bar.

Places where the zoom percentage is shown

To resize an image:

1. Press Shift+S to open the Resize window (or go to Image > Resize on the menu).
2. Change the Pixel Dimensions unit of measure to Percent.
3. Set the width value to the percentage required (e.g. 25%).
4. Make sure Resample using is set to Smart Size.
5. Make sure Lock aspect ratio is selected.
6. Leave the other settings as they are.
7. Click OK.
8. Save the image.

Resize window in PaintShop Pro X

Graphics file formats for Word, PDF and HTML output

A perennial question that arises on the various technical writing lists I subscribe too is about ‘what graphics format should I use for screenshots?’

While many academic papers and long articles have been written on the merits of each and the technical details of why you should use one over another, here’s my short version:

Use GIF, PNG, or JPG for online. There are a couple of more obscure formats too, like SVG, but these three cover the main graphics file formats suitable for online delivery and display.

GIF and PNG are similar in final size (small!) but GIFs only have 256 colors whereas PNGs have 16+ million colors. I’ve used GIFs successfully for screenshots, but I know some people have problems with them. GIFs are fine for line drawings, but may ‘lose information’ with color-rich screenshots. I find it’s easier to save as PNG for everything except photos. That way I don’t have to think about it!

Use JPG for photos. Be aware that JPG (also 16+ million colors) is a lossy format, which means that every time you resize or alter the photo in some way, it will lose ‘data’ on saving. Over time, a regularly saved JPG will start to show artefacts (usually fuzzy patches and pixellation). If you’re old enough, you’ll remember when jokes were faxed or photocopied multiple times—the first few times wasn’t a problem, but after numerous copy iterations, much of the data was lost. If you’re doing high-end graphics things with photos you might want to consider TIFFs etc. but they are very large and do not work well (at all?) on the web.

Word handles most graphics formats well. However, Word does its own transformation of the graphic—including resizing it to fit the available space—so that 4 MB graphic that looks fine in Word will blow out Word’s file size and may make the document slower to load. Where you can, get a copy of the image, resize it so it’s smaller, save it as a PNG, then include it in the Word document.

My recommendation for clean and lean non-photographic graphics for all outputs is PNG; reserve JPGs for photos only.

Oh, one other thing… Crop or doctor the screenshot so the user doesn’t inadvertently click on it thinking it’s the real thing. Even after writing Help for many years, I still do this occasionally! I use SnagIt to capture the graphic and crop it (by selecting the area of focus, adding a torn edge, drop shadow, highlight/fade or some other method to indicate that the graphic isn’t the real application). SnagIt also lets you set up profiles, so you can set up a profile for your PNG settings and then just do a heap of captures in a row and they will all save as PNGs.

Inches to pixels converter

Some quick ways to get the pixel equivalents for measurements in inches:

• http://auctionrepair.com/pixels.html: This site gives you an approximate set of values. Go to the second set of fields, enter the value(s) in inches, then set the DPI to 100 (unfortunately you can’t set it to 96). The pixel values update automatically.
• Use a graphics editor (I use PaintShop Pro), create a new image with the dimensions in inches, then view the image’s size in pixels. PaintShop Pro X does this really easily on the New Image window. Here’s how: Select File > New from the menu, change the Units to Inches, enter the inch values in the Width and Height fields, change the Resolution to 96 Pixels/Inch, look at the bottom of the window—there’s your pixel equivalents. You don’t even have to create a new image.

See also:

• Pixel to em converter
• Inches to pixels — converting PowerPoint slides for import into Adobe Captivate project: http://iconlogic.blogs.com/weblog/2011/03/powerpoint-changing-slide-sizes-for-importing-into-captivate.html
• Downloadable converter: http://www.louisedade.co.uk/apps/pixels-to-inches-converter

[Links last checked August 2012]

Use PaintShop Pro to create an Image Map

Need a clickable image map in a hurry? Already have PaintShop Pro? Then use PSP to create the map for you.

In PaintShop Pro X:

1. Open the image you want to make clickable.
2. Display the web toolbar (View > Toolbars > Web).
3. Click the Image Mapper icon .
4. Create the regions, and add the URL links.
5. Save the image and the associated HTML file, ready for use in your web pages.