How do I display images in my pages in the right size?
Posted by Steve Riley on 27 March 2012 01:53 AM

On most of our websites, we use a WYSIWYG (What You See Is What You Get) editor that allows you to upload images to the server and display them on your web pages.

Why should you optimise your images?

Large images should be resized for two reasons:
  1. It gives your end users a poor experience. They take a long time to upload (particularly on mobiles) for no extra benefit.
  2. They'll rattle through your site's bandwidth allowance (and cost you more in monthly charges).


Pre-optimising images

The internet is a great place for sharing images but most digital cameras render images in enormous filesizes, so they can be printed in fine detail. This level of detail isn’t normally required on the web, so we recommend resizing your images before uploading them to a content-management system.

Images downloaded from Stock photography sites can often be much larger than needed for web use.

If you already have graphics expertise and software in house, use that. If not there are many online tools you can use. Some sample tools we've used:

  • Pixlr (a free emulation of Photoshop that is VERY powerful and has advanced features)
  • Picresize (a simple webpage for resizing or cropping images)
  • ipiccy (another free online tool, suprisingly powerful) 

The template to which each website is built will vary but we recommend that in the case of your website, you should constrain the width of an image to less than 400 pixels in width for most sites. You can crop, resize etc as necessary using Picnik or Picresize. 

Once you’ve done so, download and save your optimised image on your computer.

Another online option is

Uploading images - WordPress sites

You can add pictures to both Posts and Pages in WordPress - use the Add Media button on the toolbar.

Use the Upload Files tab for files you want to use on your computer. Use the Media tab for images already used on your site. Supported file types are GIF, JPG and PNG.

The right width of picture will depend on your template (ask if you need to check) but WordPress is quite forgiving offering options for the size of picture to show, at upload time. Files should generally be below 2-300KB for large size images, and generally much smaller. Images greater than a 0.5-1MB will give you real problems, especially for mobile users.

More here:

Uploading images - FXRecruiter sites

 In the Page Manager, you should

  • Place your cursor at the PLACE in the page where you want the image to be ‘anchored’ (i.e. the text where the image should sit)
  • Click the image icon the browse to the image you want to use…. then click Sent to the Server
  • Insert the image and remember to set the alignment (I think aligned right works best on your website template)


(0 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Reverse Delta Main Site

Help Desk Software by Kayako Resolve