Embed Size (px)
DESCRIPTION
Whether you’re setting up a portfolio page, a site for realtors, or for a professional blogger, images are important. But how do you use images that look great and don’t slow down visitors to your site? What are some important considerations you need to have in mind? This talk will cover things like how WordPress handles images and what you need to know about that (thumbnails, regeneration); how to compress your images; how and when to use progressive jpegs, for instance, or pngs; and what you can do to help images on your site load faster (Photon, CDNs, static asset caching, parallel downloading, etc).
Citation preview
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/
