Images

Try out the new:
Photo Database

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. Your best option is to contact creative services to take photos for you, or request your web intern to search our photo stock for you. Additionally you may purchase photo-stock, but check with Web Services BEFORE purchasing to ensure you purchase the correct license option.

Image Sources

  1. Use DSU’s photo database.
    Creative Services maintains a database of high-quality University approved images for use by students and staff. You must log in with your DixieID to view and download images.

  2. Ask Creative Services.
    They will be able to provide you with high-quality custom or stock images specific to your needs that DSU owns the copyright to.

  3. Ask your Web Intern
    They have access to DSU’s photo database and will be able to provide you with DSU-owned photo-stock that will be suitable to your needs.

  4. Use your own
    Any images you own you may allow DSU to use on our website.

  5. Purchase photo-stock
    There are hundreds of online photo-stock companies that will sell you usage rights to use an image on your site. Please check with Web Services before making a purchase to make sure you purchase the correct license type.

Good Image

good quality image of holland

Bad Image


Image Size

Saving images for web is a balance between quality and file size. The better quality images, the bigger the file size and the longer to download; a smaller file may be faster to download, but will be lower quality. 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 pixels wide. Images in the content area should be no bigger than 1000 pixels on their longest dimension. Images in the sidebars should be no more than 400 pixels wide. Save your images as “jpg” rather than “png” or “bmp”. “JPG” offers you the best image quality at the smallest image size. Consider following this tutorial to crop, rotate, and resize your images.

If you’re familiar with Photoshop, you can use it to compress your images. If not, you can use online image compressors to make you image files as small as possible before uploading.

Online Image Compressors


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.