Many images from a camera are 5MB or even more, but this is far too big to add to a website. Large images slow the website down and create a bad experience for users. Also, in many websites that use ‘lazyloading’ (like our Dhyana theme) they can take a long time to appear.
- If the image is part of the page content, then it should be less than 100kb. For our newest Dhyana theme, the image does not need to be more than 750px wide if it is full width and 400px wide if it is aligned to the left or right of the text
- If the image is to be a ‘banner’ image or ‘featured’ image, then it needs to be larger in size – somewhere between 1500 and 1800 pixels wide. In this case it is acceptable to have images up to 400kb (WordPress will automatically create smaller sizes for tablet/mobiles)
How to reduce image size using Online Image editor
If you don’t have image editing software such as Photoshop, you can reduce image size quite quickly using online editors such as Pixlr www.pixlr.com
Quick guide to Pixlr: Note – Pixlr is improving all the time so this information might be outdated, please let us know if so
- There are 2 editors to choose from – the normal editor (pixlr x) and advanced (pixlr e). The normal one should be good enough.
- Click on the Open Image button and select your image. If it is a large image, you will be asked if you want to resize to save memory. Choose the HD option.
- Banner or featured images might need to be cropped to get the right size. These should be landscape, with the action in the centre of the picture. The best is to have the picture width almost twice the height. For top banner images the ideal is 1800×700. This isnt always possible (for example important detail is cropped out) so anything over 1400×700 should also be ok. The crop icon is on the left-hand menu.
- If you dont need to crop, you can go straight to Save Image. You can select the image width here, and adjust the quality (medium quality still looks very good)
Similar results can be attained with Photoshop (Save for web) and other image editing software.
Related