Written for a presentation at WordCamp Atlanta 2013
Make sure before you upload images, audio, or video to your website that you have the rights to use the media as you intend. Most media you find, that you didn’t produce yourself, is copyrighted or copyright assumed. If you are looking for images to use for your website you can purchase stock images from sites like IStockPhoto and Shutterstock.
1. Uploading Images to WordPress
There are several different places to upload images into WordPress from the WordPress dashboard. You can upload images from Media>Add New but it is quicker, and usually easier, to upload images through the media uploader within the post or page that you’re trying to place the image into. Though you can upload music and videos to these media upload areas I recommend hosting those files elsewhere, as mentioned later in this article. Whether you’re uploading images into posts or pages, the process is the same.
1A. In your post or page edit screen click the “Add Media” on the top left.
1B. The “Insert Media” window will pop up. You can drag and drop one or multiple images into this window or click “Select Files” to browse for the images.
Once you have uploaded a file select it and you will see the “Attachment Details” as pictured below.
1C. Title Your Image
1D. Whatever you write in the Caption Field will end up being displayed underneath the image. You can leave it blank to have no caption.
1E. Fill in the Alt Text field for visually impaired users and better search engine optimization.
1F. Entering text in the Description field is honestly pretty useless. It is used for you’re convenience if you want to take notes on the media you’re uploading. Occasionally certain themes may make other use of this description field.
1G. You can choose your images Alignment. You can align the image left to wrap text around the right, center to center the image, right to wrap text around the left, or select none to have the image place as it is with text not to wrapping around it.
1H. You can make your images clickable links to other areas on your website, other website pages, or a full size version of the same image. If you don’t want your image to link to anything, make sure to select “none” for the “Link To” field.
1I. Select a size for the image to display. It is best to resize the image to the exact size before uploading to WordPress, however, cropping and resizing images to exact sizes is possible within WordPress as talked about in the next step. You can also edit the size the image displays n the content editor by clicking and dragging a corner of the image.
2. Cropping and Resizing Images Within WordPress
It is usually easier and better practice to edit your images in a image editing application such as Photoshop, Gimp, Mac’s Preview etc. However, if you don’t have a good image editing program, or if you have already uploaded an image into WordPress and would like to save time, you can edit images directly within WordPress.
2A. To Edit an image go to Media>Library from within your WordPress dashboard. Find the image you would like to edit and, directly underneath it, click “edit.” On the next page you will see the image you selected and and button underneath “Edit Image”–click that. You will then see the edit image options which should look similar to the screenshot below.
2B. If you are trying to crop the image, click and drag your mouse over the image, you will see a selection box appear over the image (pictured in the screenshot above). Once you have the selection box highlighting the area you would like to keep, you can click the crop button (the leftmost button above the image).
2C. The second button flips the image 90° to the left. The third button flips the image 90° to the right. The fourth button flips the image vertically. The fifth button flips the image horizontally. And the fifth and sixth button are buttons to take steps backwards and forwards in the edit process in case you make mistakes while working.
2D. You will see the button to scale the image on the top right of this page. If you click it, the scaling options will pop down. Entering one dimension will automatically populate the second dimension based on the current aspect ratio. If you would like to change the aspect ratio, you will see a box directly below.
2E. The “thumbnail settings” in the box in the bottom right allows you to select which versions of the image your edits will affect. In most cases you are going to want to select “all image sizes.”
2F. Once you have edited the image to your liking, make sure to save the image.
3. Embedding Audio and Video to Your WordPress Site.
It is possible to upload audio or video directly into WordPress, however, the results are much better if you host the files elsewhere (YouTube, Vimeo, SoundCloud) and embed a stream into your site.
3A. Embedding Audio in Your WordPress Site using SoundCloud is easy and the functionality SoundCloud offers is unparalleled. To get started, first you have to sign up for a SoundCloud account. Once you’ve signed up, you can start uploading your audio files. SoundCloud supports a huge range of audio formats for your convenience (AIFF, WAVE (WAV), FLAC, ALAC, OGG, MP2, MP3, AAC, AMR and WMA files). Now that you have you have audio uploaded into SoundCloud you can copy and paste the embed code (the <iframe> code works best) into a WordPress post, page, or widget as shown below.
3B. Embedding Youtube or Vimeo Videos in Your WordPress Website is a very similar the process of embedding SoundCloud audio as described above. Once you have uploaded your video into YouTube, go to the video’s page, click “share”, and then embed, you will then see an iframe code that you can copy and paste into a page, post, or text/html widget. To make the embed fit nicely on your site you can find the width in pixels of the place on the site where you are placing the video. To embed a vimeo video, go to the video you want to embed, click “share”, and you will see an iframe embed code to copy and paste into your site.
4. Optimum Image Sizing and Compression for Your WordPress Website
If your website is loading slowly, there is a good chance it’s because of bulky high-quality images. Optimizing your images with the correct DPI compression and image extension (.jpeg, .png, .gif etc) can help your website’s loading speed significantly. Below are a couple of suggestions and rules that will help you properly optimize the images on your site for high quality and quick load times.
4A) Choosing the Correct File Extension for Your Images
JPEG – Use JPEGS for most all images. The exceptions are below
PNG – For images with transparent elements and when loss-less, full-quality text is required
PDF – For downloadable images and forms. These won’t be easily viewable (if at all) on your site.
4B) Crop your Images and Re-sample the Pixels.
It’s best to crop and re-sample your images to make them the exact size they will be display on your website. This will keep loading times down to a minimum. A lot of sites have resizing built into them, however if you’re using a 1000x1000px image and only displaying them at 300x300px why make everyone visiting your site wait for those extra pixels to load? You can crop the image with the crop tool or by changing the “canvas size” in photoshop. You can re-sample the image by changing the “image size” in Photoshop.
4C) Compress Your JPEGs
Compressing an image is the number one way to lower a image’s file size and therefore make it load quicker. You might think that compressing JPEGs automatically means a huge loss in quality, but that isn’t the case. You can compress a JPEG file to half it’s originally size the quality difference is almost completely unnoticeable. Below is an example of a JPEG image at original quality (on the left) and then compressed to half its size (on the right). Can you tell a difference?
4D) The Internet Image 72 DPI Myth
When first starting building websites, I always heard the rule that all images loaded online should be 72 DPI (dots per inch). The fact is–DPI doesn’t do anything to change the quality of an image online, only increases the file size. The solution here is to remove the DPI settings altogether by selecting in Photoshop to “Save for Web & Devices” instead of “Save As.” The file saved after selecting to “Save for Web & Devices” will have no DPI instructions saved within the image, making the file size smaller, but not changing the quality of the image when displayed on a website.
If you liked this post, make sure to check out our 5 Essential WordPress Plugins