Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Liam Raven
10,875 PointsOptimisation of web images
I've been doing research into website optimisation and the optimisation of images has obviously come up. The research is strictly for web. I thought I had pretty much nailed down some key ideas for a methodology, until it came to retina displays. Retina displays require 2x pixels of standard displays. I am trying to do this semanticly in the best way to optimise the site for SEO and user experience.
The point being, to do so requires the image to be in an IMG tag in HTML, not as a CSS background image, in which case I would have used media queries with @2x versions.
For performance optimisation the image should be the exact size as the width and height attributes.
Does anyone have any solutions they have found for semantic image optimisation? I was considering writing a php script that adds @2x to the end of the image name in SRC. Would that be effective?
3 Answers
Gavin Ralston
28,770 PointsSemantic image optimization?
I keep thinking "Make sure you use alt tags and don't double down on descriptions if you use captions..."
You're obviously talking about something entirely different. Could you provide links to some of your research? I'm not sure how image sizes will help SEO, exactly, but nothing surprises me anymore. :)
Off the top of my head, though, if you want to make images look pretty on high density displays and normal ones, use vectors where you can (SVG's)
Sean T. Unwin
28,690 PointsGood question with some tough choices.
As you mentioned, Liam, srcset would be really good if it was better supported.
This could be augmented through using the <picture> element in conjunction with the JS polyfill Picturefill to assist. You may not want to <picture> all the things, however.
Another JavaScript library attempting to help with the issue of viewports and images is Retina.js.
For a more server-side possibility there is the PHP-based Adaptive Images.
There is also this option which utilizes PHP and jQuery.
It could, arguably, be just as important, if not more so, to start at the source, so to speak, with regards to how we save our images initially, such as incorporating the concepts of the compressive images technique. Here (using Google translate as it's originally in Dutch, I believe) is a really good, in-depth experiment about it.
Felix Yakubov
17,475 PointsTry feedthebot.com to get hints on how to improve SEO
Liam Raven
10,875 PointsLiam Raven
10,875 PointsYeah sure.
Google go pretty deep into image optimization in their developer documentation (https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)
To optimize the user experience the page load time should be low (this increases sales and reduces bounce rate etc)
To ensure images are accessible, the images MUST be in the HTML (so that alt tags can be provided).
For background images, alt tags aren't needed so CSS can be used.
Background-image (CSS) should NOT be used for normal images, that non-semantic code and has a deteriorating effect on accessibility.
SVG images should be used when possible (minified and optimized as files).
I'm trying to give some sort of guide for e-commerce sites. These sites have 1000's of product images, SVG images clearly are not on the table for product images. Most likely they will be compressed raster images, passed through Photoshop, jpegmini afterwards. But.. for high density displays, @2x images are required, how can we do this?
The teamtreehouse image optimization video says to simply double the resolution of the image. For a 300x300 image on screen, use a 600x600 image (which the browser will resize). That is not optimization. That would give normal displays 4x the image load time that is required..
Logically we should use @2x images for retina displays and @1x images for normal displays.
How can we use @2x images in HTML for high density displays only?
Gavin Ralston
28,770 PointsGavin Ralston
28,770 PointsA good look at high DPI screens which is a much more thorough discussion than I could hope to achieve.
As for the image sizes not being heavier, I'm not at all sure how you will ever get around that. Doubling pixel density means your file sizes will more or less go with the square. Every other solution you see anywhere else is...not what you want.
I think this is where ideology meets reality and you have to pick the practice you want to "break from."
Especially on pages where you're seeing zillions of thumbnails of products (10 billion requests anyway) or on a product page where you have one great big image where your goal isn't probably to be the #1 SERP (which it won't ever be, it's a product page on an ecommerce site) but to be pretty and have a highly effective call to action. I think that's worth the nominal performance hit to make sure everything is as attractive as possible.
I guess the big problem is the one that has always existed: It's easy to lose pixels, but more or less impossible to create them from nothing.
Liam Raven
10,875 PointsLiam Raven
10,875 PointsThat resource was good thanks. It seems what I'm looking for is srcset but its not widely supported yet.
Gavin Ralston
28,770 PointsGavin Ralston
28,770 PointsYeah it's not fully supported, but it certainly looks like its gaining strong support quickly, which helps.