Optimizing jpg images at 2x in Photoshop for high-resolution screens

Why would I make a 2x images for my responsive site?

2x images are scaled-up and optimized for Retina/HiDPI screens. They’re scaled to twice the size of 1x images, but since retina screens have twice the pixel ratio of most other screens they output the same size visually as 1x.

If the jpg image is 1x, it can look “fuzzy” or “pixelated” on higher DPI screens.
Here is an example:

Old Main at 1x and 2x

Instructions on how to “2x up” an image in Photoshop for a 250x250px jpg image:

  1. Start with original document height and width dimension then multiply by two. These are your new height and width values. In this case, the new document size will be 500x500px.
    • Original height x 2 = new height for 2x image
    • Original width x 2 = new width for 2x image
  2. Import your higher dpi image or design as usual, but use the bigger version rather than the 250px image
  3. When done, save for web at around 10 quality in Photoshop

Photoshop save for web 10 quality

Video jpg 2x image Retina tutorial

Making HTML email images look sharp on high-resolution screens

Fuzzy LogoDo you have “fuzzy” images when you test your HTML emails on “retina” or HiDPI devices and screens?

I did some HTML email testing in various optimized image file formats like jpg, gif, and png.

I was tasked with looking at graphics like the header and footer of the HTML email template. These are different from a jpg photo image and will talk more about that later.

The header was originally saved as a jpg at 600px wide and the file size was around 17kbs.
Not bad, but when I would preview it on my retina devices, it would look fuzzy. So I used the 2x image optimization method to see if we could make it look better while keeping it relatively close to the previous file size.

How to approach the image optimization of graphics in Photoshop

  1. Take the original image size and make a new document in Photoshop that is 2 times the size. (In this case, the original graphic was 600x100px, which would be sized up to 1200x200px)
  2. The new larger document must use vector or larger dpi images that won’t be fuzzy at that new larger size.  (You can’t just resize the original image up, stretching the pixels)
  3. Once you have the new artwork or bigger image you save it for web/optimize it so the file size won’t be huge.

Here are the results and file formats:

Wayne State University HTML email header graphic

So for a graphic with vector images, the best results are to save as a png-8 or gif.  You can adjust the amount of color to save more filesize to your liking.  As you can see png-8 actually saved a couple of kbs of size and this image is double the size of the original jpg!

We also resized and optimized the footer images:

Wayne State University HTML email footer images

In this case, we tested the png’s as transparent as well which came out slightly bigger.  So again either gif or png-8 format would work.

Final results

WSU HTML Email Template 2x

Speed test

3g speed origninal images at 1x
3g speed original images at 1x

 

3g speed new images at 2x
3g speed new images at 2x

 

Looking at the test results you can see there are not much different, although we did end up saving some filesize and load time on the new 2x images.  Along with saving some kbs, the ultimate goal of making it look sharp on “Retina” and HiDPI devices was accomplished.

For jpg photo images in HTML emails, you can do something similar to the method above by following the instructions on, “How to make jpg images 2x for “Retina” and HiDPI devices in Photoshop”.

View Post

That’s it! Pretty simple solutions to make our HTML email images crisp with keeping the file size low. Let me know if you have comments or questions below!

Global Accessibility Awareness Day 2017, Detroit

Thursday, May 18, 2017

6:30 PM to 8:30 PM

Bamboo Detroit

1420 Washington Blvd, Suite 301, Detroit, MI
$5.00 /per person

Event description

Back for the fourth year, Global Accessibility Awareness Day Detroit is a day to gather together to learn about digital accessibility and how to make the web more accessible for everyone. Events will be held around the world to raise awareness about web accessibility.

This year’s event is jointly hosted by Refresh Detroit and Ladies That UX Detroit.

Who is this event for?

If you’re working on the web, creating, developing, or designing websites or content for others to use, this event is for you! Or if you want to learn how we can work together to make the web accessible to everyone, we’d love for you to attend.

For our event, we’ve invited two local experts to talk about the importance of planning for accessibility in your design project and how to use an automated accessibility testing tool.

Agenda

6:30pm to 7:00pm: Welcome, food, refreshments, and networking
7:00pm to 7:10pm: Introductions
7:10pm to 8:20pm: Presentations
8:20pm to 8:30pm: Announcements and thanks to sponsor
8:30pm: Time to leave

Presentations

Design Before Code: Thinking About Accessibility from the Ground Up 
Caitlin Geier, UX Designer at Deque Systems

Think about accessibility when designing: don’t wait till it’s coded!  Caitlin will offer accessibility tips for designers so that time will be saved in development.

Introduction to aXE
Matt Isner, JavaScript Developer at Deque Systems

Learn how to check the accessibility of your web projects with aXe, a free Chrome extension and open source JavaScript accessibility testing engine.

Speakers

Caitlin Geier

 

As a UX designer, Caitlin’s work with accessible design flourished once she began working for Deque. She is passionate about understanding the users she’s designing for.

Caitlin continually strives to incorporate accessibility elements into her work in order to ensure that all users can benefit from inclusive design.

Matt Isner

 

Matt specializes in teaching development teams to plan, test, and code for accessibility and has helped orchestrate large remediation efforts of complex enterprise applications.

