How to Upload Content & Images

.webp

Best image file for websites – use Birme to convert most images to .webp. 

This is a very rare case but worth mentioning - .webp can support transparency so use this for masked photographic images - if transparent image is a vector please use .png. 

However not all websites support .webp - so make sure to add a test image to check if .webp is supported. Breakdance, Woodmart, Elementor usually accept .webp, however older WordPress and our CMS DO NOT accept .webp - please scroll to .jpg instead.

1. Drag images into Birme
2. Input your size in the resize/crop tab
3. Set focal point - Birme can automatically find best part of image but it is not always reliable so you can set focal point yourself - usually center is best, or if you click on image you can drag the crop field to where you want it.
4. In Image Format & Quality Tab - select .webp and set quality to:
   
   1. 80% if people are in image
   2. 60% as standard
   3. 40% and under if theres a lot of details in image - usually trees, grass, etc.
   4. Make sure image size goes under 200kb - lower quality until its around 200kb
5. Save as Zip or Save Files (zip is best if theres several images, but if you are dealing with 1 or 2 images just click save files)
6. Rename image to best describe it - for example Solar-Panel-on-House - make sure you add dashes to replace spaces

.jpg

Please use this file type if .webp is not supported - so b4b's CMS and older WordPress DO NOT allow .webp. 
Use Birme or Adobe Photoshop (or whatever image editing software you like to use) to resize images.

Birme is easier to use so similar method with .webp:

1. Drag images into Birme
2. Input your size in the resize/crop tab
3. Set focal point - Birme can automatically find best part of image but it is not always reliable so you can set focal point yourself - usually center is best, or if you click on image you can drag the crop field to where you want it.
4. In Image Format & Quality Tab - select .jpg and set quality to 100% (yes make sure its 100%) 
5. Save as Zip or Save Files (zip is best if theres several images, but if you are dealing with 1 or 2 images just click save files) 
6. Rename image to best describe it - for example Solar-Panel-on-House - make sure you add dashes to replace spaces
7. Go on CompressJPG (with the green elephant) and drag your cropped image(s) into the compressor and download - it should be downloaded with a -min at the end of the filename
8. If image is above 200kb for small image or 300kb for large image - then go to TinyJPG (with the panda) and compress it again

.png

There are rare cases where .png should be used instead - only use this file type for vectors and text - e.g. Logos, screenshots, graphics with solid colour. File size usually comes out smaller and images don't get blurry when compressed - they become more pixelated instead which makes text and edges much crisper and easier to read than .jpg and .webp.

Can resize using Birme but only if original file is a .png: 

1. Drag .png images into Birme
2. Input your size in the resize/crop tab
3. Set focal point - Birme can automatically find best part of image but it is not always reliable so you can set focal point yourself - usually center is best, or if you click on image you can drag the crop field to where you want it.
4. In Image Format & Quality Tab - select same as original images
5. Save as Zip or Save Files (zip is best if theres several images, but if you are dealing with 1 or 2 images just click save files) 
6. Rename image to best describe it - for example Solar-Panel-on-House - make sure you add dashes to replace spaces
7. Compress .png using TinyJPG (accepts .png files).

However if you get a vector/logo that is .jpg or something else - hand it to a team member who can use Photoshop and they can sort image out for you. 

.svg

These files are vectors that are scalable to any size, usually logos and icons - mainly web people will deal with .svgs. 

Banners

There are usually two ways:

1. The 'Sliders' when you edit a page (found at the bottom) - click upload images - when uploaded click edit - where (sometimes) you add h1 and alt - NOTE this will automatically save when you add image - if youve made a mistake just click on the X of the image.
2. The 'Banner' Tab when you edit a page (found to the left of the WYSIWYG) - simply click the upload image 

Content Images - (very basic code for this)

Upload images to media library

Then either:

1. Click on insert image in WYSIWYG

1. A Tab will pop up - click browse server and find the image you want to add
2. Name image in Alternative Text
3. Set width to 100% - make sure height is empty - click lock icon to unlock it to stop height being same as width
4. Click OK

2. Find a page where images have been added - check code editor and copy the code (or you can just copy below) usually it might look like:

1. Go to visual editor and click on image (should highlight blue) then image icon in WYSIWYG
2. A Tab will pop up - click browse server and find the image you want to add
3. Name image in Alternative Text
4. Set width to 100% - make sure height is empty - click lock icon to unlock it to stop height being same as width
5. Click OK

1. Go into media library
2. Add new then you can either drag and drop or upload
3. Name all images you upload in alt tag

Breakdance (Elementor will be very similar)

1. Go to Edit in Breakdance on a page
2. Click on an image - a left panel should pop open 
3. Click image thumbnail under Media and choose new image

1. Select image - select background tab in left panel
2. Click on image thumbnail found under Image

WP Bakery (and Woodmart theme)

1. Click edit on a page
2. In WP Bakery Editor go to image module (its usually always called image) and click edit
3. You should be able to change image by clicking the current image thumbnail
4. Click save

1. On columns or rows hit the edit (pencil icon) 
2. A window will pop-up - click on Design Options tab
3. Go to background and add image
4. Click save