要优化网页在手机上的加载速度，可以通过以下几种方式使用CSS媒体查询和响应式图片技术进行优化：

1. 使用CSS媒体查询：可以根据不同设备的屏幕大小和特性，加载不同的CSS样式。通过使用@media规则，可以根据设备的宽度和高度等属性来加载不同设备上所需的样式，从而减少加载不必要的样式。这样可以确保只加载适用于特定设备的样式，提高加载速度。

2. 响应式图片：为了适应不同设备的屏幕大小，可以使用响应式图片技术。通过使用srcset和sizes属性，可以指定不同屏幕宽度下加载不同大小的图片。这样可以确保在加载图片时只下载适合当前设备的图片大小，减少了浪费流量和提高了加载速度。

3. 使用icon font代替图片：对于一些小图标，可以使用icon font来代替图片。icon font是使用字体字形的方式来呈现图标，相比于加载图片，它可以减少HTTP请求和文件大小，提高加载速度。

4. 压缩和合并CSS：通过压缩CSS文件和合并多个CSS文件，可以减小文件大小和HTTP请求的次数。可以使用一些工具来压缩和合并CSS，例如CSSNano和Grunt等。

5. 使用CSS Sprites：将多个小图标或背景图片合并为一个大图，并利用CSS的background-position属性来显示特定部分。这样可以减少HTTP请求的次数，提高加载速度。

以上是一些优化网页加载速度的CSS技术。可以根据具体需求选择合适的方法来优化网页。