Tech Talk

Working with

Images

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 slightly less quality.

What image editing tools should I use? If you’re just wanting to be able to manipulate images for publishing on the web, then your needs are pretty modest and you don’t necessarily need to pull out the big guns. You need some sort of editing software that will at the very least allow you to work with png, jpeg and gif images to resize, crop, rotate, flip. Other features your software should have would include adjusting contrast, brightness, levels, and filtering options to remove noise.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *