One of the mistake many website design people make is to upload a photo to their website, without resizing it – image resizing and optimisation is everything. Let’s say it’s a website for a plumber, or a gardener, and you want to show some work that you have done. You’ve taken a photograph on your phone or tablet, and you upload to your PC to add to the website.
The photo might be 1920 pixels wide, or even wider. Let’s say it is 3000 pixels wide. Looking at it on your phone or PC you might not notice it’s really large, but for a website, unless you want the user to zoom into it (for details – such as a product photo), 3000 pixels is far too large.
But none the less, you don’t notice and you upload that large photo from your device to your website (which maybe on WordPress, Yell, Wix, any number of templated systems).
The problem there lies with uses loading it on your PCs or moreso, on their phones. You may notice images sometimes “draw down the screen”. They load slow, and you see it almost like by line. This is because the image is so large. If the website is 1920 pixels wide, or 1100 pixels wide, but the image will only be show for about 2/3s the width of the page, it needs only be around 900pixels. This could be around 150-250kbs in size. Yet yours might be 3-5mb!
You are now giving the user a 3mb image to load up in a smaller 900 pixel wide area, entirely unnecessarily. It’s bad for SEO (slow loading page), bad design (you haven’t cropped or resized it), and is just lacking in due care.
Image Resizing and Optimising, the 79DESIGN way
When we use a photo on a website, if it’s designed for one space on the page, we ask a few questions:
- will it be full screen on a phone?
- will be be full screen on a desktop?
If the answer to 2. is Yes, then we set the size of the image to be as near as that width as possible (if a touch more).
If the answer to 2. is No, yet 1, is yes, then we set the size to be roughly 750 pixels wide, as that will fill most mobile devices, and be suitable for the Desktop. But if the desktop version is wider than that, we set it to the desktop width, and the mobile will take care of the rest.
We NEVER add massive images where they are not necessary, particularly on a homepage. We even have custom websites where there are sliding banners for desktop, but an entirely different set for mobile, for speed of issuing them, but often because a taller image looks better on a mobile than a shallow wide one.
Care and attention with image optimisation
We take great care with Image resizing and Optimisation. We’ve had websites where the homepage image is set from the Page that it looks to. So the image uploaded was very large. But it wasn’t ever seen on the Page, only the Homepage, so we reduced it by more than HALF, so the homepage loaded way quickly.
Time, care, attention, thought and a bit of extra passion makes the job a worthy one.