Tools Used In this Recipe
A cloud-based image editor with a generous free tier that's useful for cropping and cleaning photos and images, as well as extracting elements of Photoshop and Illustrator files.
Automatically optimize the file size of images to reduce download time.
A comprehensive library of brand-related images is an incredibly valuable asset for any early-stage startup. When you hire a designer to develop a logo and brand kit, you'll get a good foundation. But many founders find themselves needing to submit an image to a new social media platform or as part of a PR article, and the size and format of the image requested isn't a match for any of the images they have available. A good visual designer can help solve this issue for you, but hiring one can be costly and outsourcing takes time. As a founder if you can develop some basic image editing skills, you'll save a lot of time and money for other initiatives. In this Recipe you'll do some basic image editing and touch-up with the free online editor Pixlr, and you'll use Squoosh to reduce the file size of your images so they can be used on the web without causing your pages to load slowly.
The most critical thing to know when deciding to use a self-service tool for image editing is when not to use one (and to hire or contract for a visual designer instead. If you need to do any of the following:
- Extract or crop part of an existing image from a larger image
- Export an image that follows a core geometric shape (square, rectangle, circle)
- Use your finished image on the web
- Convert between file formats
- Enhance the image, or convert color to black & white
A self-service image editor might be all you need. On the other hand if you need to do any of the following:
- Export your finished image for use in print (packaging, display banners, trade show booths, magazine ads, etc)
- Combine two or more images together
- Export a non-standard shape or one with irregular outlines
- Convert a black & white image to color
You're better off hiring a designer to help.
Image Cropping and Touch-Up with Pixlr
Pixlr is one of several online image editors that offers basic image editing options using only a web browser. To get started, navigate to its website. Once you're there, find and click the button for Pixlr X:
Next click Open Image to select an image from your computer. Select the image you want to edit. Once it loads, it'll be available in the Pixlr image editor On the left you will see a list of Pixlr's built-in tools, and in the center you will see your image. Navigate down the left side until you find the tool labeled Crop & Rotate, and click it.
To demonstrate a common use case, we'll demonstrate how to generate a version of the Startup Recipes image shown in the editor that fits the Facebook page cover photo guidelines. Per Facebook's documentation we need an image that is 820 pixels wide by 312 pixels tall (for desktop). The image we have is 1080 pixels wide x 1080 pixels tall.
To make sure we get our cropped image centered properly, the first thing we'll do is resize the image. Click the > Select aspect option, then click Size. Now adjust the Width and Height options here (not the ones in the upper left) to 820 pixels.
Click Apply.
Now click Crop & Rotate again. The values for Width and Height in the upper left will show as 820. Now click the value for Height in the upper left and set it to 312. The guide bars will adjust to show a highlighted section at the top of the image. Click and drag the highlighted section until it's centered on the content you want to highlight.
Now click Apply. The image will be saved in an aspect ratio and size that is optimized for use as a Facebook cover photo. Click Save to download it to your computer.
Change the filename if you wish. Leave the values under Quality as-is. For this type of image you want to use the JPG file type, but if this were an image with a transparent section you would want to use PNG. Now click Download. The free version of Pixlr has some ad support in its downloader, but that shouldn't interfere with you getting your file.
Optimizing your image with Squoosh
In the Pixlr save dialog above you saw an option for image quality. Visual compression algorithms are designed to provide options to trade quality of the finished output with file size. The higher-quality the finished output, the larger the file size, and inversely the lower-quality the smaller. It's very difficult for someone without experience working with images to know how low they can set the quality without end-users noticing. Squoosh is an app that does a great job of making that judgement for you. To get started, visit the app at https://squoosh.app/.
The interface is extremely simple. The only option is to click to load an image from your computer (you can also drag and drop or copy/paste one). Once you have loaded your image, Squoosh shows you a before (on the left) & after (on the right) view and the file size difference between the two.
The bottom of the screen shows the original file size, 51.7 kB, and the recommended 46% reduction in file size, to 28kB. If you click and drag the center bar left and right you can see how different the image looks between the two versions. If you prefer you can try adjusting the quality slider lower to see if you can gain more file size reduction without sacrificing quality, but our experience suggests that taking the default is a fine option in almost every case. When you are finished, click the download icon in the lower right to download the optimized version.
The contents of this Recipe are © Innovation Works, Inc. and are licensed under CC-BY-SA 4.0 . Contact us with questions or feedback, or to learn more about our structured program in Entrepreneurism based on Startup Recipes.