PREPARING IMAGES FOR WWW
Click on add a post. This will create a draft post on your blog and open up the post editor. In the top field, insert a title.
In the large area below the title, write your post. To add more interest, use the formatting buttons, which you may recognize from a word processor. Along with standard formatting options like bold, italics, and bullet points, there are two specific tools here that are helpful to know about: the link and quote tools.
Add a picture
There are two ways to do this: you can drag the image files from your desktop right into the post where they’ll be automatically uploaded and inserted, or you can use the tools within the editor.
To add an image from the editor, place your cursor in the text where you’d like to put the image, and click + button. You can upload, which will take you to your computer, or you can go to the media library to pick an image.
When you click on the pencil icon of the image you can edit that image. You can type the title, caption and a description (which is important regarding meta-data and seo-ing). You can even create a link for the image.
Once the image is in your post, you can choose its alignment and adjust its size. Click on the image to pull up these options.
If you’d like to have your words wrap around the image, choose a right or left alignment option. Use the plus and minus signs to increase or decrease the size of the image, and the thought bubble to edit your caption.
You can also adjust the size of your image right in the post by clicking and dragging one of the boxes at the image’s corners.
To remove the image entirely, click the Trash icon.
Give your new post a few tags and categories
You will see an area for that in the right-hand column. (To add categories and tags you have to be in Document and not Block mode) This is important. If the categories are not defined the post will not appear on the designated MEDIA page. If the post still won’t appear on the MEDIA page, let me know.
Note how you must toggle between the Document and Block settings to get to different functions.
Defining the categories, as well as tags, is important for good SEO-ing.
Adding an Event to the Calendar
Go to the top of the navigation bar. Click on the + icon. Select Event.
Complete the form which popped open. You need a title. Short description. An Image. When its going to take place. Where. Who is organizing. Is there a website of venue, organizer – add those. Add the cost if available.
Remember to add the categories and tags.
Add a featured image if you want.
This will be the result. When people hover over the event the preview comes up with a pic which makes it more interesting.
PREPARING IMAGES FOR WWW
Formatting your images for display on the web
I have some recommendations on how to format your images before uploading them.
Before you begin
To find the size and dimensions of your original image before you upload it to your site:
- PC – Right click on the image file and select Properties.
- Mac – Press Option while clicking on the image file, then select Get Info.
- Aspect ratio – An image’s aspect ratio is its width to height ratio expressed as a number, like 3:4. Maintaining a consistent aspect ratio prevents images from becoming distorted. For example, if you reduce the width of an image by half, you must also reduce the height by half.
- Image width – In this guide, image sizes refer to the number of pixels along the image’s width and height. Your image may display larger or smaller on your site depending on its container size.
The height changes relative to the width to preserve the image’s aspect ratio.
Save images in .jpg, .gif, or .png format only.
.pdf, .psd, .tff, and .doc files aren’t web-compatible.
Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.
There is an image resolution limit of 72 MP (megapixels). Tip: To find the MP for an image, multiply the dimensions and divide by one million. For example, an image with dimensions of 1500px x 1650px is 2.475 MP.
Save images in RGB color mode. Print mode (CMYK) won’t render in most browsers.
Save images in the sRGB color profile. If images don’t look right on mobile devices, it’s probably because they don’t have an sRGB color profile.
I recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 20 MB. When it comes to image size, bigger isn’t always better, as uploading multiple large images can affect site performance. If you’re adding multiple images to a page, keep your overall page size in mind.
The dimensions of the original image you upload to your site can have a big impact on how it displays. We recommend using images that are between 1500 and 2500 pixels wide.
- Images smaller than 1500 pixels may appear blurry or pixelated when they stretch to fill containers, such as banners.
You can use third-party software to reduce an image’s dimensions. We don’t recommend enlarging a smaller image, as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide.
Software (desktop editors)
- Acorn (free & paid version) – Mac
- Adobe Illustrator (paid) – Mac and Windows
- Adobe Lightroom (paid) – Mac and Windows
- Adobe Photoshop (family of options from free to paid versions) – Mac and Windows
- Corel PaintShop Photo Pro (paid) – Windows
- Gimp (free) – Mac and Windows
- paint.net (free) – Windows
- PhotoScape (free) – Windows
- Pixelmator (paid) – Mac
Web (online editors)
- PicMonkey (paid and offers many options)
- Pixlr (free and supports some mobile editing options)
- PhotoshopExpress (free but registration required)
An image’s name acts as alt text if there isn’t any other alt text provided. It also tells search engines what the image is about, which makes it more likely that you’ll show up in image searches.
When creating your images, keep these alt text best practices in mind.
Alt text is text associated with an image that some browsers display instead of the image. Search engines use it to identify the content of a page. Adding alt text to images is a great way to give your site an SEO boost and make it more accessible.
Alt text is also helpful for assistive screen readers or browsers with images disabled. If a browser can’t display the image, the alt text will display instead. For all these reasons, when you add alt text, use short, readable terms that describe the image and relate to your site content.
The title of the image usually serves as alt text. If you do not manually add alt text the title will serve as the alt text.
When writing alt text, remember that you’re writing for humans who use assistive screen readers or who’ve disabled images in their browsers. Keep in mind:
- Be descriptive and helpful. How would you describe this image to someone who couldn’t see it?
- Keep the text short, typically twelve words or fewer.
- Optimize your text for search by incorporating keywords without “keyword-stuffing.”
- Write in real sentences; do not use hyphens to separate words.
- You can omit words like “the” and “a,” and terms like “photo” or “picture.” For example, instead of a picture of a fat runner, use fat runner.