Category: Technical Know-How
How to add website images correctly
You want your website to look fabulous and work beautifully too, right? That’s why it’s really important to use the right size website images for the right purpose.
Image size
For screens, the measurement that matters is pixels, and measures the height and width of your image.
For website images, think in terms of width.
The maximum width you need for a full-screen image – such as a Hero Image or background image – is 2500px.
The width you need for an image within a page is 500-1000px.
Think about where you will use the photo before re-sizing. A small image will be pixilated if it displays larger than the actual size, so don’t over-reduce your website image.
A large image can be displayed smaller, but your page will load more slowly if it is unnecessarily large – a website no-no!
File type
Using the right file type for your website image is essential. The file type might be different for printed material.
JPEGs are best for website photos because:
- JPEGs support 16 million colours;
- JPEGs can be compressed in a way that means your file size can be smaller without losing quality – important to make sure your website doesn’t load slowly
JPEGs aren’t good for text on images because the compression method means that the text edges can be blurry.
PNGs are best for website graphics because:
- PNGs use a limited palette of colours with great vibrant colour depth;
- The limited colour palette means that file sizes can be tiny – great for your website;
- PNGs can also be transparent, which is ideal for logos and favicons.
Although you can save photos as PNGs, the file size would be enormous, so unsuitable for websites.
Compressing image
Large images are the biggest reason that websites load slowly.
And, given that people leave a website if it takes more than a few seconds to load, you need to make sure that all the website images you use are as compact as possible.
What is file size?
File size is measured in bytes – KB or MB (1MB=1000KB).
The maximum file size for a website should be 1MB. Your media library may allow you to load larger files, but your images won’t look any better, and your website will be slower.
Typical sizes
If you take photos on your phone, a photo can be 5MB or more. If you use stock images e.g. Unsplash, photos can be as bit as 8MB.
Therefore, you need to reduce the file size by reducing the pixels and compressing the image.
3 great apps to compress website images
Optimisation = compression.
ImageOptim (for Macs) – drag in image(s), and optimization happens automatically.
FileOptimizer (PC) – drag in image(s), and click “optimize”.
Photoshop: open image, then click “File > Save for Web”.
Our support is second to none, and, if you buy one of our website packages, we will make sure you know exactly how to make your website look and work beautifully.
Website Photography Tips: Using Natural Light by Katie Vandyck
Transform your photography skills by following a website photography expert’s top tips – Guest Blog by Katie Vandyck, of Katie Vandyck Photography
Your website photography will improve immediately if you take advantage of natural light, so try and take your photos on a sunny day.
Website Photography Tip 1:
Place the object you want to photograph in the shadow area next to the brightest spot you can find.
Let’s have a look at these keys. This bunch of keys present several challenges to photograph: the shine of metal, the range of materials and the numerous bright colours. Bright sunlight is too harsh, and solid shadow is too dull.
The extreme contrast of bright sunshine is unattractive, it washes out colour and exaggerates flaws.
For a better result, place your object in to a shadow area that’s directly adjacent to a patch of bright light.
Website Photography Tip 2:
Place a reflector next to the object on the shadow side.
To give your photos extra glow, put some reflecting material, white paper or card on the shadow side of the object.
What happens when you use reflecting material?
- Light spilling into the shadow area from the the bright area is then reflected back into the shadowed area by the white reflector.
- This reflected light lightens the darkness/shadows on the side furthest away from the bright light.
Result: rich colours, and metal that has a soft sheen.
Here’s another example using a pot of coriander:
Bright sunlight, which is harsh and drains the colour.
The pot is in shade, with a reflector balanced alongside.
Final photograph.
The combination of diffused light and a white reflector makes the coriander look much more appetising than when it’s lit by direct unfiltered sunlight.
Now I’ll show you through some examples of website photography using natural light.
Example 1: Photographing food in natural light
Food will look much more vibrant and appealing with diffused natural light.
The photos below were all shot beneath the perspex roof of a courtyard at the Italian restaurant, which immediately diffused the bright sunlight. The reflectors on either side of the food reduce any shadows and allow the wonderful colours of the food to come through.
Sunlight through the perspex roof, combined with reflectors on either side of the food, soften the shadows.
The bright, diffused light from overhead is particularly good for food, making everything look fresh.
The closer you move the reflectors towards the food, the softer and more appealing the light.
Insider tip: I used insulation tiles as my reflectors, propped up by whatever came to hand.
Example 2: Photographing silver jewellery in natural light
The challenge with photographing jewellery is to capture the detail of the craft.
The first shot is in bright sunshine. It looks a bit cheap and garish – more of a snapshot than a photograph.
It’s a very sunny day, so I made a makeshift structure from wire and grease proof paper – essentially a homemade light tent.
Earrings inside light tent.
Shot from above, the silver glows, and the details are gently rendered. And it’s always worth trying out different backgrounds for one shoot.
Example 3: Photographing pottery in natural light
Strong sunshine coming through a window creates a bright shadow. I’ve used a sheet of coloured card as a backdrop.
I placed the pottery inside the shadow. I then placed a polystyrene tile on the shadow side of the pot, seen on the right of the photograph.
Result: a soft but directional light bringing out texture, allowing a richness of colour and luminescence.
Copyright: Katie Vandyck Photography 2020.
Check out our blog for more useful tips on websites, or get in touch if you have any questions.
How to clear your cache (and why would you?)
One of the oldest computer support suggestions (and one that quite often works) is, “Turn it off and then turn it back on again”.
(If only we could do that with the real world).
When someone is trying to work on their WordPress website and can’t log in, the first thing I will generally suggest is that they clear their caches. Most people haven’t a clue what I mean, so I will explain in this blog.
A brief history of browser caches
In the olden days before we had fast broadband, it took ages for big files on websites to appear on our desktop browsers. So the browser designers decided that, when a website had information which appeared on several pages, a copy of the information from the website could be kept in a cache on your computer. It would then be much faster to use that cached copy rather than download it every time for every page.
The whole caching idea is really clever. Unfortunately, it can cause glitches when the caches display old versions of files that have since been updated on the website. So sometimes we have to delete all the old files and start again – ie – clear the caches.
Reasons why you need to clear caches
Logging in to your website can be affected by caches because you might be logging in to a cached page, rather than a live page.
If you are updating your website, you may not see changes you have made, such as changing colours or fonts.
How to clear a cache
Below I have listed some of the most common browsers – If you can’t see yours, get in touch with details of your browser and I will add details or send them to you.
To clear caches in Chrome:
On Mac – Click on Chrome in the menu bar (otherwise click the three dots on the top right of the browser window and go to settings, advanced, privacy and security, clear browsing data)
Next – Click on Clear browsing Data
Make sure you have ticked the boxes you want to clear (at least cookies and cached images and files) then click on “Clear data”
To clear caches in Safari:
Click on Safari in the menu bar
Next – Click Preferences
Click on Advanced and tick the box at the bottom that says “Show Develop menu in menu bar”
When you click on Develop – you will see “Empty Caches” – simple as that – go ahead and empty caches.
To clear caches in Firefox
Click the menu button (at the top right of the window) 
and choose “Preferences”.
Select the “Privacy & Security panel”.
Scroll down to the “Cookies and Site Data” section, click “Clear Data”
On the next screen, tick both boxes then click on “Clear”
To clear caches in Microsoft Edge
In the top right, click the three dots.
Next – Click Settings which will open a new page and on the left click on Privacy and Services
Click on Clear browsing data – tick Cached images and files (you may also need to tick Cookies and other site data) then click Clear Now.
Any questions? Get in touch. We love sharing our knowledge.
Using Gmail to access all of your email accounts
If you have a Gmail account you can use it to check and send your emails from other email addresses.
Having a dedicated email address with your own domain name – like hello@bright.website.flatwhitemultisite – is essential for any professional business. But it’s another item on the ever-growing To Do list to check every account separately. Setting up your emails to arrive in a single inbox means that you won’t miss anyone that gets in touch with you.
Here are step-by-step details on how to do this for your own emails.
To avoid confusion on which email accounts I am talking about, I will call the account you are using to view all the different emails your primary account and the added one your secondary account.
- Click on the “cog” icon at the top-right of your primary Gmail window:
- Click on Settings:
- Click on the “Accounts and Import” tab:
- In the section labelled “Check email from other accounts:”, click on “Add an email account”:
- A new window will open, prompting you to “Enter the email address that you would like to add” so here you add your secondary account e.g. jobloggs@yahoo.com:
- When you click “next” you will be taken to another window and depending on the email domain you will see one of two options – if option 1 (Link accounts with Gmailify) is available (this will only be enabled if your secondary account is with Yahoo, AOL, Outlook or Hotmail), then use it to continue and follow the steps to link the account.
- If Gmailify is not available – you will be told and option 2 (Import emails from my other account) will be enabled – click “Next”:
- This will take you to a new screen:
- “Username” should be the one you used to set up the secondary email account e.g.”jo.bloggs”. If it doesn’t work with the username, put in the full email address e.g.”jobloggs@yah.com”.
- “Password” is the password for the secondary email account.
- The provider should have a Help Page detailing POP/POP3 Server settings (Step 12), Port number (Step 13) and SMTP settings (see Step 22 below.)
- POP Server depends on the email provider (e.g. Yah.com, Yahoo.com, Live.com). They will often be in the form of “pop.yah.com”, “pop.mail.yahoo.com” or “pop3.live.com”.
- The Port used for secure message connection is 995. (Some old email providers still use unencrypted emails, which require Port 110, which we don’t recommend.)
- If you use more than one device to retrieve your emails (phone, laptop, desktop, iPad), I recommend ticking “Leave a copy of retrieved message on server”. If you only ever retrieve from one place (e.g. just your phone or just your desktop), you can leave the box unticked, and your emails will only be available to you in your primary Gmail account. If you are adding another Gmail account, Google sometimes stops you from leaving copies – not sure why.
- If you have used Port 995 in Step 13 (very strongly recommended), tick “Always use a secure connection”.
- If you want to be able to tell easily which address email messages are coming from, tick “Label incoming messages” – Gmail will then add a label to the left-hand-side of your screen.
- If you tick the “Archive incoming messages” box, messages will be routed to the label only and not show up in your general inbox.
- Click “Add Account”.
- You will now be offered the opportunity to send emails using the secondary email address you have just added, which we really recommend:
- Click “Next”, and you will be taken to another screen:
- Here you are asked if you want this sending address to be treated as an alias. I generally tick the box but there is a very useful article by Google that explains the options clearly. I generally ignore the “Specify a different reply-to address”. Click on “Next Step”, and you will be taken to the next screen:
- As in the POP/POP3 settings detailed in Step 12 above, the SMTP server depends on the email provider. The provider will have a Help Page detailing SMTP settings – they will often be in the form of “smtp.gmail.com” or “smtp.live.com” or “smtp.mail.yahoo.com”. The Port used for secure message connection (recommended) is 465. Fill in your Username and Password, click “Add Account”, and you will be taken to this screen:
- Check for your confirmation email, which should now be in the inbox of your primary account. Either click on the link in this email, or copy and enter the verification code in the box and click on “Verify”.
- Congratulations – you can now receive and send from the added (secondary) address in one Gmail screen!
- One more thing – when you click on the compose button to send a new email message:
There will be a dropdown arrow to the right of your default email address in the “From” field which will show you all of the “send as” options
HAPPY EMAILING! Now – back to our other useful blogs