{"id":4487,"date":"2019-11-04T12:34:25","date_gmt":"2019-11-04T17:34:25","guid":{"rendered":"https:\/\/blog.uvm.edu\/manual-test\/?p=4487"},"modified":"2020-09-18T12:35:49","modified_gmt":"2020-09-18T16:35:49","slug":"image-sizes-and-optimization","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2019\/11\/04\/image-sizes-and-optimization\/","title":{"rendered":"Image Sizes and Optimization"},"content":{"rendered":"\n

Image Sizes<\/h3>\n\n\n\n
\n
\n

The recommended image sizes for the UVM WP theme all have a 6×4 or 4×6 ratio. Most of the images on this size are 1500×1000 pixels for horizontal or 1000×1500 pixels for vertical at 72DPI. <\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n
\"demonstrating<\/figure>\n<\/div>\n\n\n\n
\n
\"demonstrating<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

It’s best to resize, crop and optimize your images prior<\/em> to uploading to your WordPress site. Unlike UVM’s Drupal site, WordPress will not compress your images, so it’s up to you to make sure that you are delivering the right size images at the smallest file size without sacrificing image quality. <\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Recommended workflow<\/h4>\n\n\n\n
\n
\n

Start with the highest quality source image before you crop to size. The target size ratio is 6×4 or 4×6. If your image is not large enough to crop to 1500×1000 (horizontal) or 1000×1500 (vertical), you can use this handy digital proportion wheel<\/a> to compute what pixel width and height that you can get from your source file while maintaining the target aspect ratio. <\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

We organize our images assets in folders like this:<\/strong><\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Original images<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Ready to be tinified<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Optimized<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

Place all your source images in the “Original Images” directory. Then crop the images and save in the “ready to be tinified” folder. The “Plan for Images” support page<\/a> offers some tips and tools to crop your images.
<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

TIP: Make sure your filename is all lower case with no spaces and has the pixel dimensions in the name. Save the cropped image in the “Ready to be tinified” folder. Your image can be either a jpeg or PNG. If saving your file as JPEG, make sure you save at 100% quality.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

For example: music_audition-1500×1000.jpg or music_audition-1500×1000.png<\/p>\n\n\n\n

To optimize your images (compress without losing quality), open the Tiny PNG website<\/a>. Drag your “ready to be tinified” PNG or JPEG images over the Panda where it says “drop your images here”. TinyPNG will compress up to 20 images for you, show you how much data you were able to reduce and then allow you to download a zip archive of the results to your computer desktop. Uncompress the .zip archive and place these images in your “Optimized” folder. These are the images that you will upload to your WordPress website. <\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"Tiny<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

TIP: TINY PNG limits the number of images to 20 that you can optimize at one time. If you find that you’ve exceeded that amount in one session, just empty the cache on your browser and try again. Be careful when you empty your browser cache as you don’t want to inadvertently lose passwords or browser history that you want to save. Get some technical support if you are unsure about how to selectively delete from your browser cache.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

Image Sizes The recommended image sizes for the UVM WP theme all have a 6×4 or 4×6 ratio. Most of the images on this size are 1500×1000 pixels for horizontal or 1000×1500 pixels for vertical at 72DPI.  It’s best to resize, crop and optimize your images prior to uploading to your WordPress site. Unlike UVM’s … <\/p>\n

Continue reading “Image Sizes and Optimization”<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[523032,2899,246029],"tags":[],"class_list":["post-4487","post","type-post","status-publish","format-standard","hentry","category-formatting","category-images","category-media-2","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"Formatting<\/a> Image Styles<\/a> Media<\/a>","rttpg_excerpt":"Image Sizes The recommended image sizes for the UVM WP theme all have a 6×4 or 4×6 ratio. Most of the images on this size are 1500×1000 pixels for horizontal or 1000×1500 pixels for vertical at 72DPI.  It’s best to resize, crop and optimize your images prior to uploading to your WordPress site. Unlike UVM’s…","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/4487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=4487"}],"version-history":[{"count":27,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/4487\/revisions"}],"predecessor-version":[{"id":5333,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/4487\/revisions\/5333"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=4487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=4487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=4487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}