Add Images

Worth 1000 wordpixlr_

Great, Free, EZ to use Online Graphic Tools

  • Canva.com - cool, hip, with templates, free and cheap photos to use
  • Pixlr.com - photo editor similar to Photoshop, will open psd files, layers, GREAT
  • Adobe Kuler - most fun color wheel tool, RGB and Hex codes for background matches

It is easy to add images to your WordPress website

1) Go to Media on the left of your WordPress dashboard and upload a number of pictures you want to use in your website or

2) Just "Add Media" as you are typing along - as I did with this image.

How to get them ready to add to your WordPress website is almost as easy!

How to get your photos ready to upload to WordPress

  1. Go to Pixlr.com (free online editor)

  2. Open the image

  3. On top toolbar click Image, Size (if it is from a digital camera it will be Big - 3264x2448)

  4. Change the Width pixels - probably to between 600 to 800 [explanation below]

  5. Pixlr automatically changes Height – Click OK

  6. File, Save – Name - Quality of 80 to 90 – Click OK

  7. Now you have a file ready to upload to your WordPress website.

  8. Continue reading to end of blog for more explanation.

AHHHHHaaas About Images

For years I've been trying to understand images for websites. Something didn't make sense. Found it while I was writing this blog for you. It's not dpi it's pixels! The old way of thinking about photos for the internet was dpi – 72 dpi. It was based upon the requirements for printing (back in the day, think Macs and Imagewriter printers circa 1980s).

72 dpi use to be standard for www, 300 dpi for photos and 600 for fine art printing.

Fast forward to now - just think pixels not dots – same critter cuter name. Pixels are what video monitors display. Take the recommended resolution of your computer screen (mine's 1366) and divide it by the acutal width in inches of your screen (mine's 13.5). Thus my computer is actually viewing 101 pixels per inch.

FIRST size your photos by pixels – in Photoshop or an online editor Pixlr.com (free and fun). Photos from my Iphone are 3264 x 2448 (8 MP) 22.9MB HUGE

Monitors these days view about 100 pixels per inch. 100 pixels per inch is an easy number to remember and makes sizing simple.So for websites we FIRST size photos by pixels 450 x 600 pixels would be a 4.5 x 6 inch photo at 100 dpi. However uncompressed this file was still 791 kb. Too big for websites to quickly and easily load – especially if you have very many of them.

THEN we compress that photo to lower the file size – Pixlr does it automatically by saving. In Photoshop if you "Save for the web" it will do the same thing.

We compress that pixel size photo so that the kb is smaller. When compressed this file became 94kb in PS and 120kb in an online photo editor. Which tells me Pixlr automatically compresses for web.The pixel size will still be 4.5 x 6 inch, the difference in quality isn't noticeable.

You will notice WordPress uses pixels when they talk about images. In your dashboard go to Settings, Media and you will see that the Thumbnail size is 150 px by 150 px, the Medium size is 300 px by 300 px, and the large is 1024 px by 1024 px. (No your pictures will not all have to be square... that is just maximum.)

 

from Pixlr changed image size to 1080 x 810 ended up with 240 kb

from Pixlr changed image size to 1080 x 810 ended up with 240 kb

Edited this in old PS 100 dpi, 1000x750 saved as jpeg but didn't save for web.... 736 kb

Edited this in old PS 100 dpi, 1000x750 saved as jpeg but didn't save for web.... 736 kb

PS 10" first then saved for web 327 kb

PS 10" first then saved for web 327 kb

I can't see any difference between 1, 2 and 3. Yet 1 is almost a 1/3 the size of the next one. Go with Pixlr or with save for web.