Images for WordPress(Done right)

@NancyThanki @MisfitIdeas

How does WP Handle Images?

How does WP Handle Images?

if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 150, 150 ); }

How does WP Handle Images?

set_post_thumbnail_size( $width, $height, $crop )

How does WP Handle Images?

if ( function_exists( 'add_image_size' ) ) {add_image_size( 'tag-thumb', 200,200 ); add_image_size( 'homepage-thumb', 220, 180 ); }

RegenerationRegenerate Thumbnailshttp://www.viper007bond.com/wordpress-plugins/regenerate-thumbnails/

Jetpack’s Photon Modulehttp://jetpack.me/support/photon/

Image PresentationGalleries

JetPackLightbox effects

FooBoxNextGen Gallery

NOTE: Make sure you link to “Media File”

JPG vs PNG

lots of compressions possibleeliminate redundanciessmaller file size = load faster = better for visitors and SEO

lossy=compressions affect quality=quality continues to degrade with each save

larger filesslower load time

allow for transparent backgroundslossless=higher quality images from the beginning=each save does not degrade the image

JPG vs PNG

Use for:high quality photoswhen you don’t need to make a lot of modifications to an image before uploading it (limit saves).

Use for:photos with text, illustrations, signs, logos, and iconsany image you want to have transparency.

Compressing ImagesWhile on your computer:1. Reduce the scale of the image. 2. Compress your image with a

photo editor. 3. Compress your image with a

photo compression tool.

keep the file size between 100-150kb

After uploading them:WP Smush.itEWWW Image OptimizerLazy LoadOR:add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );

Tim Thumb Vulnerability resizing tooltimthumb.phpvulnerability: people can easily upload and execute arbitrary php code in your timthumb cache directorydownload this scannercheck your themehttps://wordpress.org/plugins/timthumb-vulnerability-scanner/