The Tribune

The Art of Graphix

By Deidre M Bastian

If you have a blog, online store or regular website that you want to look amazing, it pays to optimise each image that is uploaded. We can look at this in three ways: Making images look good; making images load quickly; and making images easy for search engines to index. Most posts go over one aspect of optimisation or another. However, it is best to start with high-quality images.

Stock photography

You do not have to be a professional photographer to use great images on your website. It seems that there are more high-quality stock photo sites, where you can download free photos for commercial use, emerging every day. Some of my favourites are: Pixabay, Unsplash, Barn Images, PicJumbo, SplitShire, Little Visuals and with a Jimdo website. Free stock images are also available in your image library.

When an image is downloaded from one of these websites, it will likely be a really big JPEG file. To compress it for website purposes, you need to reduce the size and upload a smaller version. Starting with a large format is ideal because we can always make a large image smaller. (Making a small image larger does not work so well).

There are a few easy tricks to making images look well-lit and professional, even without a fancy camera. If you are looking for something more graphic-based, there are tons of new, free online tools that can be used to build your own infographics or photos with font overlays. Always use the right file type: JPEG or PNG. If you are considering different image files such as JPG, PNG, GIF and SVG, just know that on your website you are most likely to use a JPEG (JPG) or a PNG format.

Photographs should be saved and uploaded as JPEGs

This file type can handle all the colours in a photograph in a relatively small, efficient file size. By using JPEGs you will not end up with the enormous file you might get if you saved a photograph as a PNG.

Graphics, especially those using large, flat areas of colour, should be saved as PNGs. This includes most designs, infographics, images with lots of text in them, and logos. PNGs are higher quality than JPEGs, but typically come with a larger file size, too.

Like their relatives, the SVG file, PNGs deal with areas of colour and text with nice crisp lines so that you can zoom in and not lose any quality. They also support transparent backgrounds (which you will want if you are using a logo). If you have a choice, I recommend saving PNGs as “24 bit” format rather than “8 bit” because of the better quality and richer array of supported colours.

What if you are using a photograph with text over it? 

If most of the image is a photograph, then stick to a JPEG. Most simple image programs let you choose JPG or PNG by going to “Save As”, “Export” or “Save for web”, and choosing the type you prefer. There are also free browser-based online tools such as Zamzar that will convert files for you.

You can convert a PNG to JPEG, but you do not gain anything by converting a JPEG to a PNG file. That is because a JPG file is already stored in what is called a lossy format, meaning the image data has already been lost when it was compressed, so you cannot magically bring it back. For example, if you only have your logo as a JPG you will need to go directly to your designer and ask for a PNG file from their original design program, rather than trying to reverse-engineer a PNG from a JPEG file.

Resize images to optimise page speed and appearance

With web images, you want to find the right balance between size and resolution. The higher your resolution, the larger the file size will be. In the world of print, high resolution images are a good thing. But on the web, large size, high resolution images can slow down your website’s page speed. This hurts your users’ experience and, eventually, your search engine ranking. Big images and slow load times are especially annoying for mobile visitors.

There are times when you will want to use large images on your website, such as for your background or hero image. If you use low-quality images and try to blow them up to be big enough, it will look fuzzy. So, how do you strike the right balance between size and quality? First, it is important to understand that when it comes to images, “size” is a relative term. What you need for print is usually much larger than what you need for a website. Here is an overview of the three main aspects that make up “size”.

• Optimal file size: The number of bytes the file takes up on your computer. This is the factor that can slow your website way down. A 15 MB (megabyte) image is huge. A 125 KB (kilobyte) image is much more reasonable. If your file size is really big, it is an indicator that either your image dimensions are too large or the resolution is too high.

• Image size: The actual dimensions of your image, in pixels. You probably think of traditional printed photos as 4×6, 5×7, or 8×10. But on the web, the height and width are measured in pixels. So, for example, a typical image on a website or blog might be 795 × 300 pixels.

• Resolution for web images: Left over from the world of print, resolution is the quality or density of an image measured in dots per inch (dpi). A professional printer might require images to be at least 300 dpi. But most computer monitors display 72 dpi or 92 dpi, so anything higher than that is overkill and makes your image unnecessarily large. When a design program has the option to “save for web”, it means saving it at a low, web-friendly resolution.

How do you find the file size, image size and resolution of your image?

You can find it by right-click on the image file, choose “Properties” and then the “Summary” tab. On a Mac, Ctrl+click on the image file and choose “Get Info”.

Finding the resolution requires a more advanced photo program such as Photoshop, but most basic image editing programs will automatically save images at a lower, web-friendly dpi that is a better resolution for web images. If you have the option, always “ Save for web”, which will give your image a web-friendly resolution. You can make a large image smaller, but it is very hard to make a small image bigger. If you think about it in terms of volume, you cannot make a gallon of water fit into a swimming pool.

What do you do if your image is too big for your website? Reduce the resolution. Most photo programs will automatically compress your image resolution to a “web-friendly” size (72dpi and 92dpi, respectively). You can do this in Photoshop, too, with the “save for web” option. Compress your image with a free program such as TinyPNG or TinyJPG. Both will significantly reduce your file size without interfering with the quality.

When your images load faster, your website mobile app’s user experience is enhanced, and also metrics such as time on site and conversion rate. However, to make your images load faster, you want the size to be as small as possible, and you want good caching and delivery architecture.

The reason why you should resize images if you plan to load them to the Internet for display on a web page, or for inserting into a presentation, is that image file size matters. On the web, the larger the image size, the longer it will take the web page to load. For users who have slower connections, this matters a lot. Image size also matters a lot when you insert images into presentations such as PowerPoint, because if you keep the image at its original size and insert 10-20 images into your presentation, your final PowerPoint size will be huge.

If you do not change the image size in a photo editing application before inserting it into a PowerPoint presentation, and you have 10 photos in the presentation, this will make the presentation file size large for an e-mail. It will also take a long time to upload. Until we meet again, fill your life with memories rather than regrets. Enjoy life and stay on top of your game!

NB: Columnist welcomes feedback at deedee21bastian@gmail.com

ABOUT COLUMNIST: Deidre M. Bastian is a professionally-trained graphic designer/ marketing co-ordinator and certified life coach with qualifications of M.Sc., B.Sc., A.Sc. She has trained at institutions such as: Miami Lakes Technical Centre, Success Training College, College of The Bahamas, Nova Southeastern University, Learning Tree International, Langevine International and Synergy Bahamas.