Okay, so you’ve got your gleaming new website and you want to add a WordPress blog post or product.
If you’ve had us COG media design your website we’ll have created rules and templates to make you’re life easy…. Honest. We would have set up the frame work for how images are used on your site so it always looks its best. We appreciate now everyone has the Adobe packages we use to create your site so we’ve created a crib sheet to help you on your way.
Before you get to post.
When taking images you’re going to use on your website it always good practise to shoot landscape not portrait. This will allow the images to work well on desktop browsers. But mobiles view sites vertically I hear you say. This is true but our thinking is you can still have you image on the screen and text or information abo9ut the image. The web site development system we use handles images intelligently, which is where are next nugget of advice comes in to play. When you’re taking you’re photos try and keep you focal point in the centre of the image. so if you have a picture of a product, staff member or award.
Affordable Photo Editing
As we mentioned we get that not everyone will have access to the industry leading Photoshop from Adobe so we have a FREE to use online tool. Pixlr is a web based image editing platform with will have your images blog ready in no time. When we create your WordPress site you’ll get a Photoshop PSD file with branding options included which can be imported into Pixlr.
When we produce a WordPress template for your website, a set of rules to allow a continuity across the look and feel will be put in place. This could not be more important than with blog posts and product images. For the purpose of this blog we use 1200 x 500 pixels.
Step 1
If you dont have Photoshop head over to Pixlr X. Follow this link and you’ll be ready to go. https://pixlr.com/x/#editor. You’ll be presented with the welcome screen. Press the open image button and load up the Photoshop PSD or file you want to work on.
Step 2
We are going to continue using our Photoshop PSD file you would have been sent through for a blog featured image. The demo file we have produced has branding in it as a layer with transparency. Great for keeping that corporate look across all your blog posts.
Step 3
Your are now ready to add your image that will be used to promote your blog post. Use the add element / image option the the left hand side of the page.
Step 4
Ignore all the extras being offered to you and go for the add media option, We’re not going to teach you to suck eggs on how to find and load your images.
Step 5
When you import an new element into any package it will usually end up as the top later. As we only have one layer it doesn’t have much of a choice.
Step 6
Firstly we need to get the branding showing on the image (if you are going down this route. Pixlr is no different to Photoshop in ordering the layers. Simply click and hold the mouse button down and drag the image underneath the branding layer.
Step 7
This is where you get to be artistic. As you should NEVER use photos straight from your camera as they will be far to big for the browser. But more importantly will rank poorly with Google when it comes to your search listing. The bigger the file the longer it will take to download. Lesson over back to the point in hand… Click the zoom out button to get you out 20%
Step 8
Once you zoomed out you will be able to see handles that will you resize and rotate or image to the desired position. Click and hold the mouse button an any of the corner handles and drag away. Pixlr have made it easy for you to lock the aspect ratio so your image will not distort by holding down the shift key on your keyboard.
Step 9
If you need to fine tune your image to get a horizon level or add a bit of flare to your featured image.
Step 10
When your masterpiece is ready you can save the file ready for the next important step to keeping Google and your hosting company happy. As the adage goes, size is important and in this case the smaller the better.
You will have a couple of option at this stage which we can throw some light on. There is a new kid on the block when it comes to images on the web. WebP is a impressive image format and one you may not have come across before. it supports solid images like jpegs and images with transparency like PNG all in one format. Sounds great but not all browsers supports them. Prime example is if you are running a older Mac that wont allow you to update for safari browser you will not be able to view WebP images… That is a decision you will ned to make. All its not lost as we can help with the reduction of the file size with another free to use website. So for our featured image we are going to use the Jpeg options with a medium amount of compress. Your image should still look good at a reasonable file size.
