How to prepare images for your website
Here are three simple steps you can take to improve your search engine rankings and website speed that can be achieved using only free resources.
Follow these steps to optimise your images before you upload them to your website.
Step 1. Resize.
To resize your images to fit your website, you’ll need to know the width in pixels of your site. In Divi theme, this is set up in the theme customizer. This website is set at 1280px wide, and the featured image that you can see at the top of this page is prepared to that width.
When you export your image from your editing software, make sure that it is set at 72dpi (the correct resolution for web).
If you have Photoshop, use that. If you don’t, try one of these free options that will also do the job.
GIMP is an open source image editor that you will need to download to your computer.
Photopea is an online image editor that you can use for free.
Step 2. Compress.
We take it a step further with the next step and ensure that image file sizes are small enough to load super fast.
Try to keep all web images smaller than 200kb.
The featured image in this post is 149kb. I saved it as a jpeg in Photoshop at 72dpi, quality 9, and the size was 301kb. Then I ran it through squoosh and saved it as Browser jpg with a quality of 0.75.
Squoosh is a free online tool that does an excellent job of compressing images for web without losing quality. For WordPress websites, be sure to save your image as Browser jpg.
If you have more than one image to compress, doing it one at a time with Squoosh can be somewhat tiresome, so in that case I use TinyPNG. You can compress up to 20 images at a time with TinyPNG, although you don’t have as much control as you do with Squoosh.
Step 3. Naming.
Name your images with keywords to optimise ranking in image searches on Google.
For artists, include your artwork title, size, medium and your name in the image title.
Once you have uploaded your images, be sure to include an Alt tag (in WordPress this is added in the Alternative Text field of your image in Media Library).
If you are using Divi theme or Divi builder, make sure that you add your Alt tags in the Advanced tab of the image module as they aren’t automatically pulled through from the Media Library.
Learn more about creating a website and marketing your art, creative services or products online with Websites for Artists.
Tracy Algar is a visual artist, web designer and online marketing specialist who has been selling her art online since 2013. For more tips on creating a website and marketing your art and creative products online subscribe to her email list below or Like her Facebook page.