A Guide to Image Sizes
Optimizing your website images to ensure they are created at the correct size, and compressed efficiently.
Choosing the right image size
Image widths for Tinker sites are based on the number of columns being used in the Builder or Theme Builder. A default setup would have a max-width of 1080px and a gutter-width of 3. Using these default settings, the image widths for images based on the number of columns are shown below:
- 1 column image: 1080 pixels
- 1/2 column image: 510 pixels
- 1/3 column image: 320 pixels
- 1/4 column image: 225 pixels
- 1/5 column image: 168 pixels
- 1/6 column image: 130 pixels
Based on column widths you can then set a height for your image using ratios.
You can use any image height you choose, but there are some common aspect ratios that are used such as 4:3 and 16:9. The image aspect ratio is just a number to represent the relationship between the image width and image height.
The following image sizes are based on the default column structure (1080px max-width and gutter width of 3) before any custom widths, gutter widths, spacing or padding have been added.
The recommended sizes for images when using a 16 x 9 ratio are:
- 1 column: 1080 x 608 pixels
- 3/4 column: 795 x 447 pixels
- 2/3 column: 700 x 394 pixels
- 1/2 column: 510 x 287 pixels
- 1/3 column: 320 x 181 pixels
- 1/4 column: 225 x 128 pixels
The recommended sizes for images when using a 4 x 3 ratio are :
- 1 column: 1080 x 810 pixels
- 3/4 column: 795 x 597 pixels
- 2/3 column: 700 x 526 pixels
- 1/2 column: 510 x 384 pixels
- 1/3 column: 320 x 241 pixels
- 1/4 column: 225 x 170 pixels
Each module is then different so you may need to use a different image size depending on which module your image will be used for. You can see a quick outline below for some of the most common modules.
Image Module (16:9 aspect ratio + for tablet):
1 column: 1080 x 608, ⅔ column: 770 x 433, ¾ column: 770 x 433, ½ column: 770 x 433, ⅓ column: 770 x 433, ¼ column: 370 x 208
images using lightbox: 1500px x 844px
Slider/Post Slider Module Background (16:9 aspect ratio):
1 column: 1080 x 608, ¾ column: 795 x 447, ⅔ column: 700 x 394, ½ column: 510 x 287, ⅓ column: 320 x 181, ¼ column: 225 x 128
minimum 1280px but ideally1920px
Slider and Post Slider Module Featured Image:
1 column: 450px, ¾ column: 330px, ⅔ column: 320px
Blog module Featured Images with Fullwidth Layout:
1 column: 1080, ¾ column: 795, ⅔ column: 700, ½ column: 510, ⅓ column: 320, ¼ column: 225
Porfolio Module Featured Images (Fullwidth and Grid Layout; Standard and Filterable):
Width: equal to your single post column width (default: 795px)
Blurb Module Image:
1 column: 550px, ½ column: 510px, ⅓ column: 320px, ¼ column: 225px
Gallery Module Images (Slider and Grid Layout):
Recommended dimensions: 1500 x 844
Person Module Image:
3:4 – 600 x 800 (recommended for portraits), 16:9 – 600 x 338, 4:3 – 600 x 400
Shop Module Product Images (WooCommerce):
6 column: 150px, 5 column: 183px, 4 column: 240px, 3 column: 332px, 2 column: 520px, 1 column: 1080px
Fullwidth Header Module Image (Fullscreen Background Images):
1920px x 1080px
There is no one-size-fits-all image size
There are a lot of variables that can be changed, so these numbers should be used as a general guideline. As your content widths, gutter-width, padding, etc are changed then the available space for images within the content will also change.
There is also the issue of responsive images on tablets and mobile devices which will change the number of columns of your website. A 4-column row on a desktop will change to a 2-column row on a tablet so you not only have a different screen size but and a different number of columns. You may then want to use an image that is bigger than necessary for desktop, in order to have a better fitting size on a tablet.
Optimize images before uploading.
Optimize images using Photoshop
Optimizing your images before uploading them to WordPress will result in a faster website, better SEO, and less bandwidth usage on your hosting.
The goal of optimizing your images is to produce the lowest file size possible, whilst maintaining acceptable image quality.
The 3 image optimization factors are:
Image file format (JPEG, PNG, GIF)
Use JPEGs for photos or images with many colors, PNGs for images with transparency, and GIF for animated images.
Reduces the file size but does not affect the pixel dimensions of the image. This can be done with software on your computer or using online tools.
Image pixel dimensions
This is the pixel width and height of the image and should match the pixel dimensions of the space it will be placed on your website. This can be done with software on your computer or using online tools.
There are many tools for optimizing images off-site, but the most common would be;
Adobe Photoshop is premium software that can resize and compress your images.
GIMP is a free, open-source alternative to Adobe Photoshop that can resize and compress your images.
TinyPNG is a free web-app that can compress your JPG and PNG files.
Bulk Resize Photos is a free web-app that can resize the pixel dimensions of your images
If you are not willing or able to optimize your images before uploading, there are a few useful plugins we can install to that can resize and compress on-site after upload.
It is better to optimize prior to uploading, but it is also better to optimize on-site after upload than not optimizing at all.
Adding title and alt tags for better SEO
Image alt text
By default, when adding an image it does not automatically fetch the image title or alt text from the media library and add it to your image.
This is bad for SEO and your users as Google or people with screen-readers will not know what content your image contains.
To help Google and your users understand what your image is, you will need to either;
Enter the title and alt text in the modules’ advanced settings manually, or talk to us about an SEO package to take care of this for you.
Images are a vital part of every website; and for many sites, the wrong images can cause a snowball of issues that can ultimately lead to less conversions and income. One of the main website killers is large images that slow down your website and lead to poor Google rankings and poor user experience.
Optimizing your images will speed up your website and give it a huge boost for very little effort so let’s put image optimization on your to-do list now!