The following is covered in one of my video tutorials. Check video tutorial 7 for more details.
Some people are uploading images to their sites straight off of the camera or iphone. Firstly, well done for adding visual content to your sites. This is absolutely the right thing to do. However be aware of the following limitations and the impact they can have on the hosting and on your users.
An image displayed on your website is limited in size to the space available for it. Generally I advise 610 pixels wide unless it is in a gallery, then it can be larger so 1024 pixels wide might be ok. This means you need to scale down the size of your image before it is displayed on your site.
Why?
The website is set up to display an image in the available space on the page or in the gallery. If the image is 5000 pixels wide, it is reduced to 600 pixels wide in the browsers rendition of your website. So there is no value in sending a 5000 pixel wide image for a space that is only 600 pixels wide. (A pixel is a picture element or small dot that can represent one of 24 million colours, the screen you are looking at has millions of small dots).
When you go to a website and the images appear very slowly, this is a sure sign that the developer has not scaled the images down in size.
Implications of not scaling
1) Firstly your website will continue to work, but the images will render very slowly. This is because you are downloading a 5MB file before the image can be presented in the browser rather than a 100KB file. Said another way, the most efficient file size is possibly 1/50th of the original.
2) For mobile users this is bad news because they have a metered allowance for data. So you have used up 5MB of their allowance, when you could have used 100KB.
3) For your hosting the amount of data that is sent is now much greater than it needs to be. I monitor the data used on a monthly basis and ensure you have enough bandwidth for your sites. Some sites, given the number of visitors are consuming a lot of bandwidth for this reason.
4) When the site is backed up, it is now much larger because there are full size image files on it. So the backups consume more space. Also bear in mind where Updraftplus is used we are storing 6 weeks worth of backups!
I have that problem!
If you have this problem then there are several things to note. Firstly for future uploads to your site, take care to reduce the images in size using the IrfanView (free editor) or the editor of your choice. The tutorial tells you how to use Irfanview for this purpose.
Before you start to do this, take a copy of your original image and rename it. Only process the renamed image, not the original. I generally add 450px or 600px at the end of the file name to give a clue on the size of modified images.
For images already on the site WordPress introduced an editor to tackle this problem a few releases ago. I personally try not to use it because I have seen the quality of images reduce if you do them on site. I am a photographer, so I tend to notice image quality if it reduces. You may not, in which case just go ahead and use it.
Go into the Media Library, then systematically go through each image, or the ones you suspect of being too large. The image library will show you detail of each image as you move through them. For anything that is too large, scale it down to say 1024 pixels wide (for a gallery item) or 610 pixels wide for an image appearing within a page.
If you are stuck, give me a shout and I will take a look.
But….
Don’t do nothing. The problem will become larger the longer you leave it.