Image Management Strategy
Most business owners with websites (and sadly many web designers too) don’t understand the importance of image size when creating content on a website.
Straight out of a camera, images are massive files. Great for printing, enlarging etc. but far too big and heavy for a website, which needs to be lean and thin to work properly.
On any website, data is your enemy. The less data required to render a page, the faster you can transmit the page anywhere in the world in a fraction of a second.
How long do you wait when a website you want to look at won’t load? The rest of the world can’t be bothered to wait either…. so compressed images are essential.
WordPress Image Compression
Images will have a huge impact on your sites performance. By default, WordPress uses image files just as you upload them.
This makes it quite common to see slow loading sites waiting for massive file size images to download.
There are several ways to reduce the file sizes of images.
You can use one of the available plugins to crunch files once you have uploaded them to your server. We like Smush & TinyJPG but there are others.
Alternatively, you can compress images for the web before you upload them.
There are several advantages to this approach.
We use Photoshop to compress images and graphics so they are web ready. One advantage is that image compression plugins can sometimes fail.
If a plugin were to become incompatible with your version of WP or your MySQL database version, or your PHP version your server is running then all your plugin compressed images will revert to full size.
The consequence of this is that your site will slow down, causing Google to reduce all your rankings and you will lose traffic.
Compression of your source images removes this issue, permanently.
Blog Post Images
It’s quite common for web designers to spend time and effort setting up all the pages of a website to work quickly, only for the website owner to create new content on the blog, uploading massive images onto their posts.
It doesn’t take many posts with massive images to slow most sites down.
If for example you have a ‘Recent Posts’ section on your home page then your massive images will be copied there, slowing down your home page too. Before you know it, you’ve undone all your web designers hard work optimizing your content.
There is a solution….
There are 2 elements to making images website friendly.
- The image size in Pixels
- Image file size
Image Re Sizing
Images from modern digital cameras often have a standard size of 4000 x 3000 pixels. Perfect to blow up or print, but far from idea to transmit across the internet.
The vast majority of users online rarely use a screen size wider than 1400 pixels. Uploading images wider than this is just wasting data and loading up your website with data you don’t require.
Unless you need people to be able to download a high resolution version of the image, do not upload massive images.
Resizing images is quite straightforward.
We tend to use Adobe Fireworks, but there are many different methods you can use to resize your images.
One good free online tool is https://resizeimage.net/ which works well.
Once you have resized all your images, the next step is to crush them to remove excess unrequired data.
A standard 4000 x 3000 pixel image may be around 8 – 10 mb in size.
Cropping to 1400 x 1000 will reduce the file size down to around 1 – 1.5 mb. This is still 10 – 20 x larger than we ideally want it to be.
The target maximum file size for a full screen width image on a page should be 50kb.
Google rank websites based on their mobile load speed on a 3g connection. This requirement means that the maimum data size for a complete page is 100kb. Assuming you want it to perform on Google of course?
For images that are only half width or a 1/3 the width of the page, file sizes can be compressed to 15 – 20kb or less.
Logo’s in your header are generally only a few hundred pixels wide and often only 50 – 100 pixels high, can be compressed to less than 10kb. The less the better. For your logo, a gif of less than 1kb can be used in many instances.
Simply upload your image or images and ech site will automatically choose what it thinks is the best compression level for your image.
Click on the image and you will open a settings section where you can pull a slider for more compression and review the image quality before applying the compression you selected and downloading back to your pc again.