Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Making kitten GIF galleries fabulous - Image optimisation for WordPress
Similar to Making kitten GIF galleries fabulous - Image optimisation for WordPress (20)
Recently uploaded
Recently uploaded (20)
Making kitten GIF galleries fabulous - Image optimisation for WordPress
- 1. @Kayleighthorpe Making Kitten GIF Galleries Fabulous Image optimisation for WordPress
- 3. Choosing an appropriate theme Things to consider: • Rating on the Theme Repository • Date of last updates • Simplicity • Required plugins? • Speed impact @Kayleighthorpe
- 5. Choosing a Gallery Plugin Things to consider: • Rating on the Plugin Repository • Date of last updates • Features • Ease of use • Speed impact Popular Gallery Plugins: • NextGEN Gallery • Foo Gallery • Envira @Kayleighthorpe
- 6. @Kayleighthorpe NextGen • Multiple galleries • Easy to manage • Custom thumbnails • Shortcodes • Multiple gallery styles • Tags & description editor • Pagination • Watermarking • Built in Lightbox • Widgets • Sliders Envira • Multiple galleries • Gallery SEO • Shortcodes • Lots of premium add-ons FooGallery • Multiple galleries • Border effects • Custom thumbnails • Shortcodes • Multiple gallery styles • Hover effects • Custom CSS • NextGen Importer
- 9. Features: • Not a plugin! • Easy to create galleries during post making • Titles and Captions • Different Gallery Styles • Custom Thumbnails * Can be extended via plugins - WP Canvas @Kayleighthorpe
- 13. • Jetpack offers a portfolio custom post type which is supported by a wide range of themes. • To activate this download Jetpack, connect to WordPress.com using the plugin and then the option to enable portfolios will be in your ‘Settings’ > ‘Writing’ area of the dashboard. @Kayleighthorpe
- 14. Example of the Virtue theme showing Jetpack’s Portfolio page: @Kayleighthorpe
- 16. Optimisation Plugins • Jetpack: Photon - Downsizes images based off the size of the element they are being displayed in. • WP Smush - Compresses images by removing meta data, optimising compression and changing GIF files into smaller extended PNG files. • EWWW Image Optimizer - Automatically optimises images as you upload them to your site. @Kayleighthorpe
- 17. @Kayleighthorpe
- 18. Optimising images in WordPress uses a LOT of memory! @Kayleighthorpe
- 19. Things you can do: • Resize Images • PNG/JPG vs BMP • Good Hosting • Simplistic Theme Things your host can do: • GZIP Compression • Set Suitable WP_MEMORY limit • Use of CDN - MaxCDN? Help WordPress with the load: @Kayleighthorpe
- 20. File type choice @Kayleighthorpe JPG GIF PNG JPG use lossy compression techniques.16 million colours and are best suited for photographs and complex graphics. Does not work well on line drawings or typography. Both lossy or lossless compression. Supports 256 colours. Suitable for line drawings with a few colours and animations. Supports transparency. PNGs also offer lossless compressions. 16 million colours. Usually PNGs will be smaller files than GIFs if compressed properly. They also support transparency. 97KB 128KB 118KB
- 21. GIF compression @Kayleighthorpe GIFs really need compression. Even small GIFs can be HUGE! • Lossy: Smaller file size at the expense of image quality Two types of GIF compression: • Lossless: Not as much compression but preserves image quality Compression works by either removing some colours from the image or blending similar colours into one to reduce data on file - dithering.
- 23. GIF compression @Kayleighthorpe Some handy GIF compression tools: compressor.io • Lossy GIF compression - But reduces image size by around 38% EZGIF • Allows you to choose your image reduction level - handy but lossy compression results better with compressor.io gifreducer.com • Allows you to select level of dithering, can keep a lot of image quality and reduced image size by around 12%
- 24. Computer Programs • Adobe Bridge - Mass resize images PNG & JPEG Compression Server Tools • pngquaint - Reduces .png file sizes by up to 70% • mozjpeg - Same for JPEGs •Tinypng - Compresses .png files and preserves transparency https://github.com/mozilla/mozjpeg https://pngquant.org https://tinypng.com @Kayleighthorpe Images account for around 62% of page load times across the web
- 25. add_image_size() @Kayleighthorpe The add_image_size function within WordPress can be used to create thumbnails of your images upon upload. <?php add_image_size( $name, $width, $height, $crop ); ?> You can use this to get WordPress to add and create thumbnail sizes appropriate for your site. • You might wish to re-generate your thumbnails after adding or changing the thumbnail sizes.
- 27. Regenerate Thumbnails @Kayleighthorpe After adding custom image sizes you might wish to regenerate your thumbnails to go through previous uploads. With a plugin: • Regenerate Thumbnails With WP-CLI: • wp media regenerate --yes
- 29. Lazy Loading @Kayleighthorpe Every image on your page is a new HTTP request. Lazy loading forces images to only load when they are ‘above the fold’ - images visible as soon as the page shows will load first, and other images will load when the user scrolls. Lazy loading plugins to try out: • Lazy Load • Image lazy load • jQuery image lazy load WP
- 30. Responsive Images @Kayleighthorpe This plugin was merged into WordPress core. Will serve generated thumbnails based off browser size and choose the appropriate thumbnail. <picture> <source media=“(min-width: 650px)” srcset=“/images/largerimage.png”> <img src=“/images/smallerimage.png”> </picture> • RICG Responsive Images Uses srcset attribute
- 31. @Kayleighthorpe
- 32. HTTP/2 @Kayleighthorpe HTTP/2 is an upgrade to the HTTP protocol which can speed up your website. When a normal HTTP request is made on your website. Every packet requires a new request. So each image loaded on your site is a new HTTPs request. HTTP/2 keeps the stream open, meaning a request is made, and then data is pushed through, but the stream is kept open, so more requests can be added to it, speeding things up.
- 33. Speed Testing - webpagetest.org Google Pagespeed | GTMetrix @Kayleighthorpe
- 34. Thank You! @Kayleighthorpe kayleigh@34sp.com albinofruit.com Credits and Links Online compression tools: • https://compressor.io • https://ezgif.com • http://gifcompressor.com • https://pngquant.org • https://github.com/mozilla/mozjpeg • https://tinypng.com Plugin mentions • Jetpack (Portfolios) • WP Smush • EWWW Image Optimizer • Lazy Load • Image lazy load • jQuery image lazy load WP • https://codex.wordpress.org • https://www.webpagetest.org WordPress Codex: Speed Testing:
Editor's Notes
- Introduce self Images account for majority of site load, gonna be talking about how to reduce that load and speed up image heavy sites Before we get into the optimisation will be talking about initial set up of site which will hopefully have lots if images
- Before anything gonna talk about how i would personally set up a WordPress site that I plan to host a lot of images on. These are just some rules I stick to myself, which think are helpful, not necessarily saying it’s correct way, just some stuff to bear in mind
- Themes with lots of built in plugins would probably steer off
- white theme - keeps attention on image content will bring in Lightweight
- Gallery plugins typically have a LOT of features, so speed impact will be an issue
- These are three popular gallery plugins I really like and have used before, NEXTGen has loads and loads of features, Envira is nice for bare minimum in my opinion, and Foo Gallery is a nice in between in terms of features. Point is don’t choose the plugin which is too hot, with loads of features, or the one that’s too cold and is lightweight but doesn’t do everything you need - choose the one which is just right. Like choosing Porridge - I really like these plugins myself and used them in the past
- However, these day’s I sod the plugins, and that’s because I learned that WordPress has really good gallery functionality built in. More than that - it does everything I usually need my galleries to out of the box. Benefits to this are you don’t need an additional plugin - gallery plugins are resource intensive and you might fine you’re just duplicating some functionality WordPress already has
- Out of the box WP galleries look really nice. Nothing customised here, I just threw images into a gallery when creating a page.
- It can be a bit basic for some people, but out of the box I find WordPress Galleries really useful because not only do they look good, but there are multiple gallery styles, can set titles and alt tag captions which I like for me SEO. I can set custom thumbnails. All my gallery plugins also do this - but why should I double up on something my site already knows how to do? If too basic can be extended - WP canvas
- This is what gallery creation looks like by default,
- With WP canvas added on, I get additional gallery styles, fancy CSS options for my alt tags, there’s a slider option, it just extends what I already have without using a huge plugin and doubling up on anything.
- The only problem I sometimes have with WP galleries is that there’s no central location to organise my galleries in - I have to go into the post/page they are on. A better solution to this I found is using Jetpack’s Portfolios plugin - adds a custom post type where I can manage my different gallery pages in a central location. So I can just go to that section of my dashboard to handle galleries rather than digging through various posts and pages
- If you have Jetpack - you can enable portfolios by going to setting > writing - adds it to sidebar What I really like about Jetpack portfolios is that some themes also have custom styles for the portfolio pages.
- This is the main portfolio page on my site - Jetpack portfolios are displayed in a nicely laid out page, saves me creating a fancy page for gallery navigation.
- Okay, so spoke about setting up a website which is ready to handle a lot of images, we’ve made it as basic as possible, might use plugin, might use WP galleries, up to you Now just gonna talk about some ways you can optimise the images you upload to your site. As I said images can cause a lot of load on the site and even with a nice clean theme and minimal plugins you can still have quite a slow site if your images are not optimised
- Easiest way to do this - use a plugin
- Just showing EWWW Image Opimiser and how it works - options for images before upload - click bulk optimise to handle existing images. Can take a while, however if it does there is some WP-CLI functionality for image optimiser - if you’re not familiar with WP-CLI Edmund will be talking about it tomorrow - definitely worth looking in to as it’s really handle for command line site management
- The downside of using a plugin to optimise is it will use a lot of memory, can cause site to slow down, especially if on shared hosting and limited resources are avaialble.
- 4000 vs 2000 pixel wide images - any need? Speak to hosting about GZIP compression - most hosts should already support that which helps compress various assets before sending them to your browser. Setting suitable WP limit - suitable because you don’t want to set it crazy high - 258 is usually a high max limit, speak to hosting about what is best for the package you are on, though Use a CDN, which can cache your images and serve their cached versions to your viewers, saves load on your server and can speed things up
- File choice is important, think about what you upload to your site. I used to just upload PNGs regardless of what the image was - but that’s not necessarily best practice. JPGs have huge colour support, and are usually the best option for large photo images, their compression can however mess up illustration and vector images. GIF is good for animation, and PNG works well for illustration and transparancy support. I’m not saying any file type is better than the other, just consider the best file type for the kinds of images you are displaying BMPs are evil, also look out for WebP files which Google had introduced as a kind of JPG alternative, not seen much of it yet but that might also be a good file type to save photos to
- Gonna talk specifically about GIF compression now, as I promised we’d get a cat gif in here. Two types - Lossy and lossless - lossy compression usually blends similar colours into one colour, or removes some colour data. Which reduces file size but can harm image quality
- Here’s an example - idk how well you can see this but the compressed image, whilst a lot smaller, has been messed up somewhat by the compression. I used a lot of compression for that image - you want to find a level of compression which reduces file size, but doesn’t completely ruin your image. If you need a super high quality animation on your site - consider using video instead
- Some gif compression tools
- ok - Say you have a site which you regularly want to server a certain image size on. I might have a page type where I want to share 200x200 pixel versions of my images on. I can save myself some hassle and add a custom image size to my theme’s functions.php WordPress creates 4 or 5 thumbnails depending on theme as it is - so think before you add to many, can result in 1000s of files.
- Here’s an example of an image I uploaded, this uploaded the original file, but also a smaller one I can choose to serve, no need to add the load of the larger image if I just plan to have it resized to a smaller size.
- If you do add a custom thumbnail - it will not go back and add the thumbnails for previous uploads - so you can regenerate your thumbnails for older images with plugin, or WP-CLi, Edmunds talk, go see it, WP-CLI is great
- Now I’m just gonna add some little additional trips, which I couldn’t really fit anywhere else
- Lazy loading - worth looking into, serves images as they are viewed on your site - above the fold. Images get loaded as you scroll down the page. Can be used to cheat page speed tests - so disable before running those if you want a more accurate site speed reading
- WordPress added a great plugin into it’s core not too long ago. As I said before WordPress creates several thumbnails as part of your image upload. The reason for that is that WordPress can change the image which is served to suit the size of the browser it’s on. For example an image served on a huge retina laptop, which is 3000 pixels wide, does not need serving on a mobile. WordPress can server a smaller version of your image to suit the browser. I’ve added this little bit of code to one of my pages to show you kind of how it works,
- So this is an image on a page on my site. I’m just going to re-size this image, and it will display a different, lower res image for the smaller browser size cap. This is built in already - should be on your site unless your theme is stopping it, so take a look. No need to serve huge images on tiny screens and slow your site down
- Talk to hosting about HTTP2 - should be supporting it, or working towards it at the very least
- Finally, after trying some of my tips here, you might want to check your site speed according to something like webpagetest or Google pagespeed. Pretty much the same thing. We like webpage test because it has a lot of insights as to what is slowing you down, and it gives you nice grades.
- Okay, thanks for listening, I’ve added a bunch of links to stuff I mentioned, and plugin names. If there is anything you wanted from the talk just come and chat to me after this and I can give you the link. Hopefully you found this useful, any questions?