Preparing & Saving Images for Web

JPG/JPEG vs PNG

JPG – most used; works well for complex images, photographs, most images you’ll upload into the media library; ability to be compressed into smaller file sizes which help with page load time

PNG – allows for more colors than JPG; doesn’t lose quality when compressed; great for logos, icons/graphics and when you need a transparent background

RGB vs CMYK

RGB – for web; has a larger color space than can be produced on the press; files are smaller since there are only 3 color channels vs 4; 

CMYK – for print

Resolution 

72dpi (dots per inch)

Unit of Measure

Pixels

Filesize

<500kb – larger background/banner photos

~200-350kb (or less) for general images

Dimensions

Portrait/vertical – ~1200px max-height

Landscape/horizontal ~1200px unless it’s a full-page background/hero banner 1600-2200px depending on height and quality vs file size

File Naming

• Name your files descriptively but short (~5 words)
• Separate spaces with a hyphen

Important Notes

Resize & name your images before uploading them to WordPress.

Resources

Image Compression

TinyPNG

WordPress Plugins

Imsanity

Smush IT

WP-Optimize

WordPress Functions

These scripts can go in your functions.php file inside your theme or you can create a folder in your theme called ‘functions’ by placing the first script in functions.php to scan the folder for all added functions.

1
2
3
4
5
//!Scan functions folder

$inc = scandir(dirname(__FILE__).'/functions');

 foreach($inc as $k=>$v){

 if($k>1 && is_file(dirname(__FILE__) . '/functions/'.$v)) include(dirname(__FILE__).'/functions/'.$v);

 }

Disable Image srcset

1
2
3
4
5
// Disable srcset on front-end

 function disable_wp_responsive_images() {

 return 1;

 }

 add_filter('max_srcset_image_width', 'disable_wp_responsive_images');

Add Title and Alt Attribute to WordPress Image the_post_thumbnail

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Add Title and Alt Attribute to WordPress Image the_post_thumbnail */



function ac_add_img_title( $attr, $attachment = null ) {



    $img_title = trim( strip_tags( $attachment->post_title ) );



    // or get the title instead of image title $attr['title'] = the_title_attribute( 'echo=0' );



    $attr['title'] = $img_title;

    $attr['alt'] = $img_title;



    return $attr;

}

add_filter( 'wp_get_attachment_image_attributes','ac_add_img_title', 10, 2 );

Automatically Set the Image Title, Alt-Text, Caption & Description upon Upload to Media Library

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* Automatically set the image Title, Alt-Text, Caption & Description upon upload */

 add_action( 'add_attachment', 'my_set_image_meta_upon_image_upload' );

 function my_set_image_meta_upon_image_upload( $post_ID ) {



 // Check if uploaded file is an image, else do nothing



 if ( wp_attachment_is_image( $post_ID ) ) {



 $my_image_title = get_post( $post_ID )->post_title;



 // Sanitize the title:  remove hyphens, underscores & extra spaces:

 $my_image_title = preg_replace( '%s*[-_s]+s*%', ' ',  $my_image_title );

 

 // Sanitize the title:  capitalize first letter of every word (other letters lower case):

 $my_image_title = ucwords( strtolower( $my_image_title ) );

 

 // Create an array with the image meta (Title, Caption, Description) to be updated

 // Note:  comment out the Excerpt/Caption or Content/Description lines if not needed

 $my_image_meta = array(

 'ID' => $post_ID, // Specify the image (ID) to be updated

 'post_title' => $my_image_title, // Set image Title to sanitized title

 //'post_excerpt' => $my_image_title, // Set image Caption (Excerpt) to sanitized title

 //'post_content' => $my_image_title, // Set image Description (Content) to sanitized title

 );

 

 // Set the image Alt-Text

 update_post_meta( $post_ID, '_wp_attachment_image_alt', $my_image_title );

 

 // Set the image meta (e.g. Title, Excerpt, Content)

 wp_update_post( $my_image_meta );

 

 } 

 }