Working with
Images
Updated for 2020
In the last Tech Talk we looked at sourcing images for your website. We went through quite a few options there so by now you have probably gathered a bunch of photos and you’re wondering what is the best way to get these images up on my site. You could just upload them, but I like to pre-process my images before I upload them to a website. The main reason for this is performance, but design also factors in. You need to be thinking about the design of the page, or the header, footer or whatever element of your page you’re working on. This will take some time as you try things on for size and see how they look. This gets tricky because you will also want to crop your photos. Maybe you only really need a portion of the image you’ve downloaded. It may have been a landscape oriented photo, but you need to crop a section of it so it’s oriented as portrait to fit into your design. In the end, the image that you upload should be at the final dimensions that it will be displayed on your site. If the image you upload is smaller in pixel dimensions than the final display size, the result will be a blurry image. Not good. If the image you upload is twice the size of the final, it won’t be blurry, but it also contains 4x more pixels than required so the size in bytes will be larger and it will take more time to load the page. Also not desirable.
Ideally...
you want the smallest size in bytes that you can get while still maintaining the pixel dimensions. This is where image compression comes into play. If you are using jpeg images as most would be, then you can adjust the quality level of the images. Usually when you adjust the quality level of a jpeg image you can significantly reduce the size in bytes, without much noticeable difference in image quality. Each image will vary, but in my experience, setting the quality level anywhere from 70% to 80% is acceptable and reduces file size (in bytes) a lot. You also need to consider where the image is being used. If it’s a background image, maybe you can get away with a lower quality setting which results in a smaller file size and faster page load times.
Which software or app should I use?
That depends on your needs and will vary greatly for each individual. If you are a very creative type and need to combine images and graphic elements to create a visual that is completely unique, you may want to consider some stand alone software. There are some suggestions towards the end of this article. If on the other hand, you simply need to be able to crop, resize, adjust levels and such then you can probably work with one of the many online services. I will cover a few here.
Working with
Squoosh is a simple app that is easy to use and does a great job of optimizing images for the web. Open the app in your web browser, then simply drag your image onto the app. You will then see a split screen showing the original image on the left, and the optimized image on the right, along with some controls so you can adjust the settings, resize the image, change the compression. It will show you the final image size in bytes, so you can adjust things and see how they will affect the final size. Then just click the download button in the lower right and you can now upload the optimized version to your website. Easy peasy.
Working with
Pixlr is another option that gives you a little more control over the actual adjustments to your image. After opening your image you will see a toolbox down the left side. If you have ever worked with image editing software the toolbox should look familiar. Hovering over any of the tools will offer a tooltip as to what each tool can do. When you are happy with your adjustments, you can save and will see options for quality setting where you can make some final adjustments and see the end file size in bytes.
Stand alone software
If the options above didn’t satisfy and you need ultimate control when you are editing your images, then you may want to consider one of the options below. These are serious tools that can deliver professional results, if you invest a little of your time to get up to speed and fully understand the potential each has.
Adobe Photoshop
There are many options available but probably the best known is Adobe Photoshop. It's used by many professionals and has many more options than what I've listed here. Photoshop runs on both Windows and Mac, but if you're on Linux you might have to jump through a few hoops to get it working. You can get a subscription to use Photoshop for about $9.99 US per month so your initial outlay to get the software is small, and you won't need to worry about upgrades if you're on a subscription as they are typically covered. The downside to that is that is that you need to keep paying even if you aren't using the software every month.
Affinity Photo
Another option would be to buy a product with a one time fee where minor upgrades are free. Affinity Photo fits the bill here. It runs on Windows, Mac and IOS devices. It's a really well thought out program, loaded with features. It has a pretty modest price tag too ($69.99 CAD), so it won't break the bank. One of the features I really like about this program is batch processing - need to resize an entire folder of files and apply some custom filtering to them? No problem, set it up, save them with new file names, or in a different location and click Go. Done. Affinity uses a non-destructive approach to things so if you need to undo one step you took 10 minutes ago, you simply undo it. Smart.
GIMP
FREE! Did that get your attention? GIMP has been around a long time and you can download a free copy for Windows, Mac or Linux. It is a fully featured program and there are many online resources and user groups available to help guide you in using the program. It has more than enough features to handle anything you are likely to throw at it. GIMP is open source software so support will be limited to what you find online, but you shouldn't let that scare you off. It's worth a look.
There are many photo editing packages out there with fewer features, but when you can get professional quality software why spend time learning one of those just to save a few dollars. Another thing to consider is the wealth of knowledge that you can find online for any of these higher end packages. Lesser software won’t have the following that these packages enjoy.
I encourage you to give one or all of these a test drive and see which one you like the best. Look around online and see what learning resources are available. You will be amazed at what you can do.
In a future post, I will be taking a look at some of the different online image composition tools, such as Canva, PicMonkey, Design Wizard and Piktochart. Stay tuned.