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:
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:
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 www.webresizer.com
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.
Uploading images - FXRecruiter sites
In the Page Manager, you should
If all this seems like too much bother — use Reverse Delta
Optimising your images is not complicated and we'd urge you to give it a go. But if all this looks like too much work, we'd be happy to help on a time & materials basis.