Images

Images can make the difference between a boring page that users will skim or engaging content users will read. But poor images choices could make your site look unprofessional or out of date. Here is some considerations for how make sure your images have a positive impact.

Best practices

Good Image Choices

Choose your images wisely to suit your content. The relationship between your image and the rest of the page should be clear to users. Avoid using images or clipart for decorative purposes.

Copyright

Avoid copyright infringement. Copyright law grants the creator of a image the right to control its use from the moment it’s created to 30 years after the creator’s death(or longer in cases). This includes any image you find on the internet. If you find an image on the internet and the source doesn’t say ‘public domain’  or ‘copyright-free’ you cannot use the image unless you find the creator and get permission to use it. If you want to use you own photo or that of a friend, understand that you are granting Dixie State University the right to use that image on our website. The best way to avoid copyright issues is to get your images from creative services or web services.

Image Quality

Use good quality images. Photos from your cellphone or older digital cameras may not be high enough resolution for use on the web. Be wary about any blurry or small images you find on the internet. You best option is to contact creative services to take photos for you, or request your web intern to search our photo stock for you.

Good Image

good quality image of holland

Bad Image


Image Size

Saving images for web. Of course, the better quality images, the bigger the file size and the longer to download. Make sure you image is only as big as it needs to be for where you plan to use it. For example, header images should be between 1000 and 1600 ixels wide. Images in the context area should be no bigger than 1000px. Images in the sidebars should it be 400 px. Save your images as jpg not png. Use online image compressor to make you image files as small as possible before uploading.


Placing Images on Page

Placing images in WordPress is easy.

  1. Click the add media button
  2. Upload your image.
  3. Select the image
  4. Click “insert into page”

Control Size or Placement of Images

Sizes

WordPress will automatically save your image in multiple sizes. The sizes are full(original dimensions), large (max 1000px), medium(max 300px) and thumbnail(150x150px square). To use these sizes, follow the same steps as above to upload your image and select it from the media library(steps 1-3). Now look at the side bar to the left of the media uploader/browser. Towards the bottom you should see a field for “sizes.” Use the dropdown to select the size you want. You may also choose whether or not the image links to the image file, an attachment page(a special page to display images, this page is automatically generated) or lastly, a custom url, which allows you to use the image to link to another page or website.

Positioning

Positioning the image to the right or left is easy. Use the classes “alignleft”, “alignright” and “alignone” to position the image to the right or left of text.These classes will also add a bit of spacing around your images to keep them from running into the text. If you want them to flush up against each other with no spacing, use the classes “float-left” or “float-right”.

Example code to align an image:


<img src="http://it.dixie.edu/wp-content/uploads/sites/45/2017/02/bison-1980589_640-300x198.png" alt="bison-1980589_640" width="300" class="alignright size-medium" />

bison-1980589_640
i’m in a div with alignleft class

Burmese. Siamese ocelot. Russian blue russian blue so american shorthair so burmese. American bobtail persian yet puma or jaguar, but ocelot for tom burmese. Mouser kitten grimalkin ocelot scottish fold or cougar siberian. Kitten havana brown cheetah, yet bobcat but bombay manx. Tomcat cougar. Kitty ragdoll yet ragdoll american shorthair abyssinian , lynx. Thai leopard panther. Havana brown cheetah. Ragdoll bombay but leopard. Devonshire rex american bobtail. Cheetah siamese panther so malkin cougar tiger.

Birman persian bengal manx but ocicat for tom. Mouser kitten yet donskoy sphynx and cheetah havana brown yet cornish rex. Russian blue havana brown and tom so american shorthair siamese malkin turkish angora. Devonshire rex russian blue but savannah but sphynx or american shorthair. Cheetah.

bison-1980589_640
i’m in a div with alignright class

Cougar. Tabby donskoy ocelot and ocelot siamese and siamese. Abyssinian devonshire rex manx. Abyssinian puma mouser yet bobcat. Tiger tabby but malkin. Donskoy tom cougar or turkish angora yet tiger ocelot and tom. Manx lion, for maine coon but kitty yet cornish rex. Ocicat turkish angora malkin or norwegian forest bobcat but devonshire rex, so scottish fold. American bobtail.

Munchkin. Donskoy bobcat for maine coon ocelot or himalayan. Tom lynx grimalkin egyptian mau, egyptian mau. American bobtail grimalkin and cornish rex yet maine coon and turkish angora or turkish angora singapura. Ocelot abyssinian . Panther abyssinian .

Singapura persian devonshire rex. American shorthair. Persian. Burmese thai, kitten. Ocelot siamese so ocicat so lion maine coon so tabby. Norwegian forest norwegian forest so bobcat bengal. British shorthair mouser.

bison-1980589_640
i’m in a div with alignnone class

Images on Mobile Devices

Our theme should automatically scale your images to be no larger than the size of the window. Sometimes this may cause images to look squished. This is easily fixed. Open your page in WordPress. Open the text editor tab. Find you image tag. Change the height attribute to auto. Click save. Now you image should scale correctly.