Skip to content

Commit

Permalink
Optimize images for web
Browse files Browse the repository at this point in the history
Create retina (@2x) and non-retina version of all images
Add retina.js for displaying retina images on high-res devices
Optimize all images with ImageOptim

closes #52
  • Loading branch information
dougwt committed Dec 8, 2014
1 parent 9067b58 commit 3503384
Show file tree
Hide file tree
Showing 312 changed files with 256 additions and 66 deletions.
6 changes: 5 additions & 1 deletion kartographer/comparison/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,11 @@ class Character(KartComponent):

def file(self):
"""Return a lowercase form of the name used for image filenames."""
return static('images/mk8/faces/%s.png' % super(Character, self).file())
return static('images/mk8/characters/%s.png' % super(Character, self).file())

def file_large(self):
"""Return a lowercase form of the name used for image filenames."""
return static('images/mk8/characters-large/%s.png' % super(Character, self).file())

class Meta:
ordering = ['pk']
Expand Down
2 changes: 1 addition & 1 deletion kartographer/comparison/templates/comparison/add.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ <h4 class="panel-title col-xs-12 col-sm-4 col-md-6">
{% for item in characters %}<label class="fb fb-character" for="fb-character-{{ forloop.counter }}">
<input id="fb-character-{{ forloop.counter }}" data-pk="{{ item.pk }}" data-name="{{ item.name }}" data-speed="{{ item.stats.speed_ground }}" data-acceleration="{{ item.stats.acceleration }}" data-weight="{{ item.stats.weight }}" data-handling="{{ item.stats.handling_ground }}" data-stats="{% if item.stats.speed_ground %}{{ item.stats.speed_ground }}-{{ item.stats.speed_water }}-{{ item.stats.speed_air }}-{{ item.stats.speed_antigravity }}-{{ item.stats.acceleration }}-{{ item.stats.weight }}-{{ item.stats.handling_ground }}-{{ item.stats.handling_water }}-{{ item.stats.handling_air }}-{{ item.stats.handling_antigravity }}-{{ item.stats.traction }}-{{ item.stats.miniturbo }}{% else %}{{ item.speed_ground }}-{{ item.speed_water }}-{{ item.speed_air }}-{{ item.speed_antigravity }}-{{ item.acceleration }}-{{ item.weight }}-{{ item.handling_ground }}-{{ item.handling_water }}-{{ item.handling_air }}-{{ item.handling_antigravity }}-{{ item.traction }}-{{ item.miniturbo }}{% endif %}" data-traction="{{ item.stats.traction }}" type="radio" name="add-character" value="{{ item.id }}" tabindex="1" />
<div class="icon">
<img id="character-{{ item.pk }}" src="{{ item.file }}" alt="{{ item.name }}" title="{{ item.name }}" class="img-rounded">
<img id="character-{{ item.pk }}" src="{{ item.file_large }}" alt="{{ item.name }}" title="{{ item.name }}" class="img-rounded">
</div>
</label>{% endfor %}

Expand Down
1 change: 1 addition & 0 deletions kartographer/comparison/templates/comparison/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ <h3 class="panel-title col-xs-2">{% block panel_alt_title %}&nbsp;{% endblock %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Twitter Bootstrap JavaScript -->
<script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
<script type="text/javascript" src="{% static 'js/retina.min.js' %}"></script>
{% block script %}{% endblock %}
<script type="text/javascript" src="{% static 'js/jquery.contra.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/ion.sound.js' %}"></script>
Expand Down
33 changes: 20 additions & 13 deletions kartographer/static/css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -5451,20 +5451,27 @@ footer ul li em {
/* ====================== */
/* Layout */
/* ====================== */
body {
background-image: url("../images/mario-bg.jpg");
background-repeat: no-repeat;
background-position: right top; }
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
body {
background-image: url("../images/mario-bg@2x.jpg");
background-size: 379px 458px; } }

nav.navbar .container {
background-image: url("../images/flags.png");
background-repeat: no-repeat;
background-position: left -10px; }
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
nav.navbar .container {
background-image: url("../images/flags@2x.png");
background-size: 70px 70px; } }

@media only screen {
body {
background-image: url("../images/mario-bg.jpg");
background-size: 379px 458px;
background-repeat: no-repeat;
background-position: right top; }

nav.navbar .container {
background-image: url("../images/flags.png");
background-size: 70px 70px;
background-repeat: no-repeat;
background-position: left -10px; }
nav.navbar .container .navbar-brand {
padding-left: 75px; }
nav.navbar .container .navbar-brand {
padding-left: 75px; }

.logo a img {
width: 245px;
Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/django.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/django@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/flags.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/flags@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/logo@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/mario-bg.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/mario-bg@2x.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added kartographer/static/images/mk8/itembox.png
Binary file added kartographer/static/images/mk8/itembox@2x.png
Binary file added kartographer/static/images/mk8/karts/badwagon.png
Binary file added kartographer/static/images/mk8/karts/bdasher.png
Binary file added kartographer/static/images/mk8/karts/comet.png
Binary file added kartographer/static/images/mk8/karts/gla.png
Binary file added kartographer/static/images/mk8/karts/gla@2x.png
Binary file added kartographer/static/images/mk8/karts/jetbike.png
Binary file added kartographer/static/images/mk8/karts/landship.png
Binary file added kartographer/static/images/mk8/karts/mach8.png
Binary file added kartographer/static/images/mk8/karts/mach8@2x.png
Binary file added kartographer/static/images/mk8/karts/mrscooty.png
Binary file added kartographer/static/images/mk8/karts/sneaker.png
Binary file added kartographer/static/images/mk8/karts/theduke.png
Binary file added kartographer/static/images/mk8/karts/varmint.png
Binary file added kartographer/static/images/mk8/koopalings.png
Binary file added kartographer/static/images/mk8/koopalings@2x.png
Binary file added kartographer/static/images/mk8/mario-trophy.png
Binary file added kartographer/static/images/mk8/mechanic.png
Binary file added kartographer/static/images/mk8/mechanic@2x.png
Binary file added kartographer/static/images/mk8/pit-toad.png
Binary file added kartographer/static/images/mk8/pit-toad@2x.png
Binary file added kartographer/static/images/mk8/wheels/button.png
Binary file added kartographer/static/images/mk8/wheels/cushion.png
Binary file added kartographer/static/images/mk8/wheels/gla.png
Binary file added kartographer/static/images/mk8/wheels/gold.png
Binary file added kartographer/static/images/mk8/wheels/gold@2x.png
Binary file added kartographer/static/images/mk8/wheels/metal.png
Binary file added kartographer/static/images/mk8/wheels/monster.png
Binary file added kartographer/static/images/mk8/wheels/roller.png
Binary file added kartographer/static/images/mk8/wheels/slick.png
Binary file added kartographer/static/images/mk8/wheels/slim.png
Binary file added kartographer/static/images/mk8/wheels/slim@2x.png

0 comments on commit 3503384

Please sign in to comment.