We love launching new websites for companies and it’s great to be able to give them full control over updating their own sites. Adding news articles, case studies and updating text are things that ideally can be done in-house very easily. When it comes to adding images though, things can get messy!

Here at Gravity, we’re often phoned to help ‘fix’ a website after being updated by a client. “It takes ages to load” or “the image is really blurry”. And recently, “I set some images to upload overnight and they haven’t even got halfway this morning”. Hmmm. I can guess what the problems are straight away, but then I’ve been using Photoshop since version 1 (there was only one undo step – it was a nightmare!).

Okay, I know I don’t look that old (no Photoshop expert does) but here are a few tips to help you with getting the best results for your website that I’ve picked up over the last couple of years (or so) and remember, you don’t only have to use Photoshop (see below for alternatives).

Crop, Resize

Cropping the image is the first thing you need to do. It’s hard to teach but here are a few pointers:

• Crop out unnecessary details to redirect focus to the subject.
• Don’t always centre the subject and don’t forget the rule of thirds. Most cameras and image editors have a Rule of Thirds guide built-in. You can also experiment with rotating an image to produce a more dynamic composition.

• For a series of photos, keep your cropping consistent.
• Don’t try to fit a portrait photo into a landscape space and vice versa. Just have a new photo taken – it will look much better.

When it comes to replacing or adding a similar image, you can easily find the size of an existing image on your website by right clicking and viewing the image properties in your browser.

Make sure you save the new image at this size to avoid any problems. Most programs allow you to set the image size in pixels (both width and height) so you can crop and resize in one go. Just don’t forget to work on a copy in case you need to revert to your original version.

Adjust levels and sharpen

At this point it’s also a good idea to check the colour levels and sharpness of the image. If using professional photography then you should only need to use the ‘Sharpen’ filter. It can make a big difference…

Saving images and reducing files sizes

It’s so important to compress images when saving them for the web. It’s important for visitors, who will only wait a few seconds before going elsewhere, and it’s important for Google. Large images are the number one cause of slow websites and if your web site is slow to load, it won’t rank as highly as some of your competitors.

If using Photoshop, when you’ve cropped and resized the image, use the File > Export option and select ‘Save for Web’. In this window you can select the file type (more below) and select the quality. The lower the quality, the smaller the file size (which means it loads faster). Don’t reduce the quality too much though, otherwise the image won’t look great. Experiment with each image to get the best compromise between quality and size.

Choosing a file type. JPEG, PNG or GIF??

As a rule of thumb, use jpeg’s for photos and PNG files for things like logos and graphics. Jpeg’s use ‘lossy’ compression, meaning the image quality is reduced as the file size decreases. PNG files come in either PNG-8 (which is 256 colours – the same as GIF files but when saved are even smaller) and PNG-24 which have lossless compression (but for most images are larger file sizes than Jpegs). PNG-24 files can use transparency though, so are great if you want to overlay an image onto an existing background.

Lower quality = smaller file = faster loading. Higher quality = bigger file = slower loading times.

Photoshop alternatives

There are lots of free applications and online services you can use to resize images. A great open-source one is called GIMP (Google it. No, sorry don’t – just go here: https://www.gimp.org/ it might be safer) or search for ‘Resize images online’. There are 1000’s of options.

Canva can also be used to resize images especially when being used for social media posts, emails or specific file sizes.

If you’re responsible for keeping your website updated, there really is no excuse for not converting and saving your images at the correct size. If you’re a technophobe or just simply don’t have the time to alter your images, get your photographer or marketing agency (or even your kids!) to supply you with web ready images.

Just remember, photography can make or break a website – literally.

SSL stands for Secure Sockets Layer, a security method which allows for the encryption of data when being transferred over the internet. TLS (Transport Layer Security) is an updated, more secure, version of SSL. We still refer to security certificates as SSL because it is a more commonly used term.

Typically, when you submit a form on a website, the data is sent as plain text which potentially leaves you and visitors to your website vulnerable to hackers. SSL/TLS certificates help to protect the transfer of sensitive information, such as personal data and credit card details, by encrypting it during transmission between the user’s browser and the web server.

Having an SSL certificate is your way of telling visitors to your site that their information is safe with you – an excellent way to boost trust. It’s a level of web security that isn’t just “nice to have” anymore – SSL encryption is essential for boosting security for your website users.

How do I know if a website has an SSL certificate?

The easiest way to tell, is to check the URL in the address bar. Websites using SSL always start with HTTPS as opposed to the unsecure HTTP. Depending on the browser you’re using, there are also other visual clues like a green padlock, as shown below in Google Chrome.

Other than improved security, are there any other benefits?

Yes. If you’re an online business, there are other benefits too in using HTTPS instead of HTTP:

Improved SEO and Search Engine Rankings

Search engine optimisation (SEO) helps your website climb to the top of Google’s search results. It’s a combination of optimal web design, site content, keywords, speed, links and security. Google announced (back in 2014) that it would give a higher preference to websites that have an SSL certificate installed. Using HTTPS can increase your rankings in the search engines.

Improve online sales

If you’re selling online, then increasingly your shoppers will check to see if you have SSL. Without it, they might not even stay long enough to see what you have to offer. Having an SSL increases your chances of gaining and retaining customers who come to your website.

Google has recently announced they will be flagging websites without SSL certificates in their Chrome web browser. If your website visitor is using Chrome and visits your website, they may get a message stating that your website is not safe. This is a big turn off for people – nobody wants to risk sharing information online if they’re not sure it’s secure.

How do I get a SSL Certificate on my site?

Purchasing and installing an SSL certificate has a small cost associated with it, and the certificate needs to be renewed each year. If Gravity Digital produced and/or host your website, please get in touch with us and we can set up an SSL certificate for you and look after ongoing renewals. You can also order online here.

If you have a website that has been built by another web design company, get in touch with them and ask them to install one. Alternatively, if you’ve built your own site, get in touch with your hosting company.

If you are thinking about having a new website, then make sure you get an SSL certificate in place for the launch.

Please feel free to get in touch if you would like any more details.