Website Pictures

Photos, pictures, images, graphics; different words but all meaning the static pictorial content on your website. For the sake of conciseness, I will just use the word “pictures” to mean all these, without differentiation between pictures that are photographs, images that are designed, and graphics that are used for specific purposes such as icons, bullets, buttons or backgrounds.

A website is a multi media form of publishing. Although text is a major part of a website, a completely plain text website is very old fashioned these days, now that internet connections are faster and download quotas higher. It is very rare for any website to never include a single picture, even if it is only a logo or header image, or a few icons (very small images used to symbolise something often repeated, like the save icon using a floppy disk image.)

The maxim that a “picture is worth a thousand words” will always be true for people because we are visual first, and a picture is instantly recognisable, while words require us to read and interpret them. A good header can instantly show a visitor what your website is about. A logo is a way of making a brand instantly recognisable.

Tzar & Anastasia

Alsation meets kitten

A picture on a page brings colour and life to the article it illustrates, it can lead the viewers eye to specific text and aid people to understand descriptions.

This picture is when our Alsation Tzar was getting to know our new kitten Anastasia. They were both intensely curious about each at this stage.

If you read this text it’s probably because your eye was drawn to the image, and you were curious to learn more. Pictures help your readers engage with your text.

Pictures are also a valuable alternate form of website content. Search engines index pictures and bring visitors to your website through image searches. When you take the time to title, describe and add meta information to your pictures, you are optimizing your website for search engines and reinforcing your topic with related keywords. Therefore, do take the time to correctly title and give an alternative name to your pictures. The alt tag will show as a line of text, if the image cannot be displayed, and is important for readers with diminished sight.

Formatting Pictures For Websites.

To view a web page your computer must download the page via your internet connection to your computer’s browser. What is important to understand is that the overall size of all elements of a webpage – header, sidebars, articles, images and footer – affect how quickly the download will load into the browser. The larger the size, the slower it is.

Hypothetical relativity: I haven’t actually studied the math and you’ll understand that font sizes and different image compression systems vary actual sizes, but I wrote the following paragraph to illustrate a concept – it’s not factual so far as I know!

Imagine that one character or letter is equal to one byte. With an average word size of 5 letters, and an average article size of 500 words, then a text article would be 2,500 bites or 2.5KB. Imagine that one pixel is also equal to one byte. If this were so simple then a 500 word article would be the same size as a 50px square picture.

Pixels are not related to bytes but bitmaps are. Perhaps you can see below that the two bitmaps are the same dimensions and the same mass despite one being a single colour and one having multiple colours. This is because bitmaps reference every “square” byte of colour, what the colour is – does not contribute to the mass, only the total size of the picture.

bitmap single colourbmp
9,820 bytes
jpeg single colourjpg
344-bytes
gif single colourgif
92-bytes
bitmap multi colourbmp
9,820 bytes
gif-multi-colourgif
1,220 bytes
25% jpeg multi colourjpeg
25% 1,010 bytes
50% jpeg multi colourjpeg
50% 1,430 bytes
75% jpeg multi colourjpeg
75% 2,460 bytes
100% jpeg multi colourjpeg
100 4,660 bytes
png multi colourpng
7,090 bytes

Gifs have a maximum of 256 colours and (I think) that these are the “web safe” colours. Note that the shade in the single colour image is lighter. Any shade of colour will be converted to the closest colour on its list if you save as a gif. Gifs are small in mass but are not suitable for phographs. You can see in the multi coloured example that gif is an unsuitable format for this picture.

The two main web formats for pictures are jpegs and pngs. I don’t know much about pngs, so I cannot tell you much about them, sorry. I use jpegs! You have the option with jpegs to choose a quality and above are examples and sizes for a range of quality from 25% (low) to 50% (medium) to 75%-100% (high).

I hope that this helps to explain why keeping your picture size and format small in dimensions and low in mass is important for your website, in order to keep page load time fast. In general resize your pictures before uploading to the CMS.

For people who are running portfolio websites and need high quality images and different sizes, then the general rule is over-ruled. In this case it may be better to resize to the largest size you want to display and let WordPress do the rest, as in image management you can use the options for different sizes, a small thumbnail, and small medium and large. You can set these dimensions under Settings>Media.

All You Really Need To Know About Image Size

For a normal and mostly text website, with only a few pictures, all you need to know or understand, to practically use this information, is the following two rules…

  1. Convert large picture formats such as bitmaps (bmp) by saving them as jpegs with a medium compression of around 70-80% quality.
  2. Resize pictures to under 500px in width or height before uploading them, 300 is even better for speed while still having a good visual of this content.

Regarding other image formats

If a picture is a gif or a png there is no need to convert it to a jpeg as these picture formats are alternate web image formats, each offering different benefits for graphic designers. You can resize some of these images, but sometimes the result may not be exactly the same but smaller, as it is when you resize a jpeg.

Image formats for graphic programs should not be uploaded to the web. If the extension for the picture says psp or psd do not upload these pictures. They are Paint Shop Pro or Photoshop files and need to be opened by this software and saved in a web format such as jpeg, to be able to use them. They contain files in layers so that users of this software can change text or other elements, before saving them for use on a website. Header templates often come with a psd as well as a jpeg so you can change the name of the website on the image. Psd and Psp file extensions will not display on the web.

Jpegs are the most commonly used web format for photographs. Jpegs use a compression called lossless indicating that it compresses while trying to keep the loss of detail as small as possible. It merges the data for adjacent pixels of colour wherever it’s rules indicate that the human eye cannot distinguish the difference. Jpeg gives you compression options to choose from a high, medium or low quality.

A quality compression of 100% will save a picture that few people could tell between the original and the jpeg. When saving in this format, it often also gives an estimated load time such as 20 seconds. At 50% quality most people can see a slight smearing effect in a picture but the estimated load time might be down to 3 seconds. By choosing different percentages of quality you can decide on and balance the trade off between picture quality and picture loading speed on a website.

I think pngs are similar to jpeg in that they use a lossless compression but jpegs were designed especially for photographic compression while pngs compression was specifically designed with web picture display in mind.

Gifs use a different form of compression and are most used by graphic designers especially when they are using a limited colour palette for designs. Gifs also have many other benefits for graphic designers.

How WordPress Works with Images

The admin area of your CMS has a menu on the dashboard for the Media Library where you can add a new image or browse or search for images you already uploaded. If you install a plugin for a slideshow or a gallery plugin, their admin area will generally show as a link under Media as well.

You can also access the media library when writing or editing a page or post by clicking on the first small square icon just above the main line of icons above the WYSIWYG editor. A dialogue box will open and it has tabs for different features. Here you can upload a picture, edit an uploaded picture, and configure how and where the pictures in your media library will display on different parts of your website.

When you upload a picture WordPress stores it in an archive folder that it creates for the year and month of the upload. By using FTP you can see these directories in the wp-content>uploads folder.  It is important that image folders do not hold too many pictures when using WordPress. I believe that a single folder should not have more than 100 images in it. It may be annoying that images are archived by month, but this is one of the reasons WordPress does it this way.

Tagged with:

Filed under: 29 Steps29 Steps-3MediaTutorials

Like this post? Tell someone about it! Share the link with social communities like Facebook by clicking on the orange SHARE icon above. look for the envelope icon to email the article to a friend. When you click MORE scroll down the list to PRINT or PDF to save the article for future reading.