How to combine images using CSS sprites

css wordpress yslow gtmetrix
Drickuss Merguez picture Drickuss Merguez · Nov 20, 2017 · Viewed 14.6k times · Source

After Testing my wordpress website speed using GTmetrix, I got the following recommendations over YSlow: enter image description here

*Combine images using CSS sprites The following images served from wamakity.com should be combined into as few images as possible using CSS sprites. enter image description here

*Add Expires headers There are 9 static components without a far-future expiration date. enter image description here

*Make fewer HTTP requests This page has 16 external Javascript scripts. Try combining them into one.

This page has 14 external stylesheets. Try combining them into one.

This page has 15 external background images. Try combining them with CSS sprites.

Can anybody help? I'm new to wordpress and I can't seem to find any other way to solve this problem except from here. Thanks!

Answer

pauline.korkina picture pauline.korkina · Nov 20, 2017

My favourite sprites generator is https://spritegen.website-performance.org/ All you need is to drag and drop small images to the window, download spritesheet.png, stylesheet.css and then change background-image and background-position properties of this images in your style.css

Related questions

How To Include CSS and jQuery in my WordPress plugin?

How To Include CSS and jQuery in my WordPress plugin ?

Read More
How to build floating menu bar when scroll down

When I scrolled down site display black menu bar at the top look like float bar. but I think there's jquery involved with this. I have tried CSS but seems not working for me like the way i want it …

Read More
CSS background images in WordPress

Is it possible to get a background image in CSS like you normally do in HTML when working with WordPress. I've tried doing this but it doesn't work. background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");

Read More