It’s important to remember that visitors to your site will not want to wait very long for pages to load. This means you should do everything you can to streamline your content, and that includes the sizes of the images you use.
There are three main image formats that are used on the Web:
- GIF – Graphics Interchange Format
The GIF format is best for images that consist of a small number (fewer than 256) of solid colours. GIFs have basic support for transparency. - JPEG – Joint Photographic Experts Group
The JPEG format is best for images that consist of a large number of colours. The format is good at handling smooth transitions of colour, e.g. skin tones, so it’s best suited to photographs. Unlike GIFs, JPEGs do not support transparency. - PNG – Portable Network Graphics
The PNG (pronounced ‘ping’) format provides a mix of the features of GIF and JPEG. Image quality can be excellent, with support for complex transparency. Older versions of Internet Explorer for Windows do not provide full support for PNG transparencies.
Choosing a format
If you’re going to be uploading photographs to your site, the best choice is almost always JPEG. This format offers various degrees of quality when saving a file. Experiment with the different options to find one that suits your needs: the highest quality option isn’t always the best, especially if your images aren’t packed with detail.
For non-photographic images, use either GIF or PNG. There’s no harm in saving images in both GIF and PNG formats, and then comparing them side by side. If you can’t see any real difference between the images, go for the one that has the smaller file size.
How big do your images really need to be?
When you save images for the Web, consider how big the physical dimensions (width and height) need to be in order for the images to be effective on your site.
Your visitors don’t necessarily want or need to see huge images, so bear this in mind and size your images accordingly. Remember: the smaller the image, the smaller the file size.
For the most part you shouldn’t need to make your images any wider than about 768 pixels – this is about full width of an iPad screen.
Optimising your images:
If you don’t have Photoshop, there are online tools that will allow you to optimise your images for web.
Here are a few:
JPG:
www.jpegmini.com
www.imageoptim.com
www.croply.com
PNG:
www.tinypng.com
www.croply.com
To edit the scale of your image in WordPress:
- Upload your image (See ‘Images’ section)
- Once your image has uploaded you’ll be given options to edit your image
- In the options you’ll see ‘Size’:
The size of the image. Click the Edit Image button beneath the image preview to:
Rotate, Flip, Scale, or Crop the image.