Image Management

Published Categorised as About Blocks

Many website users struggle with images, even those that have managed a website for years. Here’s some straightforward things you can do to make your photo publishing weblife easier.

Phone or digital camera?

Even the cheapest digital camera or phone will offer multiple formats for taking snaps. The smallest file size may well let you store and potentially share many more pics, but the smallest size will be inadequate for many publishing purposes. Too small and the snaps will look grainy when enlarged or zoomed in and disappoint in print. It is not realistic to improve digitally a small image.

Full size or RAW images give greater flexibility, but you’ll need more space to store the originals. While they may be way too big for instant web publishing, a large image is zoomable, can be cropped hard, will render well in print and subjected to judicious photoshopping.

Light

An image shot in poor light or using the phone’s digital zoom may not render well. In poor light the sensor adjusts automatically and reduces the quality of the image. You’ll notice pixellation effects on the large screen, even without looking too closely, that were not obvious on the phone.

If you use the camera’s digital zoom, you will lose detail in much the same way, avoid.

Frame

Frame your pics appropriately for your website. Landscape orientation is the best all round solution, but it depends a little on what you are aiming to do. Mugshots of the team might be better shot portrait or rendered square. Check too whether snaps are in a strange aspect ratio (20:9 is a letterbox video format which may look good on a big widescreen).

Otherwise stick to 4:3 or 3:2 for your project. The 16:9 video format is OK for images, but in landscape. Use it in portrait only if you want to look like the cool kid on the block. Be consistent don’t mix and match ratios and orientations, as most of the time it’ll not look good and makes it harder for you to assemble multiple images in a gallery, unless the gallery magically re-crops everything.

Size

Some applications let you save for web publishing. But what if you just have an image someone sent you? The rules are not hard and fast, but a “featured image” (this is the one at the top of you post/page built in to the template) should be at very least 1200px wide. I would err on the safe side and go for 1800px. Invest in a package to help you manage the processing steps, and remember to respect the cropping options – don’t try and do it by eye. WordPress also creates the intermediate sizes for you, so you don’t have to waste time creating thumbnails.

One picture or 2?

A picture is worth a thousand words, or so goes the saying, but too many might dilute your message and increase the time it takes to optimise and process, name and display and load a page for the unsuspecting user at the end of a PAYG phone (me).

Aside

This aside uses a classic block.

In classic WordPress the image can be positioned relative to the text right or left or above it. The default, strangely, always gives unsatisfactory results, yet few realise that they can fix this. If practice the old way is a bit fiddly when manipulating multiple images (impossible to reliably lay out rows and columns) but can be useful as you can get the text to flow around an object like this without thinking about layout. The trick is to keep layouts simple. The latest WordPress is obsessed with layout and the options are by contrast almost as baffling as they are wide.


How to look good

  • If your template supports it always use a featured image option – it will display as the template author intended and moreover news feeds, social media and search tools like Android’s Discover will be able to find it
  • If you do not use the featured image some feeds will grab the first image found, so make sure that that the first one is suitable and gives the right message
  • Use the gallery option (skip to the beer) to arrange multiple images, don’t fight with the template and try getting a gallery look with loads of single images, it just won’t work. Connect JetPack for more fun things with galleries.
  • As before stick to one aspect ratio and orientation or if you must mix and match, use the same aspect ratio.
  • In the aside above I show how in Classic WordPress, you can get images to flow around text, a feature designed to help you create great simple layouts, but which seems to be ignored by many
  • In the latest WordPress you can create great layouts with considerable flexibility using blocks and block patterns (such as the one below)
  • Optimise the images for the web. Look out because there’s a lot of advice some of which may sound conflicting and depends on the publishing platform. But essentially 1200px is the absolute minimum. WordPress does some clever resizing, which can be useful.
  • When you save your images always give them a decent name and perhaps date them. When you upload them this name should become the title. You will be also able to find it again; remember too that once loaded into the media library an image can be used again and again. Moreover search engines will be able to find it, so enriching the web, which is largely full of badly described things.

A thousand words leave not the same deep impression as does
a single deed

Henrick Ibsen

The block above is a simple image and text formatted as a quote

If you have got this far, reward yourself

If you have an ourlocality website and have a formatting question/s. which is/are making you tear your hair out, then ping us a message

ourlocality@sustainingdunbar.org

By Bart Simpson

I'm Bart Simpson. Who the hell are you?