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).

1. Images for WordPress
(Done right)
@NancyThanki

2. How does WP Handle
Images?

4. How does WP Handle
Images?
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );
}

5. How does WP Handle
Images?
set_post_thumbnail_size( $width, $height, $crop )

6. 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 );
}

8. Regeneration
Regenerate Thumbnails
http://www.viper007bond.com/wordpress-
plugins/regenerate-thumbnails/
Jetpack’s Photon Module
http://jetpack.me/support/photon/

10. Image Presentation
Galleries
JetPack
Lightbox effects
FooBox
NextGen Gallery
NOTE: Make sure you link to “Media File”

14. JPG vs
PNG
lots of compressions possible
eliminate redundancies
smaller file size = load faster = better
for visitors and SEO
lossy
=compressions affect quality
=quality continues to degrade with each
save
larger files
slower load time
allow for transparent backgrounds
lossless
=higher quality images from the
beginning
=each save does not degrade the
image

15. JPG vs
PNG
Use for:
high quality photos
when 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 icons
any image you want to have
transparency.

16. Compressing Images
While 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.it
EWWW Image Optimizer
Lazy Load
OR:
add_filter( 'jpeg_quality',
create_function( '', 'return 80;' ) );

17. Tim Thumb Vulnerability
resizing tool
timthumb.php
vulnerability: people can easily upload and execute arbitrary
php code in your timthumb cache directory
download this scanner
check your theme
https://wordpress.org/plugins/timthumb-vulnerability-scanner/