Overview
Built on WordPress, the world’s most popular content management system (CMS), Journal is used by students in a number of ways including reflective blogs, portfolios, collaborative scrapbooks, showcases and forums. It is an ideal tool for sharing media such as images. File size dictates the time it takes to load an image in a post or page, the larger the file size, the longer it will take to load. Viewers of a Journal often don’t have the patience to wait through long web page loads, so keeping your file sizes low and optimised will increase speeds. This guide will introduce you to the concept of image compression and optimisation, recommended file types and tips on how to make your images look their best in your Journal.
Contents
- How Journal processes images
- File formats for images
- Image dimensions
- Journal and image compression
- What is image optimisation?
- Image size and quality
- Retina Displays
- Further support
How Journal processes Images
When a new image is uploaded, Journal generates three additional versions of it in different sizes: thumbnail, medium, and large. The original image remains as a full-size option. The reason Journal does this is so you don’t have to keep resizing images manually and to ensure the most optimal image is available for different areas of the site. For example, the image used in a post thumbnail will be smaller than the image needed for the post’s featured header image.
The default image sizes that Journal creates are:
- Thumbnail size (150px square)
- Medium size (maximum 300px width and height)
- Large size (maximum 1024px width and height)
File formats for images
Image file formats that can be uploaded to Journal include:
- JPEG - a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.
- PNG - an image format which is uncompressed, which means it is a higher quality image. The downside is that file sizes are much larger.
- GIF - a file format that only uses 256 colours along with lossless compression which makes it the best choice for animated images.
Using the right image format
To keep things simple use:
- JPEGs for photos or images with lots of colours.
- PNGs for simple images, graphics, screenshots, logos or when you need transparent images.
- GIF for animated images only.
Be aware that you can save a photo as a PNG or a graphic as a JPEG and not be able to visually tell them apart. It’s when compression is applied that an unsuitable file format becomes apparent.
Tip: Image editing training is offered by Software Training, please refer to their schedule for upcoming Adobe Photoshop courses.
Image dimensions
Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions, height and width. Typically, these photos can have a resolution of 3000 PPI and dimensions starting from 2000 pixels and more. These high-quality photos are not suitable for using on your Journal.
Reducing resolution to 72 PPI and the file dimensions to something more reasonable, for example 1024px wide, can significantly decrease image file size. You can simply resize using an image editing software on your computer such as Photoshop.
For example, consider a photo with an original file size 1.8 MB, 300 PPI resolution, and image dimensions of 4900 W × 3200 H pixels. Saving the image to a jpeg format for higher compression and changing the resolution to 72 DPI and image dimensions to 1200 W × 795 H pixels, could reduce the image file size to just over 100KB, which is significantly less than the original file size.
Journal and image compression
Image compression finds the balance between file size and quality to improve the user experience. By default, Journal compresses all uploaded images for better performance, ensuring images render on screen more quickly, improving site speed.
Although not necessary, if you would like more control on how images are compressed in your Journal, you need to manually optimise your images to be viewed on screen. The best way to do this is by using Photoshop or another image editing software before you upload your images to Journal. This gives you a lot more control on the quality of images, making them more optimised for Journal.
What is image optimisation?
Image optimisation is a process of creating and saving images at the smallest possible file size without reducing or largely compromising on the overall image quality. It works by using compression technology such as “Lossy” and “Lossless”.
- Lossless is a compression term meaning that as an image's file size is compressed, the picture quality remains the same. In theory the file can be decompressed to its original quality. PNG files use Lossless compression.
- Lossy compression means that data is permanently removed or 'lost' from an image file, therefore it can not be decompressed to its original state. JPEG files use lossy compression.
Default image Optimisation
By default, 'Enable image optimisation' is selected on all newly created Journals to automatically resize images when they are uploaded to your Journal. This helps reduce storage space usage and ensures that the images are optimised for viewing online and display quickly on screen.
The image optimiser works by converting png to jpg, resized and compressed where as jpg are just resized and compressed.
The maximum image width of an image displayed on Journal is 1920 pixels by maximum height of 1920 pixels.
Compressing Images for optimisation
Photoshop and all image editing software offer the ability to compress images, which allows the user to set the image quality, usually by a percentage or a scale based from Low to Maximum. The quality settings will vary for each image but try 50-60% or medium setting which should help reduce the overall file size without a very noticeable loss of quality.
Tip: The image quality settings will vary for each image so save a few copies of the original image and experiment with the image quality settings to find the best balance between file size and quality.
Image size and quality
The size and quality of an image for use on screen is determined by a variety of things:
- Physical Size - The physical size of an image is based upon the size of the image on the screen and the file size. e.g. 1024 pixels wide.
- File Size - This is the size of the file on your computer’s hard drive. e.g. 119KB
- Resolution - Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image. The resolution of the image dictates its clarity. The higher the resolution, the larger the file size, so this is why you have to make a compromise between quality and file size. Screen resolution is 72PPI which differs from print resolution which is 300PPI.
The file size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. Viewers of a Journal often don’t have the patience to wait through long web page loads, so keeping your file sizes low, speeds up your site's access time. WordPress guidance states that large images should be kept between 100KB and 60KB. Smaller images should be closer to 30KB and lower.
Note: KB (Kilobyte) refers to one unit of measurement used to describe the size of a digital file.
PPI (Pixels Per Inch) refers to the resolution in pixels of a digital image.
Retina Displays
Devices with retina displays have a much higher pixel density than regular displays, which can cause images with a regular pixel density to appear blurry or pixelated. To prevent this, if Journal detects a Retina display it will serve the image at double the size, so it displays with maximum sharpness. This will only work if the image that appears in your media library is larger than the size that appears on your site.
Even at double the maximum display size on your Journal an image file should still be significantly smaller than at the full resolution used by your camera, so you can optimise your images in an image editor such as Photoshop and still have them look good on Retina displays.
Further Support
For general queries about the Learning Space, students should first contact their module leader or personal tutor. For any other comments or issues within this guide, please contact the Digital Learning Team via dlsupport@falmouth.ac.uk. Alternatively, please refer to the numerous help guides found on our Knowledge Base.
View the Accessibility Statement for all of our support guides.