He is intrigued by the idea of the computer system as an expression of human neurobiology, and champions the notion that accessible web content is better understood by both humans and computers.

Sponsor

Deque Systems is a leading provider of web and mobile accessibility software and services. Our mission is digital equality, and the Deque team consists of leaders and innovators in accessibility and testing tools development.

We strive to provide practical accessibility solutions that reflect real-world development environments, and we work with a broad range of clients to not only fix their inaccessible content but to integrate accessibility into their existing design and development processes through the use of automation and training. Not sure about your site’s accessibility? Check it with aXe.

Next Web workers meeting – March 20, 2015 – Accessibility

RAVPDo you manage a school/college/departmental website that represents the university? This meeting is for you.

Come share your successes, failures, questions and lessons learned with other Web workers from around campus.

This meeting’s agenda includes:

  • Matt Ouellett from the Office of Teaching and Learning will be facilitating a group discussion to create a Web accessibility working document
  • Round table

Everyone is welcome and encouraged to share their experiences.

March 20 at 10:30 a.m. in the Simon’s Room, 144 Purdy Library

RSVP is not required but suggested.

Accessible building entrance icons added to the flash campus map

To increase awareness of all our accessible entrances on campus, we have implemented some new functionality to our campus map. We have added a toggle switch on the bottom-right side of the map to switch to an accessible entrances view, showing where the entrances are on each building.  There are two new icons in the map key to show Accessible Entrances with and without automatic doors.

Campus Map Togglecampus-map-ada

We have also provided a printable PDF version of the map that you can get from our printable maps page. Or try it out live at campusmap.wayne.edu.

November 12, 2009: World Usability Day – Designing for a Sustainable World

The 5th World Usability Day and the 7th Annual Usability and Accessibility Conference at Michigan State University, will be held on Thursday, November 12, 2009, at the Kellogg Hotel and Conference Center on the MSU campus.

Designing for a Sustainable World

Designing for a Sustainable World focuses on how our products and services impact our world. The ‘Cradle to Cradle’ approach is to start the design with the premise of using materials that can fully enter a new life cycle by either going back to nature or going back into the design process as a new product. This holistic approach to sustainable design shows how usability can apply to all of what we do and build.

Please “Save the Date” for this program that will be relevant to researchers, professionals, and students alike. Explore advanced and timely topics of usability, accessibility and human-technology interface design in the sustainable global knowledge economy.

Tours of the MSU Usability & Accessibility Center are included in the day’s agenda.

For information on how to get involved, please visit http://www.usability.msu.edu/conf/2009/.

Getting Around Campus On The Go

iPhone MapWe have begun adding functionality to our Campus Map, which is currently developed in Flash, to be accessible to the iPhone and iPod Touch.

The iPhone cannot view the Flash site so if you wanted to look at or follow the map you were out of luck. With a little iPhone detection we redirect users to: http://campusmap.wayne.edu/iphone/

Instead of getting a flash version of the map we converted it to an SVG image and embedded it. This allows for the fully viewable main campus map to be viewable and scalable without getting blurry. Although it is not the best solution it is a step in the right direction.

What’s Next?

As we continue to support the iPhone and iPod Touch features we will soon release a fully searchable map that includes all our campuses. It will also be able to link to the built in Google Map to pinpoint its location.

As C&IT expands wireless availability on campus the easier it is to get oriented with campus while you are walking through it.

Your Opinion

What would you like to see on the campus map? Are we missing something or is something not working like you expected? Let us know, we would love to hear about it. Just comment on this post.

Advocating for Web Standards and Accessibility

Earlier this week I gave a presentation about Web Standards and Accessibility to the ASIS&T Wayne State Student Chapter.

I gave the presentation as an overview of the importance of web standards and accessibility. Not only as the right thing to do but also how they can benefit any web project. Not only is there a cost savings to having and using standards but there is also a search engine benefit and overall your users will be happier.

Unfortunately the real world execution is not so cut and dry. Scope, time constraints and lack of communication effect the end result of both standards and accessibility. The key is communication, letting everyone know what the standards are and if there is an addition. Making standards and accessibility a habit and baking it into every piece of work you do will make it that much easier to execute on a consistent basis.

Presentation Video

Presentation Slides

View more presentations from Nick Denardis. (tags: web standards)

Resources

Last but not least

!important is not your friend, please stop using it.

WCAG 2.0 is official, now what?

Ten years after WCAG 1.0 was published WCAG 2.0 is official, so what do we do now? Its time to look inside and start updating.

WCAG 2.0 applies broadly to more advanced technologies; is easier to use and understand; and is more precisely testable with automated testing and human evaluation.

W3C WAI recommends using WCAG 2.0, instead of WCAG 1.0.

Most Web sites that conform to WCAG 1.0 will not require significant changes in order to conform to WCAG 2.0, and some may not need any changes. To help you move to WCAG 2.0, WAI is developing:

WCAG 2.0 has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.

For a short summary of the WCAG 2.0 guidelines, see WCAG 2.0 at a Glance.

The best place to start working with WCAG 2.0 is the How to Meet WCAG 2.0 (Quick Reference).

Remember we are here to help so any questions about your site being accessible let us know and we can give you a complete evaluation.